WordPressの使い方

【保存版】WordPressのヘッダーメニューの作り方!AFFINGER5のカスタマイズも有り

【保存版】WordPressのヘッダーメニューの作り方!AFFINGER5のカスタマイズも有り

 

誠太
こんにちは、誠太です!

 

ヘッダーメニューの設定は、ユーザーがあなたのサイトの訪れて早い段階で目につく場所です。

 

そのため、適当に設定してしまうと離脱率が上昇してしまう可能性は否定できません。

 

本記事では、AFFINGER5のメニューの設定について解説を行い、あなたのサイトのファーストビューが今よりも向上するようにお手伝いしたいと思います。

 

本記事の内容

  • AFFINGER5のメニューの設定方法について
  • メニューをリッチにするカスタマイズについて
  • AFFINGER5のメニューを均等配置にするCSSプレゼント

 

【保存版】WordPressのヘッダーメニューの作り方!AFFINGER5のカスタマイズも有り

【保存版】WordPressのヘッダーメニューの作り方!AFFINGER5のカスタマイズも有り

 

それでは、実際にAFFINGER5のヘッダーメニューを作り込んでいきたいのですが、先に何をするのかをお伝えしておきましょう。

 

  • カテゴリの作成
  • メニューの設定
  • メニューアレンジ

 

この3つ設定を終わらせることによって、最近トレンドとなっているヘッダーメニューを作り込むことができます。

 

カテゴリーの作成

まずは、カテゴリーです。

カテゴリーはもしかしたら既に作っているかもしれませんが、下記の場合は作り直したほうが良いかもしれません。

 

  • とりあえずカテゴリーを作っている
  • カテゴリー階層が3以上になっている
  • 現状パッと見て分かりづらい名称になっている

 

今のカテゴリー名称を変更することである程度改善できるので、本記事の設定が終わってから作り込んでも良いでしょう。

 

カテゴリーの作り方については、ブログのカテゴリー分けのコツは多すぎず深すぎないこと!【初心者向け】で詳しく解説しているので、あわせてご覧ください。

 

ブログのカテゴリー分けのコツは多すぎず深すぎないこと!【初心者向け】

  誠太こんにちは、誠太です!   あなたはブログのカテゴリーを適切に作成できていますか?   雑にカテゴリーを分けてしまうと、SEO的にもユーザーの使い勝手的にも、あま ...

続きを見る

 

ヘッダーメニューの完成図

メニューの完成図はこのようになります。

ヘッダーメニューの完成図

 

アイコンをそれぞれのカテゴリーに関連のあるアイコンをつけて、文字を太文字にします。

 

更にサブカテゴリーがあることを目視でわかってもらえるように、プルダウンアイコンをつけてあげましょう。

 

マウスポインターを乗せると、画像のようにサブカテゴリーが表示されるようにして完成です。

 

メニューの設定箇所は下記の手順で設定画面に移動できます。

 

メニューの設定場所

『WordPressサイドバー』→『外観』→『メニュー』

 

もしヘッダーメニューの作成が初めてであれば、こちらの赤で囲ってある『新規メニューを作成』から作成することが出来るようになっています。

メニュー名の入力欄が出てくるので、今回は『ヘッダーメニュー』にしておきましょう。

 

ヘッダーメニュー新規作成

 

ここまでできたら、続いて下記の画像の様に設定を行います。

 

ヘッダーメニューカテゴリー作成

 

すでに作成してあるカテゴリーは、画像の左側に表示されている『カテゴリー』のプルダウンメニューから確認することができます。

 

ヘッダーに表示させたいカテゴリーとサブカテゴリー全てにチェックを入れて、『メニューに追加』ボタンを押すと、画面の右側の赤枠の位置に表示されるので、カテゴリーが追加されている事がわかったら次のステップに進みましょう。

 

カテゴリーナビゲーションラベル

 

何やら沢山タグが入っていますが、今は気にせず基本設定から取り掛かります。

 

主に設定する項目はこちらです。

 

  • ナビゲーションラベル

 

ナビゲーションラベルはヘッダーメニューに表示される名称になります。

ここで複雑な名前にするよりはシンプルでわかりやすい単語名称で書いてあげると、見てすぐになんのことについてのカテゴリーなのかが理解してもらいやすくなるでしょう。

 

説明部分に関しては、AFFINGER5で設定する項目がないので、入力しなくてもOKです。

 

カテゴリーのプルダウンに表示させるサブカテゴリーの設定は、マウスのドラッグで簡単に行うことができます。

 

サブカテゴリー作成

 

マウスポインターは表示されていませんが、『BLOG』をマウスで左クリックしながらドラッグしている状態です。

 

ドラッグすると上記の画像のように点線が表示されるので、サブカテゴリーを作成する場合は親カテゴリーの一階層下(一段右)に来るようにしてあげればOKです。

 

ヘッダーメニューアレンジの方法

メニューのアレンジ方法に感しては、アイコンを挿入していきたいのですが、アレンジをする前に下準備として『Font Awesome』の導入をしていきます。

※既に導入されている場合は、飛ばしてもOKです。

 

