AFFINGER6

【5分で完成】AFFINGER6でヘッダーにカテゴリー分類メニューを設置!_ブログを見やすくしよう!

【5分で完成】AFFINGER6でヘッダーにカテゴリー分類メニューを設置!_ブログを見やすくしよう!

ぶたっち

大学生時代にプログラミング学習を始め、Web業界に興味を持つ。
スクールでプログラミングを勉強したが、自分に合っていないと感じてプログラミングと距離を置く。
ブログをきっかけにSEOに興味を持つようになり、Webマーケティングの世界へ。
最近はITやWeb、SNSなどの情報を調べて楽しんでいます。
保有資格:SEO検定1級、Web解析士


ヘッダーにカテゴリーページを設置したい!
記事が多くなってきたのでカテゴリーごとに整理したい!
読者がわかるようにカテゴリーで分類したい!



などがあるのではないでしょうか?



記事が増えるにつれてどの記事がどのカテゴリーに分類されているかがわかりにくくなると思います。




また、読者にとってもすぐに興味のあるカテゴリーを閲覧することができますので、見やすい場所にカテゴリー分類メニューを設置しておくことは重要です。



というわけで、ヘッダーにカテゴリー分類メニューを設置する方法を紹介します。


ポイント

  • カテゴリー分類メニューをヘッダー設置する方法
  • カテゴリー分類のデザイン方法




本記事では当ブログですと以下にあたるものを作っていきます。




まずはカテゴリー分類メニューをヘッダーに設置することについてのメリットを紹介します。



すぐにカテゴリー分類メニューの設置方法を知りたい方はこちらから移動してください。



AFFINGER6ヘッダーにカテゴリー分類メニューを設置するメリット




まず、ヘッダーにカテゴリー分類メニューを設置してもSEOの評価に直接関係するわけではありません。

カテゴリー分類をすることはSEOの評価に直結しますよ!




ですが、カテゴリーメニューを設置することにより、ユーザービリティは間違いなく向上します。


そもそも、ある記事をきっかけに訪れた読者がブログ全てのカテゴリーに興味があるかと考えるとその可能性は薄いでしょう。



大抵の人はあるキーワードをもとにたまたま見るというのが一般的です。



ここで、ほかのページに遷移する内部リンクが重要なのはわかると思いますが、それはカテゴリーレベルでも同様です。



もし、当ブログへの訪問者がブログについて関心があれば、そのうちの何割かは『ブログカテゴリー』をクリックするでしょう。



また、カテゴリー分類の方が各ページへのリンクよりも大雑把な分け方ですので、より多くの人の注意を惹くこととなります。


各ページへのリンクはターゲットを絞っていますが、カテゴリー分類はターゲットが広いです。





カテゴリー分類メニューを設置するのは簡単にできますので、読者のことも考えて設置していきましょう。


カテゴリーをクリックする人は意外と多いでしょう。
一つの記事が気に入れば「他の記事も参考になるのでは…」となるのは普通ですよね。



検索エンジンにサイト構造を伝え、クローラーが効率的に内部を巡回できるようになるため、SEOに好影響を及ぼすと考えられます。


AFFINGER6カテゴリー分類メニューを設置する全手順


ステップ1:カテゴリー分類メニューをヘッダーに表示


では、早速カテゴリー分類メニューを設置していきます。


まずは『外観→メニュー』と進んでください。





普段あまり触らない場所かもしれませんね。



するとこのような画面が表示されます。



ここでのメニュー名はとりあえず何でも良いので、画面をスクロールして下の方に移動しましょう。



すると、メニュー設定という項目がありますので、そこで『ヘッダーメニュー(横列)』にチェックを入れましょう。



チェックを入れたら『メニューを保存』をクリックします。


これでメニューを設置する準備が整いました。



次は、画面上部に戻ると画面左側に『メニュー項目を追加』というのがあります。


そこから『カテゴリー』を選択します。


設置するカテゴリーにチェックを入れたら『メニューに追加』をクリックして完了です。




次は画面右側の『メニュー構造』の部分です。


ここに先ほどチェックを入れた項目があります。


ボックスを少し右側にずらすことによって階層構造を作ることができますので、副項目も作ることができます。




画像の状態ですと『ブログ』の副項目として『AFFINGER6』があります。



最後に保存したら終了です。


フロントページを確認するとヘッダーメニューが表示されているはずです。





階層が下のものはマウスを当てると表示されます。


ステップ2:カテゴリー分類メニューをカスタマイズ


次はカテゴリーメニューをカスタマイズします。

WordPressの管理画面から『外観→カスタマイズ』と進んでいきましょう。



するとカスタマイズの画面が表示されますので『各メニュー設定→PCヘッダーメニュー』と進んでいきましょう。



PCヘッダーメニューにたどり着くとカスタマイズできますので、自分好みにカスタマイズしていきましょう。


例えば『メニューをセンター寄せにする』にチェックを入れるとヘッダーメニューが中央配置になります。



ほかにも背景やメニューの幅なども簡単に変更できます。





AFFINGER6サイドバーにカテゴリー分類メニューを作る全手順


カテゴリー分類メニューをサイドバーに設置



それでは次は先ほど作ったカテゴリー分類をサイドバーに表示させます。


手順は先ほどとほとんど変わりません。


ヘッダーの時と同様に『外観→メニュー』と移動しましょう。

メニュー設定の場所で『サイドメニュー』にチェックを入れましょう。


後は『メニューを保存』をクリックしましょう。


ここで、ヘッダーと異なる分類がしたい場合は『位置を管理』をクリックし『新規メニューを使用』をクリックして新たに分類を作りましょう。





場所ごとに異なる分類を作ることができます。



次はカテゴリーを設置する場所を決めます。


『外観→ウィジェット』と進みましょう。


ここで『STINGERサイドバーメニュー』というのを『サイドバーウィジェット』に入れましょう。





サイドバートップでも場所が優先的に上になるだけですので、どちらでも大丈夫です。


これでサイドバーにカテゴリー分類メニューが設置されました。


カテゴリー分類メニューをカスタマイズ



サイドバーもカスタマイズしていきましょう。




ヘッダーと同様に『外観→カスタマイズ』と進みましょう。



次に『各メニュー設定→サイドメニューウィジェット』と進みます。




すると、このような場所にたどり着きますので、ここでデザインを整えていきましょう。


背景や矢印のアイコンを変更することができます。




今回は以上になります。

まとめ


今回はカテゴリーメニューを設置する方法について紹介しました。



カテゴリーメニューを設置することで、読者にとってもブログ内の情報が一目でわかるようになりますので、ユーザービリティが向上します。



その分ブログ滞在時間の向上などSEO的な役割も果たしますので、メリットがたくさんあります。


ほんの~10分くらいでできる作業ですので、気になったらどんどんカスタマイズしていきましょう。


本ブログではほかにもAFFINGER6に関するカスタマイズ方法を掲載しているので参考にしてみてください。


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

ぶたっち

大学生時代にプログラミング学習を始め、Web業界に興味を持つ。
スクールでプログラミングを勉強したが、自分に合っていないと感じてプログラミングと距離を置く。
ブログをきっかけにSEOに興味を持つようになり、Webマーケティングの世界へ。
最近はITやWeb、SNSなどの情報を調べて楽しんでいます。
保有資格:SEO検定1級、Web解析士

-AFFINGER6