どうも！ほのぱぱです。
ブログを見に来てくれた方に、分かりやすく見やすいようにするため、またGoogleアドセンス合格に向けてスマホのフッターメニューを設置しました。
今回は、Wordpressのブログ作成で、スマホのフッターメニュー設定と、アイコン挿入までの流れをご説明します！
下の写真がスマホでページを見た状態です。
目次
ブログでのスマホメニューの設定が大切
現代はスマホ一台で、ほとんど何でもできてしまう時代です。ネットで検索や記事・ニュースの確認も、移動時間や好きな時間に使えるスマホで行う場合が多いです。
なので、サイトやブログを運営する上で、スマホ画面を充実させて見やすい状態を作ることはとっても大事なことです。
スマホ画面で見やすいサイトを作るために、スマホのフッターメニューの設定が必要になってきます。
私と同じように初心者の方でも分かりやすいように、スマホ画面表示の、フッターメニューの設定方法を解説したいと思います。
スマホフッターメニューの作成
初心者の私が実際行った手順で詳しく説明します！
手順1.メニューの新規作成
まずはメニューの新規作成を行います。
「外観」➡「メニュー」➡「新しいメニュー作成」をクリック。
そして、メニュー名を入力します。
「スマホフッターメニュー」など、何でもいいと思います！
自分が好きなように分かりやすいメニュー名を記入します。
手順2.メニューに追加するコンテンツを選択する
メニュー名が決まったら、そこに入れたいコンテンツを選びます。
追加したいメニューにチェックを入れて「メニューに追加」をクリックすると右側に反映されます。
左側の①の枠の中からフッタメニューに入れたいものを選んで、②の「メニューに追加」をクリックします。
すると選んだメニューが右側の③に移動します。
③に表示されているメニューが実際に表示される項目です。
最後に「保存」をクリックすれば完了です。
プロフィールやお問い合わせを乗せている方も多いです。
初心者すぎて手間取ったこと
スマホ固定メニューの設定自体は、上記の設定でおしまいです！こんなに簡単なのに私はここから3時間もかかったのです。
なぜかというと
表示させたいメニューをちゃんと用意していなかったから！
すでにある「おすすめの固定ページやカテゴリーをメニューにいれたい！」って方は、左側のメニューから追加し保存するだけです。表示させたい固定ページやカテゴリーがある場合は早く終わります。
ただ、玄人様たちのブログを参考にしますと、プロフィールやTwitter、お問い合わせページを設定している方多いようです。
私もお問合せページやTwitterを設置したい！
既にあるページはそのままワンクリック（メニューに保存のボタン）で表示させることができます。
でもツイッターやインスタグラムを入れ込みたい場合は、「カスタムリンク」を使用して、自分で設定しないといけません。
この方法が分からなくて時間がかかってしまいました。
ちなみに私のサイトのフッターメニューは、「ホーム・ツイッター・インスタ・サイトマップ」の四つにしています。
ツイッターもインスタグラムも始めたばかりで、ほとんど見ごたえないですが別に良いんです。
これから充実していきますから！！(笑)
ツイッターやインスタを設定
左側の「メニュー項目の追加」の項目で「カスタムリンク」をクリック。
「メニューに追加」を押したら、右側に設置されます。
もしエラーが出てメニューに追加できなかったら、URLに「a」でもいいので入力するとメニューに追加できると思います。
カスタムリンクがメニューに追加したら、それをクリックすると下の図のようになると思います。
【ナビゲーションラベル】にツイッターの名前を入力します。ツイッターの場合、「ツイッター」や「Twitter」と記入でいいかと思われます。
「URLの部分」には、ご自身のツイッターページに飛ぶURLを記入します。
- ツイッターページでしたら
- http://twitter.com/@自分のアカウント
- インスタだったら
- https://www.instagram.com/自分のアカウント
これらを入力します。
そしたら読者の方が、スマホフッターメニューでツイッターのボタンを押したら、ご自身のツイッター画面に飛ぶことができます。
※ホームボタンを作りたい場合もこの要領でできます。ナビゲーションラベルに「ホーム」と入力して、URLに自分のサイトのURLを入力したらOKです。
スマホで確認（見やすさ・URL)
必ずスマホでサイトを開いて確認してください。
私のように初心者ですと、たまに「メニュー名（ナビゲーションラベル）の文字数」が多すぎることがあります。
スマホ画面でみるとはみ出てしまったりして、上手に表示されない場合があります。
例えば、「ホーム」だけならいいのですが「ホームへ戻る場合はこちら」等、文字数が多いと文字がはみ出てしまします。
その場合は、スマートなのが見やすいと思うのでメニュー名の文字数の調整をおこなう必要があります。
あとはスマホ画面から、ホームボタンを押したらちゃんとホームへ飛ぶか、プロフィールボタンからプロフィール画面に飛ぶか、Twitterボタンからちゃんと自分のTwitterページに飛ぶかチェックします。
それと、メニューの数ですが
スマホで見た時に、メニュー数は4個～５個が見やすくおすすめです。６個以上入れることもできますが、少し窮屈に思えます。逆に３個ですと味気なく見えてしまいます。
さらに、アイコンがあると見栄えが良くなります。せっかくフッターメニューを作ったらアイコンも表示させちゃいましょう!(^^)!
次にアイコンの設置の方法を解説します。
「Font Awesome」を利用しアイコンの設定
どこでアイコンを取得するの？
当サイトは、「Font Awesome」のサイトを利用して、スマホメニューにアイコンを表示していますので、こちらのサイトを利用してアイコンを表示する方法を解説したいと思います！
アイコンをゲットできるサイトは色々あるようですが、わたしはFont Awesomeというサイトで取得しました。
ネットで玄人さんたちが良く使うと聞いたからです。（ご使用の有料テーマによっては、すでに使える環境が整っているかもしれませんので確認してみてください）
サイトの見栄えがとてもよくなりました！
「Font Awesome」はどのようなサイトかというと。。
ブログやサイトでアイコンフォントを表示できるようにしてくれるサービスを提供してくれているところです。
まずはイメージしやすいように大まかな手順です。
次の通りです⇓
「font awesome」でアイコンを使用するためのコードを自分のサイトに張り付ける
⇓
「font awesome」で使用するアイコンコードコピーする
⇓
フッターメニューにアイコンコードをペーストする
手順１．アイコンの使用するためのコードを取得しよう
それでは、「Font Awesome」のサイトのホームに行きます。
さっそくアイコンをコピペしたいところですが、まずはコードを有効にするためにやるべきことがあります。
「START USING FREE」をクリックしてください。
有料版と無料版がありますが、無料版でいきます。（有料だと使えるアイコンはいっぱいありますが、とりあえず無料で十分なはずです）
そしたら、よく分からない長～いコードが表示されます。
まずこれをコピーしましょう。
手順２．自分のサイトにコードの貼り付ける
上記のコードをコピーします。これを自分のサイトの<head>～</head>の中に貼ります。
自分のサイトにコード貼ることによって、「Font Awesome」で取り扱っているアイコンを、自分のサイトで使用できますよってことになります。
まずはWordpressダッシュボードの「外観」➡「テーマエディター」をクリック。そしたら⇓の画面になります。
右のバーのテーマヘッダー「header.php」をクリック。<head>～</head>の中に先ほどコピーしたコードを貼り付けます。
貼れたら「保存」をクリックします。
コード設置はこれで終了です。
この作業で、「font awesome」のサイトにあるアイコンを、自分のサイトで無料で使用できるよってことになります。
とりあえず、ここまで来たら簡単です。あとは好きなアイコンをページに設置するだけです！
他のタグを消したり、書き換えたりするとブログやサイトが正常に表示されなくなるかもしれないので、ここの作業は慎重に行ってください。
手順３．好きなアイコンを選び自分のサイトに張り付け
「Font Awesome」のサイトに戻って、好きなアイコンを選んでください。ツイッターやインスタグラムのアイコンなんかもあります。
今回はホームボタン、家のアイコンで説明します。「font awesome」の検索ページを利用します。
検索で「home」と入力します。（注：検索は英語で記入です！）
するとホームのアイコンがたくさん表示されると思うので、使いたいアイコンをクリック。（注：色が薄いアイコンは有料です）
手順４．アイコンのコードをコピー
アイコンコードとは？
アイコンを表示させるために必要なコードで
例えばこのホームのアイコンならこんなコードがあります
<i class=”fas fa-home“></i>
今回のスマホメニューに表示させたい場合、”fas fa-home”の部分だけ使用します。
このコードを自分のサイトのスマホメニューに貼り付けるのですね。
アイコンを選んで、クリックすると⇓の画像のようなコードがでますのでコピーします。
このアイコンのコードを自分のサイトの使用したい場所に貼ると、実際にこのアイコンが表示されます。
（注：サイトですとアイコンの表示の色が、紫だったりピンクだったりしますが、色の指定のタグを使わなければ黒白ですのでご安心ください）
手順５．選んだアイコンを自分のサイトに設置
アイコンを選んでコピーまでできました！次に、スマホメニューのアイコン設置を行います。
まずは「外観」➡「メニュー」➡アイコンを入れたい「メニュー」を選択します。
（スマホフッターメニューに設定しているメニューのことです）
次に上のほうの「表示オプション」をクリックし「説明」にチェックを入れてください。
次に、アイコンを入れたいメニュー名（この場合「ホーム」）をクリック。
「説明」という欄ができているので、「Font Awesome」でコピーしたアイコンコードを貼り付けます。
ここでは真ん中の fas fa-home だけで大丈夫です。
「Font Awesome」でコードをコピーすると
<i class=”fas fa-home”></i>
これがコピーされますが、メニュー内の【説明】の部分に張るコードは
fas fa-home
だけで大丈夫です。
まわりのタグも一緒にコピーされている場合は外しちゃってください。
最後に「メニューを保存」を押して完了です。
まとめ
WordPress テーマJINでのスマホ固定フッターメニューの設定の仕方でした。
スマホ固定フッターメニューの設定自体は簡単ですが、そこに乗せたいページをしっかり作りこんでおく必要があるように思えます。
アイコンは上手に活用出来たら見やすいサイトが作れると思います。ホームのアイコンだけではなく、メール・人型・女性・男性・子どものアイコンもあるのいろいろ試したくなってしまいます(*´ω｀*)
スマホフッタメニューの設定が終わったら、ブログ立ち上げ初期にやっておきたいこともほとんど完了したのではないでしょうか。
- パーマリンク設定
- お問い合わせフォーム設定
- スマホフッタメニュー設定
- サイトマップの設定
- CTAの設定
- ASPへの登録（アフィリエイトのために）
もしアドセンス合格を目指してましたら⑤のASP登録は後回しでもいいように思えます。ある程度初期設定ができたら、あとはどんどん記事を書いていっていいと思います！
もしもアフィリエイト
アクセストレード
A8.net