FontAwesomeの導入方法は、こちらのコードをテーマエディターから親テーマを選択して、『footer.php』の</head>タグ直前に貼り付けてください。

 

<script type="text/javascript">
var mycss=function(){// mycss関数を定義。{}内の処理を実行。
  var l=document.createElement("link");// link要素をlに代入。
  l.rel="stylesheet";// lにrel="stylesheet"属性を付与。
  l.href="https://use.fontawesome.com/releases/v5.8.1/css/all.css";// lにhref属性を付与。
  var s=document.getElementsByTagName("link")[0];// HTML内の最初のlink要素名をsへ代入
  s.parentNode.insertBefore(l,s);// sの直前にlを出力
};
window.addEventListener("DOMContentLoaded",mycss);// DOMの構築が終わったらmycss関数を実行
</script>

 

FontAwesomeコード挿入方法

 

  1. 親テーマを選択する
  2. テーマのデータが右側で表示されるので『テーマフッター』を探す
  3. </body>タグの直前にコピペしたコードを貼り付ける

 

なんでFontAwesomeの導入コードを<head></head>の中に挿入しないのかと疑問に思われる人もいるかも知れませんが、<head></head>タグ内にFontAwesomeの導入コードを挿入するとサイトのスピードが低下する原因になるためです。

 

JavaScriptというプログラミング言語で囲って、アイコンを遅延ロードさせるようになっているのでSEO的にも、FontAwesomeの導入方法はこの方法が1番ベストでしょう。

 

FontAwesomeの導入はこれで以上になるので、次にFontAwesomeのサイトを確認してアイコンを探しましょう。

 

 

FontAwesomeアイコン検索

 

このような画面がページに表示されると思うので、赤枠で囲ってある部分に『BLOG』と打ち込んでみましょう。

するとこのように、アイコンが沢山表示されます。

 

FontAwesomeアイコン一覧

 

灰色が有料、黒色が無料で使用できるアイコンとなっているので、無料アイコンの中からカテゴリーに合ったアイコンを探しましょう。

 

ちなみに、FontAwesomeでアイコンの検索をするときは英語で検索する必要があるので、もしカテゴリーの英語名称がわからない場合などには、Google翻訳の『和英』を使用して、ヒントとなる英語を教えてもらいましょう。

 

 

気に入ったアイコンが見つかったら、そのアイコンをクリックするとこちらの画像の画面に移動します。

 

FontAwesomeアイコンコードコピー

 

赤枠で囲っている部分をクリックすると、FontAwesomeのアイコンを使用するためのコードがコピーされるので、コピーされたコードをWordPressのメニュー設定の画面に戻ってペーストします。

 

FontAwesomeナビゲーションラベル挿入

 

こちらの画像のようになっていればOKです。

続いてプルダウン用のアイコンも追加していきます。

 

プルダウン用のアイコンは『sort-down』で検索を行なうとアイコンが表示されるので、先ほど行った手順でこちらの画像のように貼り付けてください。

 

FontAwesomeソートダウンアイコンコード挿入

 

ここでひとつ見やすくするコツがあります。

このままだと、アイコンとプルダウン用のアイコンがカテゴリー名に密接しすぎて見づらくなってしまうので、カテゴリー名の頭に『全角スペース』名称末に『半角スペース』を追加してください。

 

スペースを追加することによって、こちらのコードのようになると思います。

 

<i class="fas fa-blog"></i> BLOG <i class="fas fa-sort-down"></i>

 

この様になっていれば、当サイトのカテゴリーメニューと同じ間隔でカテゴリーが表示されるはずなので、見比べてみてください。

 

ここまでの手順を書くカテゴリーで繰り返すことによって、冒頭でお見せした完成図のようになるのでトライしてみてください。

 

もし、うまくいかない場合は、Twitter(@AfiSeita)まで問い合わせていただければ、アドバイスさせていただきます。

 

以上で、WordPress・AFFINGER5共通のメニューを作成する基本的な部分は終了です。

 

続いて、AFFINGER5ユーザーに向けて、カスタマイザーでの設定項目について解説をしていきます。

 

AFFINGER5(アフィンガー5)カスタマイザーでの設定方法

AFFINGER5(アフィンガー5)カスタマイザーでの設定方法

 

カスタマイザーでの設定は、かなりシンプルに設定できるようになっているので、あなた好みのカラー等を設定してみてください。

 

ヘッダーメニューについてのカスタマイズは、こちらの手順で設定場所までいけます。

 

『WordPressサイドバー』→『外観』→『カスタマイズ』→『メニューのカラー設定』→『PCヘッダーメニュー』

 

メニューカラーの設定

メニューカラーは、他のカスタマイザーと同じように設定できます。

 

メニューカラーの設定

 

ポイントとしては、ヘッダーの色を同じ色を選択すると統一感が出て良いと思います。

メニューの色を単色にしたい場合は、『背景色』『背景色(グラディエーション上部)』を同じ色に設定すると単色にすることができます。

 

  • ボーダー上下色(メニューの上下のボーダー色)
  • ボーダー左右色(メニューの左右端のボーダー色)
  • ボーダー右色(カテゴリー間の縦ボーダー色)
  • 文字色(カテゴリーの表示文字色)
  • 下層ドロップダウンメニュー背景色(サブメニュー表示時の背景色)

 

