ブログカスタマイズ ワードプレス

アフィンガー|スマホに固定フッターメニューを追加する|色々なメニュー項目紹介

アフィンガー・スマホに固定フッターメニューを置く

「スマホフッターメニュー」とは、スマートフォンでサイトを閲覧した際にメニューです。

この記事では、WordPressのテーマ「アフィンガー」で、固定するスマホフッターメニューを設置方法をご紹介します。

以下動画のようなことができるようになります。

スマホフッターメニューをスマホに表示させる

確認しながら作業をするために、先にフッターメニューをスマホに反映させる設定をします。

ダッシュボード>AFFINGER管理メニューその他のスマホメニュー

一番下にある「スマホフッターメニューを表示する」にチェックを入れます。

「SAVE」を忘れずにクリック。

アフィンガー・スマホに固定フッターメニューを置く

これでフッターメニューがスマホに表示されるようになります。

スマホフッターメニューを作る

ダッシュボード>外観>メニューを開きます。

テキストリンク「新しいメニューを作成しましょう」をクリック。

「メニュー名」→「スマホフッターメニュー」と入力(自分でわかるような名前でしたらなんでも大丈夫です。)

メニュー設定の一番下「スマホフッターメニュー」にチェックを入れて「メニューを作成」をクリックして保存します。

アフィンガー・スマホに固定フッターメニューを置く

以上で、スマホフッターメニュー作成完了です。

スマホフッターメニューの項目を作る

続いて、メニュー項目を作っていきます。

ご自身のサイトにあった任意の項目を置きましょう。

ダッシュボード>外観>メニュー

「編集するメニューを選択」から「スマホフッターメニュー」を選択し、「選択」をクリック。

アフィンガー・スマホに固定フッターメニューを置く

メニュー項目を作成は画面左の「メニュー項目を追加」の「カスタムリンク」で行っていきます。

項目概要
URL表示させたいページのURL
リンク文字列 表示させたい文字やアイコン。HTMLコードの挿入ができる。
アフィンガー・スマホに固定フッターメニューを置く

リンク文字列について

スマホフッターメニューの項目を作るにあたり、リンク文字列に入力するコードは以下のものが基本となります。

<i class="アイコンコード"></i><br>表示させたい文字</a></li>

以下、様々なメニュー項目をご紹介しますが、表示されたい文字はお好みのものに変更してご使用ください。

表示したいアイコンについて

スマホフッターメニューにはWebアイコン「fontawesome」が使用できます。アイコン数が豊富で、可愛いものが多いのでおすすめです。

<i class="アイコンコード"></i><br>表示させたい文字</a></li>


使用したいアイコンのHTMLコードをコピーして、<i class="アイコンコード"></i>と置き換えましょう。

アフィンガー・スマホに固定フッターメニューを置く

以下、様々なメニュー項目をご紹介しますが、アイコンはお好みのものに変更してご使用ください。

fontawesomeでアイコンを検索するときは、英語で行ってください。

アフィンガー・スマホに固定フッターメニューを置く

保存を忘れずに

アフィンガー・スマホに固定フッターメニューを置く

以下に紹介します内容で必要な編集を終えましたら、必ず右下にある「メニューを保存」をクリックしてください。

この操作をしなければ、スマートフォン固定フッターメニューにメニュー項目が反映されませんので、ご注意ください。

「ホーム」にジャンプ

サイトのホームに飛べる項目です。

「URL」→ ご自身のサイトのURLを入力

「リンク文字列」→<i class="fa fa-chevron-circle-up"></i><br>HOME</a></li>

「カテゴリー」にジャンプ

アフィンガー・スマホに固定フッターメニューを置く

設定したカテゴリーへ飛べる項目です。設定したカテゴリーのURLを用います。

「URL」→ ご自身のサイトのカテゴリーURLを入力

「リンク文字列」→<i class="fas fa-smile-plus"></i><br>ブログ</a></li>

「ページトップ」にジャンプ

現在ページの一番上トップに飛ぶ項目です。

アフィンガーには「TOPに戻るボタン」が表示されますが、スマホフッターメニューを有効化すると「TOPに戻るボタン」が自動で非表示になります。「トップに戻る」はあると便利なので、フッターメニューに追加しましょう。

「URL」→#wrapperと入力

「リンク文字列」→<i class="fa fa-chevron-circle-up"></i><br>TOP</a></li>と入力

#wrapperってなんだ?と疑問に思った方は、こちらご参照ください。

「目次」にジャンプ

記事の目次に飛ぶ項目になります。目次を設定ているページでのみ有効な項目です。

それでも、追従する目次に戻るボタンは便利ですので、ユーザビリティ向上に繋がります。

以下の「URL」は、目次プラグイン「Table of Contents Plus」を使っている場合のコードになります。

