SWELLでブログを始めたけど、ヘッダーメニューの見た目がなんだか物足りない…。そんな風に思ったことはありませんか？
グローバルナビ（ヘッダーメニュー）は、サイトの第一印象を決める大事なパーツ。この記事では、初心者でもわかるように、SWELLのグローバルナビのカスタマイズ方法を丁寧に解説します。フォントサイズ、色、太さ、余白まで、コード付きでご紹介します！
目次
グローバルナビとは？
グローバルナビゲーションとは、サイト全体で共通して表示される上部メニューのこと。訪問者が「このサイトは何があるのか？」を一目で理解できるようにするために重要な役割を果たします。
SWELLでは、「外観」→「メニュー」から設定でき、「グローバルナビに設定」にチェックを入れることで、ヘッダー部分に表示されます。
カスタマイズできる項目一覧
| 項目 | 内容 |
|---|---|
| フォントサイズ | メニュー文字の大きさ |
| 文字色 | 通常時とホバー時の色 |
| フォントの太さ | bold、normalなど |
| 文字間隔 | 文字同士の間隔（letter-spacing） |
| 余白（padding） | 上下左右のスペース |
STEP別：カスタマイズ手順
STEP1：基本設定（カスタマイザー）
- WordPress管理画面 →「外観」→「カスタマイズ」へ
- 「ヘッダー」→「グローバルナビメニュー」を選択
- 文字色、背景色などを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のグローバルナビは、少し手を加えるだけで見た目も機能性もグッとアップします。この記事で紹介したカスタマイズを参考に、あなたのサイトに合ったメニューに仕上げてください。
読みやすく、美しく、使いやすいナビゲーションで訪問者に「わかりやすさ」と「安心感」を届けましょう。
コメント