ブログ

ワードプレス初心者必見!スマホのフッターメニュー設定方法は簡単です!

2020-02-20

スマホ用フッターメニュー

 

スマホ用のスライドメニューも設定できたしブログの設備は完璧だね!

 

いえ、ワードプレスはとても奥が深くこだわれば色々なことができます。

 

先日僕はスライドメニューを設定して満足していましたが、設定している最中に違うメニューが気になりました。

 

フッター…メニュー…?

 

ネットの世界にはたくさんのブログがあり、自分のブログでは世間に埋もれてしまうのではないか…

 

そう悩んだことありませんか?

 

1番大事なのはもちろんコンテンツ、記事の内容ですがそれだけを意識していて読みづらいサイトだと読んでくれる人は少ないです。

 

さらに同じようなデザインだとそれも飽きの対象となってしまうかも…

 

そこで、初心者にも簡単にできる差別化がスマホのフッターメニューになります。

 

わやってもともとこんな人

  • PCはyoutubeを観るためのもの
  • スマホはゲームと電話をするもの

 

こんな僕でも設定することができました!

 

この記事を読めば誰でもスマホ用のフッターメニューを設定できます。

 

ネット初心者の僕が、設定中どこにつまづいたのかも混ぜながら設定方法を解説していきます。

 

もちろん画像付きでの解説ですので、まだ設定していない人は一緒に設定しましょう!

 

ブログ
ワードプレスでブログを見やすく!ヘッダーにカテゴリーを表示する方法

続きを見る

 

ワードプレススライドメニュー
【WordPress初心者必見】スマホのスライドメニュー設定方法

続きを見る

 

スライドメニューやヘッダーの設定がまだの人はこちらも合わせて参考にしてください!

 

【ワードプレス初心者向け】スマホのフッターメニュー設定とは?

フッターメニュー

 

スマホのフッターメニューとはブログを読み進めていく時に画面下から出てくるメニューです。

 

このフッターメニューがあるといつでも読者がトップページに戻ったり、あなたのことをフォローしやすくなったりします。

 

さらに最新の記事やランキングを設定すれば読んでもらいたい記事を読まれやすくできます。

 

ワードプレスならどのテーマでもできるのか?

 

僕はAFFINGER5を利用していて、他のテーマを利用したことがありません。

 

ですが、ワードプレスのデフォルトテーマである『Twenty Nineteen』でもフッターメニューは設定できるので、どのテーマでも設定できます。

 

defaultThema

 

フッターメニューは設定した方が良いのか?

 

これは好みによります。先ほどのように下から出てくるメニューが気になる人もいます。

 

ブログのデザインによってはない方がいいかもしれませんが、これは実際に自身のブログで試してみるしか答えはありません。(ABテスト)

 

僕は読者の方が少しでも読みやすくなれば、さらにTwitterも気軽にフォローしてもらえればと思い設定しています。

 

ワードプレスでフッターメニューの設定方法を画像付き解説

 

ワードプレスでフッターメニューの設定をしていきますが、まず先に行うことがあります。

 

AFFINGER5管理画面内の『メニュー』を開き下にスクロールします。

 

AFFINGER5管理画面メニュー

 

スマホ用フッターメニューを表示するをチェックしsaveします。

 

この設定をしておかないと、この後の設定をしてもフッターが表示されないので要注意です。

 

 

 

それでは設定をしていきます。

 

メニューの作り方は以前のヘッダーやスライドメニューと同じです。

 

まず『外観』→『メニュー』をクリックします。

 

フッターメニュー

 

次にフッターメニューを作成します。

 

フッターメニュー

 

今回はスマホ用フッターメニューという名前にしておきます。

 

順番通りに行いメニューを作成したら次にいきます。

 

スマホ用フッター

 

スマートフォンフッター用メニューをチェックします。

 

フッターメニューに何を追加するかは人それぞれですが、今回僕が作成したいのは以下の3点です。

 

  1. HOME
  2. Twitter
  3. TOP

 

