ブログ運営・活用術

【WordPress】スマホ固定フッターメニューの設定方法とFont Awesomeでアイコン利用する方法

どうも!ほのぱぱです。

ブログを見に来てくれた方に、分かりやすく見やすいようにするため、またGoogleアドセンス合格に向けてスマホのフッターメニューを設置しました。

今回は、Wordpressのブログ作成で、スマホのフッターメニュー設定と、アイコン挿入までの流れをご説明します!

下の写真がスマホでページを見た状態です。

👆スマホメニューのアイコン例

ほのぱぱ
ほのぱぱ
Googleアドセンスで「コンテンツの複製」でお困りの方は良かったら見てください⇓

Googleアドセンス審査「価値の低い広告枠(コンテンツの複製)」挫折から合格へ!2019年、ブログ初心者が苦労してGoogleアドセンス合格した時の話です。審査不合格は約18回。改善したポイントを細かく解説します!...

ブログでのスマホメニューの設定が大切

現代はスマホ一台で、ほとんど何でもできてしまう時代です。ネットで検索や記事・ニュースの確認も、移動時間や好きな時間に使えるスマホで行う場合が多いです。

ほのぱぱ
ほのぱぱ
なんでもスマホの時代ですね

なので、サイトやブログを運営する上で、スマホ画面を充実させて見やすい状態を作ることはとっても大事なことです。

スマホ画面で見やすいサイトを作るために、スマホのフッターメニューの設定が必要になってきます。

私と同じように初心者の方でも分かりやすいように、スマホ画面表示の、フッターメニューの設定方法を解説したいと思います。

ほのぱぱ
ほのぱぱ
ではさっそく、メニュー作成方法を解説します。

スマホフッターメニューの作成

初心者の私が実際行った手順で詳しく説明します!

手順1.メニューの新規作成

まずはメニューの新規作成を行います。

「外観」➡「メニュー」➡「新しいメニュー作成」をクリック。

この画像には alt 属性が指定されておらず、ファイル名は 2019-02-26-1_LI.jpg です

そして、メニュー名を入力します。

この画像には alt 属性が指定されておらず、ファイル名は 2019-02-26-2_LI.jpg です

「スマホフッターメニュー」など、何でもいいと思います!

自分が好きなように分かりやすいメニュー名を記入します。

ほのぱぱ
ほのぱぱ
変な名前つけると後でわからなくなります。「スマホ固定フッタメニュー」なんかがおすすめです

手順2.メニューに追加するコンテンツを選択する

メニュー名が決まったら、そこに入れたいコンテンツを選びます。

ほのぱぱ
ほのぱぱ
選んだコンテンツが下の図のように、フッターメニューになります

追加したいメニューにチェックを入れて「メニューに追加」をクリックすると右側に反映されます。

左側のの枠の中からフッタメニューに入れたいものを選んで、「メニューに追加」をクリックします。

すると選んだメニューが右側のに移動します。

に表示されているメニューが実際に表示される項目です。

最後に「保存」をクリックすれば完了です。

 

プロフィールやお問い合わせを乗せている方も多いです。

ほのぱぱ
ほのぱぱ
サイトマップや一押しの記事を入れてもいいかもしれません

ほのぱぱ
ほのぱぱ
設定自体はこれでおしまいです。やってみたら簡単だとは思いますが、私の失敗談を少し下にかかせてください( 一一)

【ブログのサイトマップ作成方法】Wordpressのプラグインを利用して作る2種類のサイトマップどうもほのぱぱです! サイトを訪れたときに、「どこに何の情報があるかわからない」「どうやったらさっきのページに戻るかわからない」ってこと...

 

 

 

初心者すぎて手間取ったこと

スマホ固定メニューの設定自体は、上記の設定でおしまいです!こんなに簡単なのに私はここから3時間もかかったのです。

なぜかというと

表示させたいメニューをちゃんと用意していなかったから!

ほのぱぱ
ほのぱぱ
ツイッターやお問合せページを乗せたかったのですが、そのページを作っていなかったり、載せ方が全然わかりませんでした(>_<)

ほのぱぱ
ほのぱぱ
先にフッターメニューに何を表示したいか決めておくとスムーズってことですね
【WordPress】 プラグインを使用してお問い合わせフォームの設置の方法ブログ初心者の方向けにプラグイン「Contact Form 7」を活用したコンタクトフォームの設定方法を解説します。...

