THE JOURNAL

AFFINGER6にスマホ固定フッターメニュー導入(メニューバー、検索)【超簡略】

公開日 更新日
スマートフォン用フッターメニューのMENUボタンを示した画面
目次

すっごい簡単な流れ！

  1. スマホスライドメニューの準備
  2. 新規でスマホフッターメニュー作成
  3. AFFINGER管理からその他のスマホメニュー設定

スマホスライドメニューの準備

まずスマホのスライドメニュー用意のメニューの準備！

WordPressのメニュー編集画面で項目を追加する箇所
WordPressのメニュー編集画面で表示位置を選ぶ箇所

新規でスマホフッターメニュー作成

WordPressのメニュー編集画面で既存メニューを選択する箇所
WordPressのメニュー設定でスマートフォン用の表示位置を選ぶ箇所

まずは、固定スマホフッターメニューの設置。

WordPressのカスタムリンク設定でリンク先とメニュー項目を入力する箇所

固定スマホフッターメニュー設置ポイント！

ナビゲーションメニューにコチラを書き込む！

<i class="fa fa-bars" aria-hidden="true"></i><br>MENU

CSS class (オプション)にコチラを書き込む！

op op-menu has-text

AFFINGER管理からその他のスマホメニュー設

AFFINGER管理 ▶︎ その他のスマホメニューから、

『スマホフッターメニューを表示する（※「広告・スマホフッターに固定」使用時は表示されません。スマホ閲覧時の「ページTOPへのボタン」は自動で非表示になります）』コチラをチェック！

テーマのスマートフォンメニュー設定でスライドメニューを選ぶ箇所

すると…

HOME・MENU・検索・TOPを並べたスマートフォン用フッターメニュー

こんな感じ！！

アフィンガー６
監修者 編集者

四方田修治 Web制作・WordPress構築 / 生成AI活用・SNS自動化 / SEO・LLMO・広告運用

Webデザイン・WordPressの構築／カスタマイズを中心に、HTML・CSS・PHPを用いたWebサイト制作に対応しています。表示速度の改善、SEO・LLMO、広告運用に加え、生成AIの活用やSNS運用の自動化についてもご相談いただけます。

YomoWebb.Designでは、制作実績、WordPressの使い方、生成AIの活用方法やツール選びなどを紹介しています。Web制作・サイト運用に役立てられるよう、専門的な内容を分かりやすくお伝えします。

FROM READING TO ACTION

読んだ知識を、サイトの改善へ。

ホームページ制作、SEO・AI検索対策、ローカルSEO、表示速度の改善。自分のサイトにどう取り入れるか迷ったら、現在の状況やお困りごとをお聞かせください。

サイトの改善を相談する 制作実績を見る

ご相談内容は、わかる範囲で大丈夫です。サイトのURLがあれば、あわせてお知らせください。

アフィンガー６/EX
AFFINGER-6/EX
よかったらシェアしてね！
  • URLをコピーしました！

関連記事