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

こんにちは、Sakiです!

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

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

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

Saki

私の備忘録ですが、参考になれば幸いです!

メインビジュアルのサイズ変更については下記で解説してるので、こちらも合わせて参考にしてください。

目次

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

事前準備として、「外観」→「メニュー」より、メニューを作成してから始めてくださいね!

WordPressのメニューを作成する手順は、下記で解説しています。

スタイルシートへCSSを貼り付ける

下記のコードをスタイルシートに貼り付けていきます。

.c-gnav>.menu-item {
width: 150px;   /*ナビ同士の間隔*/
letter-spacing: .1rem;   /*文字の間隔*/
}

こちらのコードをコピーしておきます。

それぞれ必要なサイズに合わせて、お好きな数字に変更してください!

  • 管理画面「外観」→「テーマファイルエディター」を選択
  • 右側の欄で「style.css」になっているか確認
  • コピーしたコードを貼り付ける
  • 「ファイルを更新」をクリックして、反映されているか確認

テーマファイルエディターを開いた時に注意事項が出てきたら、「理解しました」をクリックしてください。

これだけで、メニューの間隔が変更されます。

Saki

お疲れ様でした!

よかったらシェアしてね!
目次