すでにある「おすすめの固定ページやカテゴリーをメニューにいれたい!」って方は、左側のメニューから追加し保存するだけです。表示させたい固定ページやカテゴリーがある場合は早く終わります。

ただ、玄人様たちのブログを参考にしますと、プロフィールやTwitter、お問い合わせページを設定している方多いようです。

私もお問合せページやTwitterを設置したい!

ほのぱぱ
ほのぱぱ
と思って、色々しらべながから設定していたら、めちゃ時間かかりました

既にあるページはそのままワンクリック(メニューに保存のボタン)で表示させることができます。

でもツイッターやインスタグラムを入れ込みたい場合は、「カスタムリンク」を使用して、自分で設定しないといけません。

この方法が分からなくて時間がかかってしまいました。

ほのぱぱ
ほのぱぱ
逆に言うとなんでも載せれるってことですね

ちなみに私のサイトのフッターメニューは、「ホーム・ツイッター・インスタ・サイトマップ」の四つにしています。

ツイッターもインスタグラムも始めたばかりで、ほとんど見ごたえないですが別に良いんです。

これから充実していきますから!!(笑)

ほのぱぱ
ほのぱぱ
ということで、以下にツイッターとインスタグラムを設定する方法を解説します

ツイッターやインスタを設定

ほのぱぱ
ほのぱぱ
記事や固定ページはそのまま1クリックでメニュー追加できますが、ツイッターなどの場合は「カスタムリンク」を使用して自分でツイッターページに飛ぶURLを入力します

左側の「メニュー項目の追加」の項目で「カスタムリンク」をクリック。

「メニューに追加」を押したら、右側に設置されます。

もしエラーが出てメニューに追加できなかったら、URLに「a」でもいいので入力するとメニューに追加できると思います。

カスタムリンクがメニューに追加したら、それをクリックすると下の図のようになると思います。

ほのぱぱ
ほのぱぱ
ここに自分のメニュー名(Twitter)やツイッターにとぶURLを入力していきます

ナビゲーションラベル】にツイッターの名前を入力します。ツイッターの場合、「ツイッター」や「Twitter」と記入でいいかと思われます。

「URLの部分」には、ご自身のツイッターページに飛ぶURLを記入します。

  • ツイッターページでしたら
  • http://twitter.com/@自分のアカウント
  •  
  • インスタだったら
  • https://www.instagram.com/自分のアカウント

これらを入力します。

そしたら読者の方が、スマホフッターメニューでツイッターのボタンを押したら、ご自身のツイッター画面に飛ぶことができます。

※ホームボタンを作りたい場合もこの要領でできます。ナビゲーションラベルに「ホーム」と入力して、URLに自分のサイトのURLを入力したらOKです。

スマホで確認(見やすさ・URL)

必ずスマホでサイトを開いて確認してください。

私のように初心者ですと、たまに「メニュー名(ナビゲーションラベル)の文字数」が多すぎることがあります。

スマホ画面でみるとはみ出てしまったりして、上手に表示されない場合があります。

ほのぱぱ
ほのぱぱ
よくわからないときは、更新するたびにスマホでチェックすることをおすすめします

例えば、「ホーム」だけならいいのですが「ホームへ戻る場合はこちら」等、文字数が多いと文字がはみ出てしまします。

その場合は、スマートなのが見やすいと思うのでメニュー名の文字数の調整をおこなう必要があります。

あとはスマホ画面から、ホームボタンを押したらちゃんとホームへ飛ぶか、プロフィールボタンからプロフィール画面に飛ぶか、Twitterボタンからちゃんと自分のTwitterページに飛ぶかチェックします。

ほのぱぱ
ほのぱぱ
都度の確認大事です

それと、メニューの数ですが

スマホで見た時に、メニュー数は4個~5個が見やすくおすすめです。6個以上入れることもできますが、少し窮屈に思えます。逆に3個ですと味気なく見えてしまいます。

さらに、アイコンがあると見栄えが良くなります。せっかくフッターメニューを作ったらアイコンも表示させちゃいましょう!(^^)!

次にアイコンの設置の方法を解説します。

「Font Awesome」を利用しアイコンの設定

どこでアイコンを取得するの?

当サイトは、「Font Awesome」のサイトを利用して、スマホメニューにアイコンを表示していますので、こちらのサイトを利用してアイコンを表示する方法を解説したいと思います!