「URL」→#toc_containerと入力

「リンク文字列」→<i class="fa-solid fa-book"></i><br>目次</a></li>と入力

それ以外の目次プラグインをご使用の場合は、テベロッパーツールで目次の要素をお調べください。

詳細はこちらの記事をご参照ください

「サイドバー」にジャンプ

アフィンガー・スマホに固定フッターメニューを置く

サイドバーに飛ぶ項目です。

スマホではサイドバーはコンテンツ下に表示されます。こちらへ飛べるようにします。

スマホのサイドバー表示場所

「URL」→ #myboxを入力と入力

「リンク文字列」→<i class="fas fa-bars"></i><br>サイドバー</a></li>と入力

「サイドバーの特定の場所」にジャンプ

アフィンガー・スマホに固定フッターメニューを置く

サイドバーに設定できるのはプロフィールやカテゴリーなど様々あります。

そのうち、特定の項目に飛べるようにすることができます。

管理人の場合、「検索」に飛べるようにして、その下にカテゴリーやタグを置き、読者に記事をクリックしてもらいやすくなるように工夫しました。

任意のサイドバーへ飛べるようにするには、その項目のid属性を調べる必要があります。

id属性は、同一ページ内にリンク先を作成できます。

自身のサイトでGoogle Chromeでテベロッパーツールを開きます。

テベロッパーツールの開き方

  • Google Chromeの右上の3点リーダーアイコン(⋮)から、[その他のツール] > [デベロッパーツール]をクリック
  • 起動方法のショートカットキーWindows版 Ctrl + Shift + i もしくは Ctrl + f12
  • 起動方法のショートカットキーmacOS command + option + i

要素の選択に使用するのが「セレクトモード」に切り替えます。

デベロッパーツールの左上にあるセレクトアイコンをクリックします。アイコンが青色になっている状態がセレクトモード起動状態です。

アフィンガー・スマホに固定フッターメニューを置く

セレクトモードの状態で、ページ上でサイドバーへマウスカーソルを動かしてみましょう。カーソルが合わさった要素に色が付き、デベロッパーツール側のHTMLソースもハイライト表示されます。

アフィンガー・スマホに固定フッターメニューを置く

そこの<div id="●●●">が必要となります。

●●●の箇所をアンカー名といいます。

ページ内リンクは、HTMLのaタグで<a href=”#mybox”>のように、href属性の値に#(シャープ)を記述してid属性を指定します。

<要素 id="アンカー名">このアンカーにページ内リンクしたいときは<a href="#アンカー名">となります。

フッターメニュー項目の場合、「カスタムリンク」の「URL」に記入するのでa要素・href属性は省略し、#アンカー名のみの記載で大丈夫です。

デベロッパーツールの<div id="mybox">に、設置したサイドバー項目のid属性がまとめて表示されていますので、ここを見ても分かりやすいです。

アフィンガー・スマホに固定フッターメニューを置く

こちらから、飛びたいサイドバー項目のid属性を抽出してください。

例えば、「カテゴリー」の場合は、#sidemenu_widget-2を「URL」に記入します。

「SNSアカウント(外部サイト)」にジャンプ

自身のSNSアカウントに飛ぶ項目です。

ツイッター・インスタグラム・フェイスブック・ユーチューブ・ご自身の別サイト・広告サイト…何でもありです。

SNSで記事の紹介をしていたり、フォロワーを増やしたい方は設置しましょう。

「URL」→ 自身のSNS(外部サイト)のURLを入力

「リンク文字列」→<i class="fab fa-twitter"></i><br>Twitter</a></li>と入力

SNSのURL

  • ツイッター→https://twitter.com/アカウントのユーザー名/
  • インスタグラム→https://www.instagram.com/アカウントのユーザー名/
  • フェイスブック→表示される自分のアイコンをクリックすると、自分の個人アカウントページが表示されるのでそこのURLをコピー
  • ユーチューブ→YouTube Studio にログイン→カスタマイズ>基本情報>チャンネル URLで、チャンネル URL をコピー

スマホフッターメニューの変更・削除方法

アイコンや表示文字の変更、またメニュー項目の削除は設定した各メニュー項目の画面にて行います。

変更・削除したい項目の「▼」をクリックすると、詳細が表示されますので、こちらより該当する操作を行ってください。

アフィンガー・スマホに固定フッターメニューを置く

また、メニュー項目の並び替えはドロップ&ドラッグで可能です。

設置するメニューはいくつまでの設置適当?

フッターメニューの項目はいくつ置くのが妥当か。

これについて様々な情報を探した結果「4つまで」という意見が多数でした。

その理由として、以下のようなものがあげられます。

  • アイコンや文字が小さくなりメニューが見えづらくなる
  • メニューが多いと選択肢が広なりクリック率が下がる
  • 見た目がごちゃつく