上記の設定に関しては『下層ドロップダウンメニュー背景色』以外、必要があればカラーを設定してみてください。

 

下層ドロップダウンメニュー背景色は、ヘッダーメニューのメインカラーよりも少し濃い目にするか薄めにするかどちらかが無難だと思うので、特別カラーにこだわりがなければ、左記の設定で良いでしょう。

 

ボーダー左右色に関しては、『メニューの横幅を100%にする』にチェックが入っていると分かりづらいので、100%に設定する場合は特別設定しなくても良いと思います。

 

チェックするべきチェックボックス

カスタマイザーでチェックすべきチェックボックスは、こちらです。

 

  • 第一階層メニューを太字にする(サイドメニュー連動)
  • メニューの横幅を100%にする(好みに応じて)

 

第一階層メニューを太字にすることによって、カテゴリーの存在感を強めることが出来るのでおすすめです。

 

メニューの横幅は設定しているヘッダーのサイズに合わせて100%にするかどうか決めてみてください。

 

ヘッダーを横幅100%にしている場合は、メニューも100%にしておいたほうが統一感が出て良いと思います。

 

逆にヘッダーが100%じゃない場合であっても、メニューの横幅を100%にすると記事エリアとの区切りが出来るので、あなたの好みに合わせて設定してみてください。

 

カスタマイザー内のその他の設定

カスタマイザー内には他に設定できる項目がありますが、基本的には先程見ていただいた画像を参考にしていただければ大丈夫です。

 

メニューの上下に隙間を作るも、特にチェックを入れなくても良いと思いますし、背景画像に感しても画像によってはメニューが見づらくなってしまうので、リスクを考えれば設定しなくても良いと思います。

シンプルな画像であればOKでしょう。

 

ヘッダーメニューを左右均一幅にするCSS【WordPress共通】

冒頭でご覧いただいた完成図画像のヘッダーメニューはCSSで均一表示処理を行っています。

 

このCSSは同じくカスタマイザー内の『追加CSS』に貼り付けていただければそのまますぐに適応されます。

 

貼り付けるコードはこちらです。

/*ヘッダーメニュー幅*/
header .smanone ul.menu li{
width: 155px !important;
}

 

このコードを使用することによって、均一にメニューを表示させることが出来るので、サッと追加しておきましょう。

 

また、WordPressのヘッダーメニュー全共通で使用できるので、AFFINGER5ユーザー以外でも使用可能です。

 

以上で、AFFINGER5のヘッダーカスタマイズは終了になります。

 

ユーザーが使いやすいサイトを心がけましょう

ユーザーが使いやすいサイトを心がけましょう

 

ここまでの手順で最近トレンドとなっているヘッダーメニューの作成はできたかと思います。

 

ヘッダーメニューはユーザーが早い段階で目にしやすい部分になるので、しっかりと作り込むことをオススメします。

 

また、もし分かりづらいところがあったら、先ほどもTwitterのアカウントを載せましたが、DMかぼく宛にリプを送っていただければアドバイスさせていただきますので、こちらまで(@AfiSeita)お願いします。

 

\ あわせて読みたい! /

サイトの表示速度は3サイトで改善しよう!遅い原因は意外なところに

  誠太こんにちは、誠太です!   ページスピードというと記事作成やブログのレイアウト作成に比べると軽視されがちですが、検索結果で上位表示されるために最低限必要になってきます。 & ...

続きを見る

【最新版】AFFINGER5をレビュー!実用10特典をGETしてライバルに差をつけよう!

  AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。実用特典ってどんな特典なの?   ご覧いただいてありがとうございます。 &nbs ...

続きを見る

  • この記事を書いた人
  • 最新記事
誠太

誠太

理系の文系ブロガー。理系脳ではプログラミングを、文系脳ではブログの運営についてのHow toを話題にブログで紹介しています。年間で1,600万を売り上げた実績を元にマーケティングにも触れ、プログラミングの学習方法やブログでの稼ぎ方について情報発信中!

よく読まれている記事

1

  AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。実用特典ってどんな特典なの?   ご覧いただいてありがとうございます。 &nbs ...

2

スポンサーリンク   アフィリエイトに向いているASPってあるのかな?もし稼ぎやすいASPがあるなら登録したいんだけど、おすすめのASPってある?   こんな悩みに解決しようと思い ...

3

  誠太こんにちは、誠太です!   ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。   しかし、ただブログを書いているだけでは ...

4

  ブログのSEO対策はいろんな情報があって、何が正しい対策なのかわからない場合が多く困ってしまいませんか?   本記事では、今回紹介するSEO対策を行い上位表示を確認できたことを ...

5

  誠太こんにちは、誠太です!   はてなブログをお使いのあなたにお伝えしなければいけないことがあります。 はてなブログから『はてなブログPro』に移行するのはやめましょう。 &n ...

-WordPressの使い方
-

Copyright© SEITALITY , 2019 All Rights Reserved.