この記事には広告が含まれています。

AFFINGER7でガイドマップメニューを設置する方法|初心者向けに画像付きで解説

AFFINGER7でガイドマップメニューを設置する方法|初心者向けに画像付きで解説

「サイドバーをもっと見やすくしたい」

「カテゴリーや人気記事へ読者をスムーズに案内したい」

そんな方におすすめなのが、AFFINGER7のガイドマップメニューです。

ガイドマップメニューを設置すると、読者が目的の記事を探しやすくなり、サイト内の回遊率アップにもつながります。

この記事では、AFFINGER7でガイドマップメニューを設置する方法を、WordPress初心者にもわかりやすく画像付きで解説します。

この記事でわかること

  • ガイドマップメニューとは?
  • 設置するメリット
  • メニューの作成方法
  • サイドバーへの表示手順
  • 表示されない場合の対処法

この記事の手順どおりに進めれば、5〜10分ほどで設定できます。

ガイドマップメニューは下画像のようなガイド式のメニューです。

AFFINGER7:ガイドマップメニュー

ガイドマップメニューとは、読者を目的の記事やカテゴリーへ案内するためのナビゲーションメニューです。

サイドバーに表示することで、サイト内を移動しやすくなります。

例えば、ブログ収益化を目指している方向けなら以下のようなメニューを設置できます。

  • ブログの始め方
  • 初期設定
  • お勧めプラグイン
  • ブログの書き方
  • アフィリエイトの始め方

初心者でも迷わず目的の記事へアクセスできるため、ユーザー満足度の向上が期待できます。

ガイドマップメニューを利用には次のようなメリットがあります。

回遊率がアップする

読者が関連する記事へ移動しやすくなるため、1ページだけで離脱する割合を減らせます。

初心者でも目的の記事を探しやすい

記事数が増えるほど、目的の記事を見つけるのが難しくなります。

ガイドマップメニューを設置することで、必要な情報へスムーズに案内できます。

サイト全体が見やすくなる

カテゴリーを整理して表示できるため、サイドバーがわかりやすくなります。

AFFINGER7でガイドマップメニューを作成する方法

メニューを作成する

はWordpressメニューの「外観」→「メニュー」を選択します。

「新しいメニューを作成しましょう。」をクリックすると新しいメニューを作成することができます。

Wordpress:メニュー作成画面

メニュー名を入力する

Wordpress:メニュー作成手順

メニュー名は管理用なので自由に設定して大丈夫です。

「ガイドマップメニュー」の項目にチェック

Wordpress:メニュー作成手順

「メニューを作成」を選択します。

Wordpress:メニュー作成手順

メニュー項目を追加する

Wordpress:メニュー作成手順

① メニュー項目を追加します。

固定ページや投稿した記事、カスタムリンクやカテゴリーなどガイドマップメニューに表示させたい記事を選択できます。

表示させたい記事にチェックを入れて「メニューに追加」をクリックすると②の部分に表示されます。

最後に③の「メニューを保存」で保存すればOKです。

ガイドマップメニューの作成が完了したら次に表示させる場所を設定します。

管理画面から外観 → ウィジェットを開きます。

ここでは「サイドバートップ」に設置してみます。

下画像のように「ガイドマップメニュー」を「サイドバートップ」にドラッグして設置します。

AFFINGER7:ガイドマップメニューの設置方法

次にガイドマップメニューの表示設定を行います。

AFFINGER7:ガイドマップメニューの設定
タイトルタイトルを設定可能
背景色(第一階層)背景色を変更可能
角を丸くするメニュー項目を角丸にすることが可能
テキスト色テキスト色を変更可能
テキストリンクの下線を消すテキストリンクの下線を消すことが可能

タイトル

タイトルを設定することができます。

矢印部分がタイトルになります。

AFFINGER7:ガイドマップメニューのタイトル

背景色(第一階層)

ガイドマップメニューの背景色を設定可能です。

背景色を変更するとこんな感じです。

AFFINGER7:ガイドマップメニューの背景色変更

背景色はカスタマイザーからも変更することができます。

「外観」→「カスタマイズ」→「各メニュー設定」→「ガイドメニュー」をを選択します。

AFFINGER7:カスタマイザーのガイドメニュー

角を丸くする

ガイドメニューの項目(第一階層)を角丸の設定をすることができます。

角丸を設定していない表示はこんな感じです。

AFFINGER7:ガイドマップメニュー(角丸の設定)

設定が反映されないと思ったらカスタマイザーを確認してみてください。

「外観」→「カスタマイズ」→「各メニュー設定」→「ガイドメニュー」の「角を丸くする」にチェックが入っているとウィジェットのほうで「角丸にする」のチェックを外した状態でも角丸表示になってしまいます。

AFFINGER7:カスタマイザーのガイドメニュー

テキスト色

テキスト色を変更可能です。

テキスト色を変更するとこんな感じです。

AFFINGER7:ガイドマップメニュー(テキスト色の設定)

テキストリンクの下線を消す

テキストリンクの下線を消すことができます。

各項目の設定が完了したら保存すればOKです。

表示されない場合は、以下を確認してみましょう。

メニューが保存されているか

作成後に「メニューを保存」を押していないと表示されません。

ウィジェットに設定されているか

サイドバーへ追加されているか確認しましょう。

キャッシュが残っている

ブラウザやキャッシュ系プラグインを利用している場合は、キャッシュを削除してから確認してください。

表示位置が違う

サイドバーではなく、別のウィジェットエリアへ追加されている場合があります。

設定場所を確認しましょう。

AFFINGER7への移行でAFFINGER6のガイドマップメニューから変更はありますか?

いいえ。

ガイドマップメニューの機能に変更はありません。

スマホでも表示されますか?

はい。

レスポンシブ対応なので、スマートフォンでも表示されます。

メニューはいくつまで作れますか?

WordPressのメニュー機能を利用しているため、必要な数だけ作成できます。

AFFINGER7のガイドマップメニューを設置すると、読者が目的の記事へアクセスしやすくなり、サイト全体の回遊率向上が期待できます。

設定自体は難しくなく、WordPress初心者でも短時間で設置できます。

最後に手順をおさらいしましょう。

  1. メニューを作成する
  2. メニュー項目を追加する
  3. サイドバーへ設置する
  4. デザインを調整する
  5. 表示を確認する

ブログの使いやすさを高めるためにも、ぜひガイドマップメニューを活用してみてください。

AFFINGER7の詳細を見る

※ AFFINGER6は現在、AFFINGER7へと移行となりました。

合わせて読みたい関連記事

AFFINGER7で記事が読みやすくなる装飾・ブロック活用術

  • AFFINGER7の装飾ブロックを利用して記事を読みやすくするコツを初心者向けに解説した記事です。

AFFINGER7で記事を作成する方法-初心者向け-初めての記事公開手順

  • AFFINGER7で初めて記事を公開するまでに実際に行う手順を初心者向けに解説しています。

AFFINGER7完全ガイド|初心者でも収益化を目指せるWordPressテーマ

  • AFFINGER7に関する記事をまとめています。
  • 初期設定から使い方などAFFINGER7に関して幅広く役立つ記事を掲載しています。

AIブログの始め方|ChatGPTを使ったブログ運営完全ガイド

  • 今やブログ運営でAIの活用は当たり前です。
  • Chatgpt以外のGeminiや他のAIツールを利用する場合にも役立つ基本を解説。

ChatGPTでブログ記事を書く方法|初心者でもできるAIライティング完全ガイド

  • Chatgptを利用して記事を書く方法を初心者向けに具体的に解説した記事です。