しかしながら、複数のサイトを見ていくと5個以上置いているサイトも多く見受けられました。

管理人は現段階で5つ設置しています。

アフィンガーでのスマホフッターメニュー設置や削除は簡単にできます。

試行錯誤しながら、納得いくサイト作りをされてください。

まとめ

自分が設定したい方法がなかなか分からず、試行錯誤しました。

アフィンガー仲間のご参考になりましたら幸いです。

アフィンガー|「目次に戻る」をスマホの固定フッターメニューの中に入れる

2022/9/2

アフィンガー|「目次に戻る」をスマホの固定フッターメニューの中に入れる

今やスマホでサイトを閲覧することが多いです。 「興味あるところだけ読みたい」「さっき読んだところをもう一度確認したい」というニーズが発生することは、往々にしてあります。そのときにあると便利なのが「目次に戻るボタン」なのです。 今回は、フッターの中に「目次に戻る」項目を作っていきたいと思います。 フッターメニューに入れることで、追従してくれますのでとても便利です。 この記事を読めば、以下の動画のようなことができるようになります。 まだ、スマホに固定するフッターメニューを設置していない方は、こちらご参照くださ ...

ReadMore

UpdraftPlusで自動バックアップから復元方法を解説|保存先はGoogle ドライブ

2022/8/28

UpdraftPlusで自動バックアップから復元方法を解説|保存先はGoogleドライブ

UpdraftPlusは、WordPressのデータをバックアップ・復元できるプラグインです。 WordPressで構築したウェブサイトのデータベース、プラグイン、テーマ、アップロードファイル、wp-content ディレクトリと、WordPressを丸ごとバックアップして、復元までプラグインで行えます。 WordPressのデータをバックアップとして有名なプラグイン「BackWPup」がありますが、BackWPupの復元はFTPでファイルアップロードして、phpMyAdminでデータベースを復元する手順 ...

ReadMore

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

2022/8/23

アフィンガーでヘッダーカードを作る|設定と表示の方法を徹底解説

AFFINGERで"ヘッダーカード"を設定する方法をご紹介します。 ヘッダーカードを入れることで、以下のようにサイトが変化します。 ヘッダーカードを設置することで、「サイトがおしゃれに華やかになる」「サイト訪問者に読んでもらいやすくなる」というメリットがあります。 作成方法【簡易版】 どのようなヘッダーカードを作るか、構想を練る ヘッダーカードの背景画像を作る(canvaなど) ヘッダーカードの挿入と設定(デザインや文字入など) ヘッダーカードの背景を変更する(必要な場合のみ) Contentsどのような ...

ReadMore

2022/8/24

ブログの作り方|当ブログのサイトマップ

ブログを始めるにあたり、おすすめのサーバーやテーマ、またブログをはじめたら押さえておくべき設定などの記事をまとめました。 Contentsおすすめサーバー「スターサーバー」スターサーバーのメリット・デメリットスターサーバーの契約方法・設定方法独自ドメインからメールアドレスを作成するブログのバックアップ問い合わせフォームを作成するスパム対策アフィンガー関連設定ヘッダーとヘッダーメニューをおしゃれにするスマホでも追従する目次を設定するスマホに固定フッターメニューを追加する記事の文字をカラフルにするアフィンガー ...

ReadMore

Contact Form 7の問い合わせフォーム作成方法と使い方を紹介

2022/8/28

Contact Form 7の問い合わせフォーム作成方法と使い方を紹介

ブログをはじめたら必ず導入するべき、問い合わせフォームのプラグイン「Contact Form 7」。作成者は日本人ですので、公式サイトは日本語で解説されています。 Contact Form 7公式サイト Contact Form 7の導入方法と、問い合わせフォームを作成する方法を紹介します。 下記のようにお問い合わせフォームを作り、サイトのフッターメニュー(ブログの最下部エリア)に設置していきます。 ContentsContact Form 7の使い方【簡易】step1.Contact Form 7をイン ...

ReadMore

簡単におしゃれなサイトが作れるAFFINGER6はこちら

このサイトはアフィンガーを使用しています

アフィンガー

WING(AFFINGER6 ver)

デザイン簡単、SEO対策と広告収入UPの機能が標準装備。さらに美しく、パワフルに。「稼ぐ」に特化したテーマ。

WING(アフィンガー6)公式サイト

2022年最新!おすすめレンタルサーバー

月額料金がライトプランで220円〜(税込)なので、コスパよく爆速なサイト運営が可能に!

管理画面は使いやすくなっているので、これからはじめてサイト運営をする方にもおすすめです!

Twitterでも口コミ良好!

スターサーバー公式サイト

-ブログカスタマイズ, ワードプレス
-, ,