ブログ

AFFINGER6「ガイドマップメニュー」の作り方|プロセス誘導のために

2023-08-15

当サイトではプロモーションを含みます

ガイドマップメニュー

AFFINGER6のメニューの機能の一つ「ガイドマップメニュー」をご存知でしょうか。

この記事では初心者さん向けとなっておりますが、下のような悩みをお持ちの方にも役立つ記事となっています。

読んでもらいたい記事があるけど、分かりやく表示できないかな?アクセス数も増やしたいし

ガイドマップメニューを設定すると、読者が悩まず目当ての記事に行けたり見てもらいたい記事に誘導したりすることができます。

ガイドマップメニューとは

「ガイドマップメニュー」とは、簡単にいうと工程プロセスや、読者の悩みを分かりやすく表示させる誘導ツールのことです。

例えばブログの作り方という記事がある場合、「レンタルサーバーの申し込み方法」→「タイトルとドメインを選ぶ」→「テーマを選ぶ」→「初期設定を行う」などが手順としてあげられるでしょう。

この手順をサイドバーに表示しておくと、記事からだけではなく読者が迷わず記事リンクに飛ぶことができます。

また悩み別のまとめ記事に誘導したい場合などは、「レンタルサーバーまとめ」「ブログテーマおすすめ5選」「口コミNo.は〇〇」などの表示に変えることもできます。

ガイドマップメニューの見た目

ガイドマップメニューの見た目は、下の図のように表示されます。

ガイドマップ

一番上の「設定順」は題名で、その下の番号順の文字からそれぞれ任意の記事にリンクで飛ぶことができます。

トップページとサイドメニューに置いた場合の見た目は、下のようになります。

ガイドマップメニューの見た目

シンプルで分かりやすい見た目になりますね。

ガイドマップメニューの特徴とメリット

ガイドマップメニューの特徴とメリットをご紹介します。

特徴とメリット

  • 好きな箇所に設置をすることができる
    ウィジェットで設置できるところ(サイド、トップなど)はどこでも設置できる
  • 全ての記事に設置をすることができる
    ウィジェットの「投稿記事の下」などに設置すれば、全ての投稿記事に表示される
  • 特定の記事に誘導することができる
    まとめ記事やトップ記事など、読んでほしい記事に誘導することができる
  • 読者が迷わないようにすることができる
    読者が次に何を読めばいいか、分かりやすく表示ができる

「メニュー」という設定を最大限活かすことができます。

固定ページとの違いとデメリット

トップページの場合、固定ページと何が違うのかという疑問がわきます。

これはデメリットにもなる特徴です。

特徴とデメリット

  • アイキャッチやタイトルで誘導することが難しい
    記事を貼ることができないので、埋め込みや画像の挿入などができない
  • 1や2と良くも悪くも初めに数字が割り振られる
    手順などに向いているので、数字がいらないと思っても割り振られてしまう
  • 文章を追加することができない
    細かく内容を説明したくても入力ができない

あくまでシンプルな見た目なので、汎用性が高いのは固定ページになります。

ガイドマップメニューの設定方法

ガイドマップメニューの設定方法を紹介します。

  • 外観メニューを開きます
  • ガイドマップメニューがあれば選択し、なければ「新しいメニューの作成」でガイドマップメニューを作ります
ガイドマップメニューの作り方

次にメニューの中身を作っていきます。

  • 「固定ページ」「投稿」「カスタムリンク」の中から任意の記事を選択します
    *「固定ページ」と「投稿」は公開しないと表示されません
  • 「カスタムリンク」の場合、アドレスをコピーして貼り付けます
    *記事がたくさんある時には探す手間が省けます
  • 「リンク文字列」のところで好きな表示名を書きます
    *後から表示名を変えることもできます
  • 「メニューに追加」を押すと右側のメニュー構造に追加されます
  • 好きな数のリンクメニューを作り、最後にメニューを保存を押して完成です

この時点で上から順に数字が割り振られます。

ガイドマップメニューの中身

次は出来上がったガイドマップメニューをウィジェットで設定します。

今回はサイドバーに設定する方法です。

  • 外観ウィジェットを選択します
  • 「17_AFFINGERガイドマップメニュー」というウィジェットをサイドバーウィジェットにドラッグします
    *サイドバートップでもスクロール広告用でもお好みの場所で大丈夫です
