WordPress【SWELL】のメニューの間隔を変更する方法

こんにちは、Sakiです!
この記事では、CSSコードを使って、SWELLのメニューの間隔を変更する方法を書いています。

こちらは元々の間隔で表示されている、メニューです。

こちらが、コードを使ってナビ同士の間隔を広げたものです。

私の備忘録ですが、参考になれば幸いです!
メインビジュアルのサイズ変更については下記で解説してるので、こちらも合わせて参考にしてください。
あわせて読みたい




【SWELL】メインビジュアルに余白をつけてサイズを変更する方法
こんにちは、Sakiです! この記事では、SWELLのメインビジュアルのサイズを変更する方法を解説しています! 今回の手順での変更はこんな感じで、画像の周りに余白を付け…
目次
【WordPress】SWELLのメニューの間隔を変更する方法
WordPressのメニューを作成する手順は、下記で解説しています。
あわせて読みたい




WordPressのメニューを作成・カスタマイズする方法
こんにちは、Sakiです! WordPressのメニューを作成する手順を教えてください。並べ替えなどのカスタマイズ方法も知りたいです! このような質問にお答えします。 WordP…
スタイルシートへCSSを貼り付ける
下記のコードをスタイルシートに貼り付けていきます。
.c-gnav>.menu-item {
width: 150px; /*ナビ同士の間隔*/
letter-spacing: .1rem; /*文字の間隔*/
}
こちらのコードをコピーしておきます。
それぞれ必要なサイズに合わせて、お好きな数字に変更してください!


- 管理画面「外観」→「テーマファイルエディター」を選択
- 右側の欄で「style.css」になっているか確認
- コピーしたコードを貼り付ける
- 「ファイルを更新」をクリックして、反映されているか確認
テーマファイルエディターを開いた時に注意事項が出てきたら、「理解しました」をクリックしてください。
これだけで、メニューの間隔が変更されます。



お疲れ様でした!