WordPressテーマSWELLのメニュー(グローバルナビ)の間隔を変更する方法
当サイトにはプロモーション広告が含まれる場合があります
こんにちは、Sakiです！
この記事では、WordPressテーマSWELLを使った、メニュー(グローバルナビ)の間隔を変更する方法を書いています。
上の画像は、何もしていない状態のメニューの間隔です。
こちらが、CSSコードを使って、メニュー同士の間隔を広げたものです。
SakiCSSコードを使いますが、コピペでOKなので初心者さんも安心してください！
メニュー(グローバルナビ)の間隔を変更するだけでも、デザインの雰囲気を変えられます。
また、間隔が広がると読みやすくもなるので、ぜひこの記事を参考に調整してみてください！
目次
WordPressテーマSWELLのメニュー(グローバルナビ)の間隔を変更する方法
まだメニューを作成していない方は、下記の記事で作成手順を解説しているので、こちらから始めてください！
あわせて読みたい
WordPressのメニュー(グローバルナビ)を作成・カスタマイズする方法
こんにちは、Sakiです！ WordPressのメニューを作成する手順を教えてください。並べ替えなどのカスタマイズ方法も知りたいです！ WordPressのメニュー(グローバルナビ)…
CSSコードをWordPressのスタイルシートに貼り付ける
まずは、下記のコードをコピーしておいてください。
.c-gnav>.menu-item {
width: 150px; /*ナビ同士の間隔*/
letter-spacing: .1rem; /*文字の間隔*/
}次に、WordPressの管理画面にある「テーマエディター」へ移動します。
- 管理画面「外観」→「テーマファイルエディター」を選択
- 右側の欄で「style.css」になっているか確認
- コピーしたコードを貼り付ける
- 「ファイルを更新」をクリックして、反映されているか確認
テーマファイルエディターを開いた時に注意事項が出てきたら、「理解しました」をクリックしてください。
これだけで、メニューの間隔が変更されます！
Saki広すぎる、狭すぎると感じた場合は、お好きな数字に変更して、間隔を調整してくださいね！
SWELLを使ったコーポレートサイトの作り方も解説しています！
当ブログでは、他にもWordPressテーマ「SWELL」に関する記事を投稿しています。
たとえば「SWELLを使ったコーポレートサイトの作り方」の記事は人気で、デモサイトや画像を使って解説しています！
デモサイトではアロマサロンを想定していますが、文章や写真・サイトの色を変えれば、どんなコーポレートサイト・企業サイト・ホームページにも合います！
- SWELLでコーポレートサイト・企業サイトを自作したい方
- WordPressのホームページの作り方を知りたい初心者さん
Sakiこのような方におすすめです！
また、下記の記事では、WordPressで企業サイトや会社ホームページを作るときの、設計やポイントを解説しています。
集客・成約できるホームページにするには「設計」がめちゃくちゃ重要なので、ぜひ参考にしてください！
Sakiもし「ホームページの自作はやっぱり大変！誰かに作ってもらいたい！」と思った場合は、ぜひエトリールデザインにお任せください！
女性向けのデザインが得意で、ホームページの運営方法までご指導しています♪
誰にでも分かりやすくを心がけてますので、パソコンが苦手な方もご安心ください^^
＞＞パソコン・ITが苦手な初心者向けの自分で運営できるホームページ制作
この記事を書いた人
フリーランスWebデザイナー｜ 20代 ｜ 女性向けホームページ制作の実績多数 ｜ ブログではWebデザイナーを目指す方や、ホームページの自作に役立つ情報を発信しています♪≫プロフィールはこちら