メニューをサイドバーに設定する

サイドバーについて知りたい方は、下の記事をご覧ください。

  • ドラッグしたガイドマップメニューにある、右側の▼ボタンを押すと設定画面が開きます
  • タイトルをつけて保存を押すと完成です
ガイドマップメニューの保存

見た目はこのようになります。

ガイドマップメニューのサイドバー表示

ガイドマップメニューのカスタマイズ方法

メニュー階層を分けるには

メニューでは階層を分けることができ、見た目は下の図のようになります。

メニューの階層分け

カテゴリーなどでよく使われますが、第一階層、第二階層と深くしていくことができます。

カテゴリーについて知りたい方は、下の記事をご覧ください。

設定は簡単で、「メニュー構造」の中身で階層を低くしたいものを少し右にドラッグしてあげます。

メニューをドラッグする

色や形を変えるには

ガイドマップメニューは見た目の色や形を変えることができます。

見た目が分かりやすい方がいいので、カスタマイズ画面から設定することをおすすめします。

外観カスタマイズを開きウィジェットをクリックします。

カスタマイズのウィジェット

今回はサイドバーウィジェットに配置したので、サイドバーウィジェットをクリックします。

サイドバートップやスクロール広告用に配置した場合は、そこをクリックしてください。

サイドバーウィジェット

その中に、設置した「17_AFFINGERガイドマップメニュー」があるので中身を変更していきます。

ガイドマップメニューの設定変更

ここで変更できることは、タイトル背景色(第一階層)角を丸くする(第一階層)テキスト色(第一階層)テキスト色(第二階層以下)テキストリンクの下線を消すです。

試しに見た目を変更してみました。

  • 背景色(第一階層)→青
  • 角を丸くする→チェックをつける
  • テキスト色(第一階層)→白
  • テキストリンクの下線を消す→チェックをつける

するとこのような下のような見た目になります。

見た目の変更

見比べてみると下の図のようになります。

見た目の変更前と変更後

お好みで設定できるので色々と試してみてください。

最後に公開を押して完成です。

補足

見た目を変える設定として、背景色のタグカラーを変えることもできます。

この場合は外観カスタマイズ各メニュー設定ガイドメニューをクリックしていくと色を変えることができますよ。

まとめ

ガイドマップメニューは、特に1つの商標で手順が決まっているブログなどにおすすめです。

サイドメニューに置いておくことで、読者が迷わずに済むというのが大きなメリットかなと思います。

お好みでいろいろと試してくださいね。

当サイトで使用!

affinger

AFFINGER6

WordPressテーマACTION(AFFINGER6)の公式サイトAFFINGER6

AFFINGER6 EX対応

上級者や本気で稼ぎたい人むけのテーマAFFINGER6 EX対応 ACTION PACK3

2024年にブログを始めたい、集客化したい人は必見です!

よく読まれている記事

スマホで検索をする 1

メルカリの新機能に希望価格を登録するというものがあります。 私は買うより出品する方ですが、ある日出品したものを見ていたら ¥0,000で買いたい人が1名います   値下げする > という表示が出ていま ...

コーヒーを車で飲む女性 2

自動車保険は、ここ数年イーデザイン損保を契約しています。 毎年12月くらいになると更新の案内が来るのですが、2022年11月頃から新商品「&e(アンディー)」(以下「&e」)のご紹介、 ...

Googleアドセンスに雑記ブログで合格できました 3

2023年9月27日、Googleアドセンス審査に合格しました。 「ポリシー違反が見つかりました」 「有用性の低いコンテンツ」 不合格のときは毎回同じ文の結果しか表示されず、何をしたらいいのか...と ...

温泉に来た浴衣の女性 4

日帰り温泉へ急に行こうとなったとき、レンタル品が用意されている施設も多いですが、できればあらかじめ持ち物を用意をしていきたいものです。 この記事では、女性・男性にも共通で持っていった方がいい持ち物や、 ...

車をスマホで調べる 5

この記事では、イーデザイン損保の新自動車保険「&e(アンディー)」を使用するためのセンサー取り付け方法をご紹介します。 必要なもの 車 スマートフォン(Bluetoothが使えること) 取り付 ...

-ブログ