それでは順番に作っていきます。

 

やり方をそのまま真似すればできるので難しくありません。

 

step
1
HOMEを作成

 

ホームを作る

 

手順は画像の通りです。

 

固定ページ欄を開き、『すべて表示』を選択します。

 

ホームにチェックを入れてメニューに追加、その後表示したい文字を入力します。

 

今回は『ホーム』とします。URLはちろん自身のブログのドメインを入力します。

 

HOMEの前に

 

ですがこの状態だとスマホでの表示がこのようになってしまいます。

 

フッターHOME

 

表示はされているけどアイコンとかないの?

 

知らない人も多いと思いますが、アイコンも実は自分で選んで設定できるのです。

 

AFFINGER5だとFont Awesome v4.7というサイトを推奨しているのでこちらのサイトを利用します。

 

step
2
アイコンを取得

 

Font Awesomeのサイトを開きます。

 

fontawesome

 

少し見辛いですが、赤丸の所のIconsをクリックします。

 

注意ポイント

  • 最新の5.12.1はAFFINGER5で対応していないのできちんとバージョンを確認しましょう

 

iconsを開いたら次にいきます。

 

HOME検索

 

検索欄があるので今回はHOMEの画像を検索します。

 

入力すると関連性のあるアイコンが出てきます。

 

1番左にHOMEにぴったりの家のアイコンが出たのでクリックします。

 

家のアイコン

 

次に表示されたアイコンを確認し、問題なければ下にあるコードをコピーします。

 

やること多すぎない…?

 

もうちょっとだから一緒に頑張ろう!

 

step
3
アイコンを設定

 

ワードプレス画面に戻り、先ほど設定していた『メニュー』のHOMEを選択します。

 

HOMEの前に

 

ナビゲーションラベルは自身が表記したい内容なので、ホームでもHOMEでも問題ありません。

 

今回はホームとしていますが、その文字の前に先ほどのコードをペーストします。

 

HOME完成形

 

このようになります。これで完成かというともう一手間が必要です。

 

このままだと下記のような表示になります。

 

フッターが横並び

 

先ほど選んだアイコンと文字が横並びになっています。

 

よくみるフッターはアイコンと文字が縦に並んでいますよね?

 

先ほどの設定を確認します。

 

コードを挿入

 

先ほどのコードと表示させたい文字『ホーム』の間に改行をするコードを挿入します。

 

<br/>

 

コードを挿入

 

挿入し保存まで行ったら確認します。

 

フッターのHOME完成

 

いい感じですね!これと同じ作業をTwitterでも行います。

 

Twitterの場合はマイページではなく、フォローページのリンクの方がいいでしょう。

 

https://twitter.com/intent/follow?screen_name=〇〇

 

上記のコードをそのまま〇〇の部分にあなたのアカウント(@〇〇)を入力してコピペで大丈夫です。

 

アイコンもつけて並べればTwitterも完成です。

 

ページのトップへ戻るメニュー

 

最後にページの1番上に戻るメニューを作ります。

 

トップへ戻るメニュー

 

メニュー項目を追加のカスタムリンクを開き、URLに【#wrapper】と入力します。

 

リンク文字列はTOPとし、メニューに追加をします。

 

これはクリックすると1番上までスクロールするのですが、ここでまた1つ行うことがあります。

 

スムーズスクロール

 

AFFINGER5管理画面のその他を開き、ページ内スムーススクロールを使用するのチェックを入れsaveします。

 

そして最後に確認をします。

 

フッター完成

 

これで完成です!本当にお疲れさまでした。

 

お疲れさま!ちょっと大変でしたねっ

 

フッターメニューは優先度高い、初心者でも必ず設定するべき:まとめ

まとめに使う画像

 

ポイント

  • フッターが設定してあるとブログ内を回遊しやすい
  • 最新記事やプロフィールなど見せたい記事を設定できる

 

慣れれば設定自体は時間がかかりませんが、初めて設定する時はすごく苦労しました。

 

