AFFINGER トップページカスタマイズ

【AFFINGER6】スマホ・タブレット用ミドルメニューの設定方法【スマホユーザーに向けて】

2022年6月29日

当サイトのコンテンツには、広告を記載している場合があります。＜景品表示法に基づく記載＞

 

今はWordPressテーマ「AFFINGER6」を使用してスマホ・タブレット用のミドルメニューの設定方法の解説をしていきます。

 

ブログやホームページを運用している方は、パソコンを使用しているかと思いますが、Webページを読者により届けるにはスマホユーザーを意識したものを作成することは必要不可欠だと思います。

 

そこで今回はスマホ・タブレット用のミドルメニューを作成して、よりクリック率や滞在率の向上を狙えるようにしていきましょう。

 

本記事の内容

スマホ・タブレット用のミドルメニューについて

スマホ・タブレット用のミドルメニューの作成方法

スマホ・タブレット用のミドルメニューのカスタマイズ方法

 

この記事を書いた人

 

＼ 当ブログ使用テーマ ／

  • 誰でも簡単オシャレなデザイン！
  • インフォトップ月間総合第１位！
  • SEO対策と収益UPを標準で搭載！

有名ブロガーに愛用されているSEO最強WordPressテーマ。本ブログも使用中のカスタマイズ性が抜群のテーマです！

AFFINGER6の購入はこちら

 

スマホ・タブレット用のミドルメニューについて

 

まずはスマホ・タブレット用のミドルメニューについての解説です。

 

これはスマホやタブレット端末の閲覧時限定で表示されるメニューになります。

 

スマホユーザーが多くなっているため、工夫次第ではかなり効果的にPV数なども増やすことにつながります。

 

実際のスマホ用ミドルメニューはこちら

 

スマホで閲覧しているときによく見かけるメニューですね！

 

スマホ・タブレット用のミドルメニューの作成方法

 

 

 

step
1ミドルメニューを作成する

初めにミドルメニューの作成をしておきます。

 

「外観」→「メニュー」→「新しいメニューを作成しましょう」を選択して、メニュー作成画面に移動しましょう。

 

 

 

step
2スマホミドルメニューの作成

スマホミドルメニューにチェックを入れて、メニュー名の入力をしましょう。

 

ここでは分かりやすく「スマホ用ミドルメニュー」としましたが、わかればOKです！

 

 

 

step
3メニューの追加

スマホ用のミドルメニューのお好みのコンテンツを追加しましょう。

 

コンテンツの追加が完了できたら「メニューを保存」を選択しましょう。

 

 

step
4スマホに表示させる

最後はスマホ表示設定です。

 

「外観」→「メニュー」を選択して、「その他のスマホメニュー」の項目まで移動しましょう。

 

 

 

「スマホミドルメニューを表示する」にチェックを入れて、「Save」にて設定を保存したら完了です。

 

 

step
4スマホで確認

スマホに設定が正しく反映されているか確認してみましょう。

 

正しく反映されていると以下のような感じになります。

 

 

簡単に設定できましたね！

 

ミドルメニューを３列にする方法も紹介

 

同様の設定画面にて、「スマホミドルメニューを３列にする」を入れることで、メニュー数を２→３列に増やすことができます。

 

 

せなお
プレビューしたらこんな感じに！

 

 

ポイント

あなたが表示したいメニュー数に応じて列数やメニューの表示形式をカスタマイズしてみましょう。

 

スマホ・タブレット用のミドルメニューのカスタマイズ方法

 

スマホ用ミドルメニューが追加できたら、次に配色のカスタマイズを行いましょう。

 

「外観」→「カスタマイズ」→「各メニュー設定」→「スマホミドル/横列メニュー」の順に選択して、設定画面に移動しましょう。

 

 

 

「周りに余白」にチェックを入れたら以下のような感じになりますよ！

 

 

 

まとめ：スマホユーザーに向けてミドルメニューを設置しよう

 

以上、AFFINGER6ユーザー用スマホ・タブレット用ミドルメニューの設定方法でした。

 

ブログ運営にとってスマホユーザーを獲得することはかなり重要なことです。

 

ぜひ、どの端末からみても読者ユーザーにとって分かりやすいUIになっているようにしておきましょう。

 

その他にもAFFINGERのカスタマイズ方法をまとめた記事もありますので、参考にしてみて下さい。

参考トップページのカスタマイズに関する記事かこちら

 

参考アップデートやインストール・プラグインに関する記事はこちら

 

参考投稿記事のカスタマイズも関する記事はこちら

 

参考Gogleアドセンス×AFFINGERのカスタマイズについての記事はこちら

 

 

  • この記事を書いた人

せなお

ブログ月間1.6万PV｜YouTubeチャンネル登録者数1000達成！｜最新のITスキルとAIに関する情報発信｜ガジェットレビュー｜Webデザイン｜ 動画編集スキル｜X, Instagramでも情報発信｜本業の3倍稼ぐことのが目標

-AFFINGER, トップページカスタマイズ
-