アイコンをゲットできるサイトは色々あるようですが、わたしはFont Awesomeというサイトで取得しました。

ネットで玄人さんたちが良く使うと聞いたからです。(ご使用の有料テーマによっては、すでに使える環境が整っているかもしれませんので確認してみてください)

ほのぱぱ
ほのぱぱ
アイコンを表示すると
サイトの見栄えがとてもよくなりました!

「Font Awesome」はどのようなサイトかというと。。

ブログやサイトでアイコンフォントを表示できるようにしてくれるサービスを提供してくれているところです。

まずはイメージしやすいように大まかな手順です。

次の通りです⇓

「font awesome」でアイコンを使用するためのコードを自分のサイトに張り付ける

「font awesome」で使用するアイコンコードコピーする

フッターメニューにアイコンコードをペーストする

手順1.アイコンの使用するためのコードを取得しよう

それでは、「Font Awesome」のサイトのホームに行きます。

ほのぱぱ
ほのぱぱ
サイトを見てみると使ってみたいアイコンがいっぱいあります

さっそくアイコンをコピペしたいところですが、まずはコードを有効にするためにやるべきことがあります。

「START USING FREE」をクリックしてください。

有料版と無料版がありますが、無料版でいきます。(有料だと使えるアイコンはいっぱいありますが、とりあえず無料で十分なはずです)

Font Awesomeのホーム画面

そしたら、よく分からない長~いコードが表示されます。

まずこれをコピーしましょう。

Font Awesomeのコード

手順2.自分のサイトにコードの貼り付ける

上記のコードをコピーします。これを自分のサイトの<head>~</head>の中に貼ります。

自分のサイトにコード貼ることによって、「Font Awesome」で取り扱っているアイコンを、自分のサイトで使用できますよってことになります。

まずはWordpressダッシュボードの「外観」「テーマエディター」をクリック。そしたら⇓の画面になります。

右のバーのテーマヘッダー「header.php」をクリック。<head>~</head>の中に先ほどコピーしたコードを貼り付けます。

ほのぱぱ
ほのぱぱ
良く分からなかったら、とりあえず</head>を探してください。</head>の前にコピペしたら大丈夫です

貼れたら「保存」をクリックします。

コード設置はこれで終了です。

この作業で、「font awesome」のサイトにあるアイコンを、自分のサイトで無料で使用できるよってことになります。

とりあえず、ここまで来たら簡単です。あとは好きなアイコンをページに設置するだけです!

他のタグを消したり、書き換えたりするとブログやサイトが正常に表示されなくなるかもしれないので、ここの作業は慎重に行ってください。

手順3.好きなアイコンを選び自分のサイトに張り付け

「Font Awesome」のサイトに戻って、好きなアイコンを選んでください。ツイッターやインスタグラムのアイコンなんかもあります。

ほのぱぱ
ほのぱぱ
無料でもほとんどの一般的なアイコンはありそうです

今回はホームボタン、家のアイコンで説明します。「font awesome」の検索ページを利用します。

検索で「home」と入力します。(注:検索は英語で記入です!)

するとホームのアイコンがたくさん表示されると思うので、使いたいアイコンをクリック。(注:色が薄いアイコンは有料です)

手順4.アイコンのコードをコピー

アイコンコードとは?
アイコンを表示させるために必要なコードで
例えばこのホームのアイコンならこんなコードがあります

 <i class=”fas fa-home“></i> 

今回のスマホメニューに表示させたい場合、”fas fa-home”の部分だけ使用します。
このコードを自分のサイトのスマホメニューに貼り付けるのですね。

アイコンを選んで、クリックすると⇓の画像のようなコードがでますのでコピーします。

ほのぱぱ
ほのぱぱ
ワンクリックでコピーしてくれるのは嬉しいです

このアイコンのコードを自分のサイトの使用したい場所に貼ると、実際にこのアイコンが表示されます。

(注:サイトですとアイコンの表示の色が、紫だったりピンクだったりしますが、色の指定のタグを使わなければ黒白ですのでご安心ください)

手順5.選んだアイコンを自分のサイトに設置

アイコンを選んでコピーまでできました!次に、スマホメニューのアイコン設置を行います。

まずは「外観」「メニュー」➡アイコンを入れたい「メニュー」を選択します。

(スマホフッターメニューに設定しているメニューのことです)

