【SWELL】ヘッダー（グローバルナビ）のカスタマイズ方法

SWELLでブログを始めたけど、ヘッダーメニューの見た目がなんだか物足りない…。そんな風に思ったことはありませんか？

グローバルナビ（ヘッダーメニュー）は、サイトの第一印象を決める大事なパーツ。この記事では、初心者でもわかるように、SWELLのグローバルナビのカスタマイズ方法を丁寧に解説します。フォントサイズ、色、太さ、余白まで、コード付きでご紹介します！

グローバルナビとは？

グローバルナビゲーションとは、サイト全体で共通して表示される上部メニューのこと。訪問者が「このサイトは何があるのか？」を一目で理解できるようにするために重要な役割を果たします。

SWELLでは、「外観」→「メニュー」から設定でき、「グローバルナビに設定」にチェックを入れることで、ヘッダー部分に表示されます。

カスタマイズできる項目一覧

項目	内容
フォントサイズ	メニュー文字の大きさ
文字色	通常時とホバー時の色
フォントの太さ	bold、normalなど
文字間隔	文字同士の間隔（letter-spacing）
余白（padding）	上下左右のスペース

STEP別：カスタマイズ手順

STEP1：基本設定（カスタマイザー）

1. WordPress管理画面 →「外観」→「カスタマイズ」へ
2. 「ヘッダー」→「グローバルナビメニュー」を選択
3. 文字色、背景色などをGUIで変更できます

STEP2：追加CSSで詳細設定

もっと細かく調整したい方は、以下のコードを「外観」→「カスタマイズ」→「追加CSS」に貼り付けてください。

/* グローバルナビのフォントサイズ・色・太さなど */
.c-gnav>.menu-item>a .ttl {
font-size: 16px;
color: #F8D378;
font-weight: bold;
letter-spacing: 2.3px;
}

これで、ナビゲーションが読みやすく・バランスの取れた見た目に調整できます。

おすすめの設定例

以下は多くのブログで使いやすい設定例です。

.global-nav a {
  font-size: 16px;
  font-weight: bold;
  color: #F8D378;
  letter-spacing: 0.04em;
  padding: 10px 16px;
}

さらにスマホ表示に配慮したレスポンシブ対応CSSも付け加えましょう。

@media screen and (max-width: 768px) {
  .global-nav a {
    font-size: 15px;
    padding: 8px 12px;
  }
}

よくある失敗と注意点

• 文字がスマホで崩れる：フォントサイズが大きすぎたり余白が広すぎると、スマホ表示ではみ出します。
• 色が反映されない：キャッシュが原因の場合があります。スーパーリロード（Ctrl+F5）で確認を。
• デザインが崩れた：他のテーマCSSと競合することも。クラス指定や!importantで調整可能です。

まとめ

SWELLのグローバルナビは、少し手を加えるだけで見た目も機能性もグッとアップします。この記事で紹介したカスタマイズを参考に、あなたのサイトに合ったメニューに仕上げてください。

読みやすく、美しく、使いやすいナビゲーションで訪問者に「わかりやすさ」と「安心感」を届けましょう。

次に読みたい記事（関連記事リンク）

• SWELLでトップページをおしゃれにするコツ
• WordPressの追加CSS活用法 初心者向けガイド
• SWELLユーザーにおすすめのプラグイン3選