初歩的なこと過ぎて初心者向けに詳しく記事を書いている人が少ないのか情報が少なかったです。

 

ブログは記事が1番重要ですが、記事を読みやすくするためにデザインもおろそかにできません。

 

せっかくあなたの記事に興味がある人が読んでくれているのに、見づらくて直帰しているかもしれないです。

 

フッターやヘッダー、スライドメニューをうまく利用して読みやすいブログ作りを心がけましょう!

 

複数のブログを運営するメリットデメリット

ブログ

2020/10/21

ワードプレスで複数のブログを運営するメリット・デメリット【初心者必見】

  WordPressで複数のブログを運営するのってどうなの? メリットがあるなら複数のブログを運営したいんだけど教えて!   このような疑問を解消します。   結論からいうと、複数のブログを今から始めるのであればまずは1つのブログを育てましょう。 初心者がいきなりブログを複数運営するにはデメリットや負担が大きすぎます。   現在運営しているブログがうまくいっている人の中には複数のブログ運営をしてメリットがある人もいます。 本記事では複数ブログを運営するメリット・デ ...

ReadMore

ブログの書き方6ステップ

ブログ

2020/10/18

ブログの書き方6ステップ!テンプレ作成で時間短縮【初心者でもできる】

  ブログ1記事書くのにすごく時間がかかっちゃう。 みんなどうやってブログを早く書いているんだろう?   このような疑問にお答えします。   結論からいうと、ブログに慣れてきた所謂「脱初心者ブロガー」の方々はそれぞれブログを書くときの「テンプレ」ができています。   本記事の内容 ブログの書き方6ステップ ブログ1記事執筆時間の目安   本記事では僕が記事を書く時に意識しているテンプレを紹介します。   テンプレを作成することによってブログ1記事 ...

ReadMore

楽天UN-LIMIT V

楽天経済圏

2020/11/5

【5G】楽天UN-LIMIT『Ⅴ』の詳細・料金は?【契約しないなんて損です】

  楽天の通信プランがアップグレードしたって聞いたけど何が変わったの?興味があるから詳しく知りたいな。   このような疑問を解消します。   ポイント 楽天UN-LIMIT Ⅴとは 楽天UN-LIMIT Ⅴの金額 楽天UN-LIMIT『2.0』と『Ⅴ』の違い 楽天UN-LIMITに新規で契約する場合 楽天UN-LIMIT2.0を契約していた場合 楽天UN-LIMITの契約時の注意点   楽天モバイルに興味があるけどよく知らないし、今使ってるキャリアから変更するのも面 ...

ReadMore

ブラックフライデーとサイバーマンデー

知っ得

2020/11/22

【2020年11月】ブラックフライデー&サイバーマンデーとは?【日程・注意点】

  Amazonが2020年11月27日よりの開催を決定しまブラックフライデーした。 毎月お得に買い物できるタイムセールとは違い、年に1度しかないビッグセールとなります!   さらに今年はサイバーマンデーが11月30日から続けての開催となり、計5日間の長期的なセールとなります。   この2つのビッグセール、最大のポイントは条件達成で最大10,000ポイント還元という神がかったイベント。 開催期間が11月27日(金)9:00〜12月1日(火)23:59と、まさにクリスマスプレゼ ...

ReadMore

sellers.jsonの設定方法

ブログ

2020/9/10

【Googleアドセンス】sellers.jsonとは?【対応方法】

  Googleからよく分からないメールがきた!「sellers.json」って何?対応してって書いてあるけどなんか怖い…   このような悩みを解消します。   sellers.jsonは広告主にサイト情報などを公開し、透明化するためのツールのこと。   本記事の内容 sellers.jsonとは sellers.jsonへ登録する方法   本記事では、実際に情報を登録する手順を紹介しています。   長文が苦手でメールを読んでいない人には、本記事 ...

ReadMore

 

-ブログ

© 2020 今日はじブログ Powered by AFFINGER5