WordPressテーマSWELLのメニュー(グローバルナビ)の間隔を変更する方法

2024年7月23日

当サイトにはプロモーション広告が含まれる場合があります

こんにちは、Sakiです！

この記事では、WordPressテーマSWELLを使った、メニュー(グローバルナビ)の間隔を変更する方法を書いています。

上の画像は、何もしていない状態のメニューの間隔です。

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

Saki

CSSコードを使いますが、コピペでOKなので初心者さんも安心してください！

メニュー(グローバルナビ)の間隔を変更するだけでも、デザインの雰囲気を変えられます。

また、間隔が広がると読みやすくもなるので、ぜひこの記事を参考に調整してみてください！

WordPressテーマSWELLのメニュー(グローバルナビ)の間隔を変更する方法

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

まだメニューを作成していない方は、下記の記事で作成手順を解説しているので、こちらから始めてください！

CSSコードをWordPressのスタイルシートに貼り付ける

まずは、下記のコードをコピーしておいてください。

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

次に、WordPressの管理画面にある「テーマエディター」へ移動します。

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

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

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

Saki

広すぎる、狭すぎると感じた場合は、お好きな数字に変更して、間隔を調整してくださいね！

SWELLを使ったコーポレートサイトの作り方も解説しています！

当ブログでは、他にもWordPressテーマ「SWELL」に関する記事を投稿しています。

たとえば「SWELLを使ったコーポレートサイトの作り方」の記事は人気で、デモサイトや画像を使って解説しています！

SWELLを使ったコーポレートサイトの作り方！Webデザイナーがデモサイトで解説！

デモサイトではアロマサロンを想定していますが、文章や写真・サイトの色を変えれば、どんなコーポレートサイト・企業サイト・ホームページにも合います！

SWELLでコーポレートサイト・企業サイトを自作したい方
WordPressのホームページの作り方を知りたい初心者さん

Saki

このような方におすすめです！

また、下記の記事では、WordPressで企業サイトや会社ホームページを作るときの、設計やポイントを解説しています。

集客・成約できるホームページにするには「設計」がめちゃくちゃ重要なので、ぜひ参考にしてください！

WordPress「企業サイト」の作り方！初心者向けに超分かりやすく解説！

Saki

もし「ホームページの自作はやっぱり大変！誰かに作ってもらいたい！」と思った場合は、ぜひエトリールデザインにお任せください！

女性向けのデザインが得意で、ホームページの運営方法までご指導しています♪

誰にでも分かりやすくを心がけてますので、パソコンが苦手な方もご安心ください^^
＞＞パソコン・ITが苦手な初心者向けの自分で運営できるホームページ制作