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

2023年11月25日

当サイトにはプロモーション広告が含まれています

こんにちは、Sakiです！

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

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

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

Saki

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

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

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

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

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

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

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

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

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

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

Saki

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

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

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

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

あわせて読みたい

SWELLを使ったコーポレートサイトの作り方！Webデザイナーがデモサイトで解説！こんにちは、Sakiです！この記事では、WordPressテーマ「SWELL」を使ったコーポレートサイト(企業サイト)の作り方を、現役Webデザイナーが解説しています！こちらのデ…

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

Saki

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

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

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