WordPressテーマのAFFINGER6を導入したけど、なんだかヘッダーメニューの設定でつまずいていませんか？設定項目が多くてどこを触ればいいのか、分からなくなってしまいますよね。
この記事を読めば、表示されない時の意外な原因から、ロゴやアイコンを使ったデザインの調整、さらにはHTML/CSSを使った一歩進んだカスタマイズ方法まで、あなただけのオリジナルヘッダーが作れるようになります。
この記事を読み終える頃には、きっと理想のヘッダーメニューが完成しているはずですね。さっそく、一緒に設定を進めていきましょう！
この記事のポイント
- ヘッダーメニューが表示されない時の対処法
- ロゴやアイコンの設置、色の変更方法
- コードでメニューを横並びにする方法
- メニュー設定に関わる3つの管理画面
AFFINGER6ヘッダーメニューの基本的な設定方法
ヘッダーメニューが表示されない時の対処法
AFFINGER6で設定したはずのヘッダーメニューが表示されず、困っていませんか？実は、これは多くの方が経験する悩みの一つです。
結論から言うと、原因はAFFINGER6の複数の設定箇所が互いに影響しあっているケースがほとんどでしょう。特に見落としがちな3つのポイントを確認すれば、きっと解決できます。
なぜなら、AFFINGER6は「AFFINGER管理画面」とWordPress標準の「外観」メニューの両方で設定を行うため、片方の設定がもう一方の邪魔をしてしまうことがあるからです。このように言うと難しく聞こえるかもしれませんが、チェックする場所は決まっているので安心してくださいね。
ここでは、ヘッダーメニューが表示されない時に確認すべき具体的な3つのステップを解説します。
-
- 「ヘッダーを分割しない」設定の確認
まず最初に確認したいのがこの設定です。サイトのロゴの横にメニューを置きたい場合、この設定が原因で表示されていない可能性があります。
確認場所： WordPressダッシュボード → 「AFFINGER管理」 → 「ヘッダー」
「PCのみ」という項目にある「ヘッダーを分割しない」のチェックを外して保存してください。ここにチェックが入っていると、タイトル横にメニューを表示するタイプの「ヘッダーメニュー（横列）」は表示されません。【注意点】
もし、チェックを外して保存しても、設定画面に戻ると再びチェックが入ってしまう場合は、利用している子テーマ（※）が影響している可能性があります。特に「AFFINGER JET」という子テーマを使っている場合は、JET側の設定が親テーマの設定を上書きしてしまうことがあるので、JETの管理画面で「親テーマ管理設定の上書きを解除する」といった項目を確認してみてください。※子テーマ：元のテーマ（親テーマ）の機能を引き継ぎつつ、カスタマイズ内容を記録しておくためのファイル。テーマのアップデートがあってもデザインが崩れないメリットがあります。
- 「ヘッダーを分割しない」設定の確認
- メニューの位置が正しく割り当てられているか確認
次に、作成したメニューが正しい「メニューの位置」に設定されているかを確認します。AFFINGER6には複数のメニュー表示位置があり、それぞれ役割が異なります。
確認場所： WordPressダッシュボード → 「外観」 → 「メニュー」
メニュー編集画面の下部にある「メニュー設定」の「メニューの位置」を確認しましょう。
- ヘッダーメニュー： 主にヘッダー画像の下に表示されるメインのメニュー
- ヘッダーメニュー（横列）： サイトタイトルの横に表示されるメニュー
- スマホスライドメニュー： スマートフォンで表示した時のハンバーガーメニュー
例えば、サイトタイトルの横にメニューを表示させたいのに、「ヘッダーメニュー」にしかチェックを入れていない、というケースがよくあります。表示したい場所に対応する項目に、正しくチェックが入っているか見直してみましょう。
- AFFINGER管理画面でメニューが有効になっているか確認
最後に、AFFINGER管理画面側でメニュー自体を有効化する設定です。特に「ヘッダーメニュー（横列）」はこの設定忘れが非常に多いです。
確認場所： WordPressダッシュボード → 「AFFINGER管理」 → 「メニュー」
「PC用グローバルメニュー」の項目にある「ヘッダーメニュー（横列）を有効化」にチェックを入れてください。これを有効にしないと、ステップ2でいくらメニューを割り当てても表示されません。
以上の3ステップを確認すれば、AFFINGER6でヘッダーメニューが表示されない問題はほとんど解決するはずです。設定箇所が多くて最初は少し戸惑うかもしれませんが、一度覚えてしまえば簡単ですよ。
ロゴを配置してデザインをカスタマイズ
サイトの「顔」とも言えるヘッダー部分。
AFFINGER6なら、あなたのサイトの印象を決定づけるロゴの配置やヘッダーメニューのデザイン変更を、初心者でも直感的に行うことができます。
なぜなら、AFFINGER6はWordPressの「カスタマイザー」機能にしっかり対応しており、変更内容をリアルタイムで確認しながら作業を進められるからです。
これなら、難しいコードを知らなくても、まるでプレビュー画面を見ながらお絵描きする感覚でデザインを調整できますね。
ここでは、ロゴの設置からメニューの色変更、さらにはアイコンを追加してグッと分かりやすくする方法まで、具体的なカスタマイズ手順を解説していきます。
ロゴ画像を配置する方法
まず、サイトのシンボルとなるロゴ画像を設定しましょう。
PCとスマホで別々のロゴ画像を設定できるのがAFFINGER6の便利な点です。
- WordPressダッシュボードから「外観」→「カスタマイズ」をクリックします。
- カスタマイズ画面で「ロゴ画像 / サイトのタイトル」を選択します。
- 「ロゴ画像」と「ロゴ画像（スマホ）」の項目で、それぞれ「画像を選択」ボタンを押し、用意したロゴ画像をアップロードすれば完了です。
こうすれば、画面サイズに応じて最適なロゴを表示させることが可能になります。
ヘッダーメニューの色やデザインを変更する
次に、ヘッダーメニューの背景色や文字色などを変更して、サイト全体の雰囲気に合わせていきましょう。
こちらもカスタマイザーから簡単に設定できます。
設定場所： 「外観」→「カスタマイズ」→「-各メニュー設定」→「PCヘッダーメニュー」
この画面では、以下のような多彩な設定が可能です。
- ヘッダーメニュー全体の背景色
- メニュー項目の文字色
- メニュー間の区切り線（ボーダー）の色
- メニューの横幅を画面100%に広げる
- メニュー全体を中央に寄せる（センター寄せ）
プレビューで表示を確認しながら、ご自身のサイトに合ったデザインを見つけてみてください。
【注意点：ヘッダーメニュー（横列）の文字色】
ここで一つ、非常に重要な注意点があります。
サイトタイトルの横に表示する「ヘッダーメニュー（横列）」の文字色だけは、上記の設定場所では変更できません。
この設定は少し分かりにくい場所にあり、多くの方がつまずくポイントです。
変更場所： 「外観」→「カスタマイズ」→「基本エリア設定」→「ヘッダーエリア」の中にある「電話番号とヘッダーリンク」の項目で色を設定します。
少し意外な場所ですが、ここを覚えておけば迷うことはありません。
メニューにアイコンを追加して分かりやすく
メニュー項目にアイコンを追加すると、訪問者が内容を一目で理解しやすくなり、サイトの利便性が向上します。
例えば「お問い合わせ」の横にメールのアイコンを置く、といった具合です。
- 準備：Font Awesomeを有効にする
まず、アイコンフォントを利用するための準備をします。「AFFINGER管理」→「その他」へ進み、「FontAwesomeIcons4.7.0の読み込み」にチェックが入っているか確認してください。入っていなければチェックして保存します。
- アイコンのコードを取得する
次に、「Font Awesome 4.7」の公式サイトへ行き、使いたいアイコンを探します。目的のアイコンを見つけたら、<i class="fa fa-..."></i>のようなHTMLコードをコピーします。 - コードをメニューに貼り付ける
最後に、「外観」→「メニュー」の編集画面を開きます。アイコンを追加したいメニュー項目の「ナビゲーションラベル」欄に、先ほどコピーしたコードをメニュー名の前に入力し、「メニューを保存」すれば完了です。
このように、AFFINGER6ではヘッダーメニューのカスタマイズが自由自在です。
ぜひオリジナルのヘッダーを作成して、訪問者を惹きつけるサイト作りを楽しんでください。
AFFINGER6ヘッダーメニューをコードでデザインする方法
HTMLとCSSでメニューを横並びにする方法
前述の通り、AFFINGER6のカスタマイザー機能は非常に優れていますが、「もっと細部までこだわりたい」「サイトの基本的な構造から理解したい」と感じることもあるでしょう。ここでは、テーマの設定に頼らず、HTMLとCSSというWebサイトの基本言語を使ってヘッダーメニューを横並びに配置する、普遍的な方法について解説します。
この方法を理解すれば、AFFINGER6での応用はもちろん、他のテーマや自作サイトでも自由自在にメニューをデザインできるようになります。言ってしまえば、サイト制作の「基礎体力」が身につくようなものです。少し専門的に感じられるかもしれませんが、一つ一つの手順はとてもシンプルなので、ぜひ挑戦してみてください。
ステップ1：HTMLでメニューの骨組みを作る
まず、メニューに表示したい項目をリストとして書き出すことから始めます。この時使うのがHTML（エイチティーエムエル）という、Webページの構造を作るための言語です。具体的には、<ul>（リスト全体を囲む）と<li>（個々のリスト項目）、そして<a>（クリックできるリンク）という3種類のタグを使います。
例えば、以下のように記述します。
<li><a href="#">ホーム</a></li>
<li><a href="#">当サイトについて</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
ただ、このHTMLコードだけでは、メニューは下のように縦に並んで表示されます。これは、<li>タグが初期設定で「ブロック要素」という、縦に積み重なる性質を持っているためです。
- ホーム
- 当サイトについて
- サービス
- お問い合わせ
ステップ2：CSSで横並びに変身させる
次に、縦に並んだメニューを横並びにする「魔法」をかけます。ここで登場するのがCSS（シーエスエス）という、見た目を整えるための言語です。CSSを使って、「縦に並ぶ」という初期設定を「横に並ぶ」ように変更するわけですね。
そのための最も強力で簡単な命令がdisplay: flex;です。これを親要素である<ul>に適用するだけで、中の子要素<li>が自動的に横一列に整列してくれます。
display: flex; /* これが横並びの魔法です！ */
list-style: none; /* 先頭の黒い点々を消します */
padding: 0;
margin: 0;
}
たったこれだけで、メニューは横並びになります。list-style: none;は、リストの先頭に自動で付く黒い点（ビュレット）を消すための記述です。これも忘れないようにしましょう。
ステップ3：さらにCSSで見栄えを整える
横並びになったら、最後にもう少しだけCSSを加えて、より「メニューらしい」見た目に仕上げていきます。例えば、各メニューの間に隙間をあけたり、リンクの下線を消したり、マウスを乗せた時の色を変えたりといった調整です。
display: block;
padding: 15px 20px; /* 文字の周りに余白を作って押しやすくします */
text-decoration: none; /* リンクの下線を消します */
color: #333; /* 文字色を黒っぽくします */
}
li a:hover {
background-color: #f0f0f0; /* マウスを乗せたら背景色が変わるようにします */
}
これらのCSSを、WordPressの場合は「外観」→「カスタマイズ」→「追加CSS」の欄に貼り付ければ、あなたのサイトに反映されます。
【注意点】
これを理解した上で、一つ注意すべきは、テーマのデザインと自作のCSSが干渉（ケンカ）してしまうことがある点です。もしうまく反映されない場合は、ulやliといった単純な指定ではなく、.header-nav ulのように、より具体的に場所を絞って指定する必要があるかもしれません。CSSは少しずつ試しながら調整していくのが上達の近道です。
なぜ？AFFINGER6のヘッダーメニューが表示されない！3つの解決策で悩み無用：まとめ
Q&Aでまとめますね。
質問（Q）；設定したメニューが表示されない一番の原因は？
回答（A）；AFFINGER管理画面とWordPressの「外観」など、複数の設定が干渉している可能性が高いです。
質問（Q）；ロゴの設置や色の変更はどうやるの？
回答（A）；主にWordPressの「カスタマイザー」機能を使えば、プレビューを見ながら直感的に設定できます。
質問（Q）；テーマの機能以上に細かくデザインしたい時は？
回答（A）；HTMLとCSSのコードを使えば、より自由度の高いオリジナルデザインの作成が可能です。
この記事では、サイト上部の案内部分が表示されない時の対処法から、デザインの調整、コードを使った応用までご紹介しました。設定箇所が多くて最初は難しく感じるかもしれませんが、この記事を参考にすれば、きっとあなた好みの素敵なナビゲーションが作れますよ。これでサイトの第一印象も、ぐっと良くなるはずですね。ぜひ、この記事を何度も見返して、オリジナルのサイト作りを楽しんでください。最後まで読んでいただき、ありがとうございました。