スポンサーリンク

ブログ

【AFFINGER5】スマホフッターに固定メニューを設置するには?初心者ブロガーが3時間以上かけて設置完了

どうしよう〜‼︎スマホフッターの設置が全然できない。もう3時間もやってるのに…(泣)

 

ひまり
慣れないうちはみんな同じ壁にぶつかります。大丈夫!一緒にやっていきましょう

 

私も「スマホフッターに固定メニューを設置する方法」がわからず何時間もかかりました。

 

しかし、最終的に設定が完了し、自分が想像していたとおりに表示されたときは、ガッツポーズをするくらい嬉しかったですね。

 

この記事を読んでいただけると【AFFINGER5(アフィンガー)】のテーマを使った、「スマホフッターに固定メニューを設置する方法」がわかります。

 

また、これがあることによりユーザーは必要な情報にアクセスできますし、

 

Twitterのフォローボタンでユーザーを増やしたり、サイトマップがあると回遊率が上がりSEO対策になりますよ!

SEO対策に!検索順位チェックツール

>>>検索順位を調べるなら、検索順位チェックツールGRC

 

こんな方におすすめ

  • 【AFFINGER5】「スマホフッターの固定メニュー」の設置方法がわからない
  • 離脱率を下げたり、回遊率がを上げSEO対策をしたい

 

「スマホフッターに固定メニュー」??

スマホフッターとは、ピンクの部分のことです

 

このメニューがあれば、サイトに来たユーザーへ目的別に誘導ができ、離脱率を下げることにも繋がります。

 

わからなかったこと

しかし、肝心の設置の仕方がわからなくて、本当に困りました。

 

実は私、「スマホフッター」という名前すら知らなかったのです。だから、調べようにもキーワードがわかりません。

 

何時間も試行錯誤しているときに、「外観」→「カスタマイズ」から「ライブプレビュー」を見ながら設定の変化がわかることに気付き「スマホフッター」という名前を知り、次に進むことができたのです。

 

検索して調べた内容

次にしたことは「スマホフッター」に複数のキーワードをつけ加えて検索する」でした。

 

step
1
「スマホフッター メニュー」のキーワードでググった。

「HTMLコード&CSSコード」の2つを使いフッターメニューを設置する方法が出てきた

 

step
2
「スマホフッター メニュー 設定」のキーワードでググった

「JIN」というテーマのフッターメニューを設置する方法が出てきた

 

step
3
「AFFINGER5 スマホフッター 固定メニュー 設置」でググった

やっと、知りたかった答えが見つかった。

 

試したこととその結果

以下は、私が試したことの結果です。

step
1
スマホフッター メニュー」のキーワードでググった

「HTMLコード&CSSコード」の2つを使いフッターメニューを設置する方法が出てきた。

ので、なんとかやってみる→表示はできたものの、スクロールすると記事と重なって読みづらくなったのでやめる

step
2
「スマホフッター メニュー 設定」のキーワードでググった

「JIN」というテーマのフッターメニューを設置する方法が出てきた。

 

ので、テーマが違うことに気付き「JIN」を「AFFINGER」に変え、もう一度検索

「AFFINGER5 スマホフッター 固定メニュー 設置」でググったら、やっと探していた答えにたどり着きました。

 

【AFFINGER5】スマホフッターの固定メニューの設置の仕方

今回は「AFFINGER5」のテーマを使っていることが前提で解説します。

 

スマホフッター【固定メニュー】を設置する流れは、以下になります。

step
1
スマホフッターメニューを作成する

  1. 外観→「メニュー」をクリック「新しいメニューを作成しましょう」をクリック
  2. メニュー名に「スマホフッター固定メニュー」と入力。※自分がわかりやすい名前を入れます
  3. 「スマートフォンフッター用メニュー」にチェックを入れる

step
2
スマホフッターに表示させたいメニューを入れる

私は、「ホーム」「サイトマップ」「Twitter」「お問い合わせ」の4つを設置しているので、こちらを例に解説していきます。

 

設置するメニューは多くても、4つにしておきましょう。それ以上になると見づらくなるからです!

準備しておくもの

AFFINGER5に対応している外部サイトのアイコンを使用します。

・スマホフッターに設置したいメニューに合ったアイコンのコードの取得→fontawesome v4.7

・スマホフッターに設置したいメニューのURLの取得

ひまり
アイコンのコードもURLも、メモなどに貼り付けておくとこの後の作業が楽になりますよ

 

step
1
「ホーム」→メニューに追加→URLには自動で自分のサイトのURLが入力されます。

ナビゲーションラベルにアイコンのコード<i class="fa fa-home" aria-hidden="true"></i><br/>Home」と入力します。

 

step
2
「サイトマップ」「お問い合わせ」→カスタムリンクを選択しURLとアイコンコードを入力→メニューに追加

この2つのメニューは、同じ作業ですのでそれぞれ作成してください。

 

step
3
「Twitter」→カスタムリンクを選択しURLとアイコンコードを入力→メニューに追加

【URL】自分のTwitterのURLを入力※1

※1 本来の入力するURL→【 https://twitter.com/intent/follow?screen_name=WPThmeNavi(あなたのアカウント) 】

なのですが、なぜかエラーになってしまい反映されないため、私は自分のTwitterのURLだけ入力しています。

できる方は、こちらのURLをお試しください

【アイコンコード】<i class="fa fa-twitter" aria-hidden="true.</i><br/>Follow(表示したい名前)

 

step
4
AFFINGER5管理メニューで、スマホフッターを表示するための設定2つ

 

  1. AFFINGER5管理メニューをクリック→
    「メニュー」をクリック→
    「スマホ用フッターメニューを表示する」にチェックを入れ保存
  2. AFFINGER5管理メニューをクリック→
    「その他」をクリック→
    「ページ内スムーススクロールを使用する」にチェックを入れて、保存する

まとめ

以上、AFFINGER5でスマホフッターに固定メニューを設置できた方法をご紹介しました。

 

慣れないうちはわからないことだらけです。ひとつ設定するに何時間もかかるのは仕方ありません。

 

せっかく有料のテーマを導入したのですから、しっかり活用して読む人にわかりやすいと思ってもらえるブログにしたいですね!

 

ココがポイント

  1. スマホ用のフッターに固定メニューを設置できる
  2. 設置方法は、「プラグインの導入」「HTML設定&CSSの追加」「テーマに標準装備」の3つがあるが、有料のテーマを使用しているなら標準装備されているはずなので、探そう
  3. フッターに表示するメニューは、最大4つが好ましい
  4. PVアップを狙うなら「おすすめ記事or人気記事」を。フォロワーを増やしたいなら「SNSアカウント」ページを設置するといい
  5. 何かわからなくて調べるときは、適切なキーワードを入れると早く答えにたどりつける







スポンサーリンク

  • この記事を書いた人

ひまり

初心者ブロガーです♡ 「おかね」「くらし」「子育て」「ブログ」をテーマにブログ運営しています。 そして、20歳の息子と一緒に資産運用中です!

-ブログ

© 2021 himari blog Powered by AFFINGER5