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

 

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

 

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

 

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

 

本記事の内容

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

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

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

 

 

\ 当ブログ使用テーマ /

  • 誰でもかんたんにオシャレデザイン
  • インフォトップ月間総合ランキング第1位
  • SEO対策と広告収入UP機能を標準装備!

初心者から有名ブロガーまで愛用されているSEO最強WordPressテーマ。下記のボタンから購入で、今なら5,000円相当のプラグインが無料でついてきます。

AFFINGER6の購入はこちら

 

\ AFFINGERのカスタマイズまとめ /

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

 

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

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

 

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

 

 

 

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

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

 

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

 

 

 

step
3
メニューの追加

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

 

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

 

 

step
4
スマホに表示させる

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

 

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

 

 

 

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

 

 

step
4
スマホで確認

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

 

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

 

 

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

 

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

 

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

 

 

プレビューしたらこんな感じに!

 

 

ポイント

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

 

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

 

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

 

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

 

 

 

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

 

 

 

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

 

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

 

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

 

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

 

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

 

AFFINGERのカスタマイズに関するまとめ記事はこちら

【徹底的に解説】AFFINGER6の設定・デザインをカスタマイズ方法まとめ

続きを見る

 

  • この記事を書いた人

ANZU

ブログで毎日コツコツ積み上げ|ITスキルとライフハックをアウトプット|プログラミングも独学中|より良い学びと習慣のノウハウを発信| 詳細はブログに掲載していきます。

-AFFINGER
-,