WordPress【SWELL】のメニューの間隔を変更する方法
こんにちは、Sakiです！
この記事では、CSSコードを使って、SWELLのメニューの間隔を変更する方法を書いています。
こちらは元々の間隔で表示されている、メニューです。
こちらが、コードを使ってナビ同士の間隔を広げたものです。
Saki私の備忘録ですが、参考になれば幸いです！
メインビジュアルのサイズ変更については下記で解説してるので、こちらも合わせて参考にしてください。
あわせて読みたい
【SWELL】メインビジュアルに余白をつけてサイズを変更する方法
こんにちは、Sakiです！ この記事では、SWELLのメインビジュアルのサイズを変更する方法を解説しています！ 今回の手順での変更はこんな感じで、画像の周りに余白を付け…
目次
【WordPress】SWELLのメニューの間隔を変更する方法
WordPressのメニューを作成する手順は、下記で解説しています。
あわせて読みたい
WordPressのメニューを作成・カスタマイズする方法
こんにちは、Sakiです！ WordPressのメニューを作成する手順を教えてください。並べ替えなどのカスタマイズ方法も知りたいです！ このような質問にお答えします。 WordP…
スタイルシートへCSSを貼り付ける
下記のコードをスタイルシートに貼り付けていきます。
.c-gnav>.menu-item {
width: 150px; /*ナビ同士の間隔*/
letter-spacing: .1rem; /*文字の間隔*/
}こちらのコードをコピーしておきます。
それぞれ必要なサイズに合わせて、お好きな数字に変更してください！
- 管理画面「外観」→「テーマファイルエディター」を選択
- 右側の欄で「style.css」になっているか確認
- コピーしたコードを貼り付ける
- 「ファイルを更新」をクリックして、反映されているか確認
テーマファイルエディターを開いた時に注意事項が出てきたら、「理解しました」をクリックしてください。
これだけで、メニューの間隔が変更されます。
Sakiお疲れ様でした！