次に上のほうの「表示オプション」をクリックし「説明」にチェックを入れてください。

次に、アイコンを入れたいメニュー名(この場合「ホーム」)をクリック。

「説明」という欄ができているので、「Font Awesome」でコピーしたアイコンコードを貼り付けます。

ここでは真ん中の  fas fa-home  だけで大丈夫です。

「Font Awesome」でコードをコピーすると

<i class=”fas fa-home”></i>

これがコピーされますが、メニュー内の【説明】の部分に張るコードは

fas fa-home

だけで大丈夫です。

まわりのタグも一緒にコピーされている場合は外しちゃってください。

最後に「メニューを保存」を押して完了です。

WordPress【動くアイコン】をスマホ固定フッターメニューで使用する方法どうもほのぱぱです! Wordpressでブログを開始して、テーマ「JIN」を使用しています。 そして、スマホ固定フッターメニューのアイ...

まとめ

WordPress テーマJINでのスマホ固定フッターメニューの設定の仕方でした。

スマホ固定フッターメニューの設定自体は簡単ですが、そこに乗せたいページをしっかり作りこんでおく必要があるように思えます。

アイコンは上手に活用出来たら見やすいサイトが作れると思います。ホームのアイコンだけではなく、メール・人型・女性・男性・子どものアイコンもあるのいろいろ試したくなってしまいます(*´ω`*)

ほのぱぱ
ほのぱぱ
見やすさは大切ですので上手に活用していきたいですね

スマホフッタメニューの設定が終わったら、ブログ立ち上げ初期にやっておきたいこともほとんど完了したのではないでしょうか。

ほのぱぱ
ほのぱぱ
かなりおおまかにですが、私が記事を書く前にとりあえず設定したことはこちらです

  1. パーマリンク設定
  2. お問い合わせフォーム設定
  3. スマホフッタメニュー設定
  4. サイトマップの設定
  5. CTAの設定
  6. ASPへの登録(アフィリエイトのために)

もしアドセンス合格を目指してましたら⑤のASP登録は後回しでもいいように思えます。ある程度初期設定ができたら、あとはどんどん記事を書いていっていいと思います!

ほのぱぱ
ほのぱぱ
パーマリンクは最初に設定しておきたいところですが、ほとんどの場合はあとからでも設定しなおせることが多いのです

ほのぱぱ
ほのぱぱ
私のように初心者の場合は、困ったことにぶつかってから、調べて設定しなおせば大丈夫かと(笑)

【パーマリンク設定方法】Wordpressでブログを開設したら必ず最初にしておきたい理由と設定方法どうもほのぱぱです! Wordpressでブログを開設したら、パーマリンクの設定行いたいところです。でも、ブログ初心者ですと「パーマリン...
【CTA設定方法】CTAの役割と雑記ブロガーでも設置するべき理由WordPressテーマJINで、CTAの役割と設定方法を解説します。雑記ブロガーでもASPに登録しCTAを設定することで収益アップに繋がる可能性があります。...
ブログ運営に欠かせないASP
もしもアフィリエイト
ブログ初心者の方に、まずお勧めしたいASPはもしもアフィリエイトです。
広告内容も豊富で使いやすく、当ブログの育児グッズでもお世話になっています。もしもアフィリエイトの1番良い部分はAmazonと楽天の広告を同時に出すことができるところ。
特にAmazonアソシエイトの審査合格した方におすすめです!楽天と併用して、クリック率アップに繋がると思います!

 

詳細ページ公式ページ

アクセストレード
アクセストレード パートナーサイト募集
おすすめ度第2位にアクセストレードを選ばさせていただきました!
アクセストレードは、A8netなどに比べると広告の種類や数は少ないですが、金融系・転職系がとても強いASPです。
他のASPの期限切れの時のサブ用や、金融系・転職系のアフィリエイト広告を出したい方は登録しておくべきです!

 

詳細ページ公式ページ

A8.net
国内最大級のアフィリエイトサービスで、広告主数が19,000社以上もあり、ほとんどの書きたい広告をカバーできると思います。
アフィリエイトを始める方は、まずはA8netを登録しておいて損はないはず。
1番の魅力は、広告の種類や数が多いことも嬉しいですが、何といっても審査がめちゃ通りやすいところ。アフィリエイト初心者の方に、1度試してほしいASPです。

 

詳細ページ
公式ページ