ブログ PR

ワードプレスを使ったブログでスマホ画面下にメニューを設置する方法

記事内に商品プロモーションを含む場合があります

どうも こんにちは!

特に何も代行しない【悲しみの代行者@kanasimi_cat】です。

設定をミスってブログを消してしまい数ヶ月分をムダにしたこともありますが、かれこれブログを始めてもう少しで1年半です。

最近になってやっとスマホの画面下と、PCでアクセスした時にトップ画面上にメニューを設定する方法が分かったので、その方法について書いていきます。

もしスマホでアクセスしていただいてたら、画面下にある
【ホーム】【サイトマップ】【プロフィール】【お問い合わせ】の部分です。

PCでおこしいただいてる場合は、画面上部に上の4つのリンクが出ています。

使っているのはワードプレスなので、同じくワードプレスで設定方が分からなくて困ってたという方は、見ていってください。

スマホの固定フットメニュー設定方法

それではスマホのフットメニューの設定をしましょう!

設定できると↓みたいになります。

まずはワードプレス管理画面に入ります。

左のツールバーの【外観】にカーソルを持っていき【メニュー】をクリック

もしくは画面真ん中の『WordPressへようこそ!』にある【メニュー】をクリック

どちらでもOK

 

次の画面の【新しいメニューを作成しましょう。】をクリック

 

今までメニューを作ったことがない場合は、下のメニューが自動で作成されます。

▼をクリックするとメニューが開くので、いらないと思ったものを消してください。

そして下の【スマホの固定フッターメニュー】にチェックを入れて[メニューを保存]すると、スマホでアクセスしたら画面下にフッターメニューができています。

グローバルナビゲーションに同じメニューを表示させたい場合は、グローバルナビゲーションにもチェックを入れます。

ただこの時点だと名前が【サービス】とか【ランキング】となっていても、設定URLはトップページのURLになっているので、専用の固定ページを作成するか、記事のURLを貼らなければいけません。

固定ページの作成法はあとで説明しますが、下の【メニュー項目を追加】のカスタムリンクで自作のメニューが作れます。

記事をフッターに置きたい場合は、【投稿】を選んで置きたい記事を追加すると、その選んだ記事を置くことができます。

これでひとまずスマホ画面下部に、固定フッターメニューの設置が完了しました。

グローバルナビゲーションの設定方法

もしスマホの固定フッターメニューと違うメニューを表示させたい場合は、新しくグローバルナビゲーション用のメニューを作る必要があります。

PCでアクセスがあった場合のグローバルナビゲーションの表示場所です。

スマホでアクセスがあった場合は↓のような感じです。

スマホの固定フッターメニューを作った時と同じように、管理画面からメニューに入り新しいメニューを作成します。

2回目以降の作成は名前を自分で付けるようになるので、好きな名前をつけてください。

 

2回目以降の作成は、メニューも自動で作成されないので左のメニューから選びます。

カスタムリンクのURL欄に、ひとまず自身のブログのアドレスを入れて[メニューに追加]をクリックします。(URLを入れてないと追加できません)

リンク文字列というのは、そのURL先の名前でも入れてください。

ホーム画面に戻る場合は【TOP】とか【ホーム画面】だったりですね。

最後にグローバルナビゲーションにチェックを入れれば、PCでアクセスがあった場合、ホーム画面上部に選んだメニューが表示されます。

スマホでアクセスがあった場合は右上か左上に[三]みたいな表示が出ます。

グローバルナビゲーションやピックアップコンテンツには別のコンテンツを置きたい場合は、このように新しくメニューを作っていくことになります。

結構面倒ですけどね。

でも、このままだとホーム画面に戻るボタンだらけになるので、ひとまず固定フッターメニューと、グローバルナビゲーションのチェックを外して保存し直しておいてください。

以上がグローバルナビゲーションとスマホの固定フッターの設置方法です。

次はリンク先となる固定ページの作成をします。

固定ページを作成しよう!

管理画面上の【➕ 新規】にカーソルを持っていき、[固定ページ]をクリックすると固定ページ作成画面に移ります。

次のページで記事作成と同じように作成していきますが、内容は自由なので、プロフィールなり、イチオシの渾身の記事一覧を作っても良いですし、下のように細分化リンク用カテゴリーを作って、そこにさらにリンク先専用ページを作っていっても良いです。

作成した固定ページもインデックスしたい場合は、そのまま投稿し、インデックスさせたくない場合は【noindex】にチェックを入れてください。

右のカテゴリ タグ 属性 共有 おすすめは、必要であればチェックを入れたり、外したりしてください。

固定ページの作成ができたら、そのURLを【カスタムリンク】に記入して、グローバルナビゲーション、ピックアップコンテンツ、スマホの固定フッターメニューなど、表示したい箇所にチェックを入れて保存すれば完了です。

スマホで確認してみましょう!

固定フッターメニューの応用編

固定フッターメニューに限定した方法ではありませんが、それを応用した使い方を紹介したいと思います。

これを読んでいるあなたがアフィリエイトをしているなら、例えば何かを紹介してる場合は記事内にリンクを貼るかと思います。

このブログのように雑記だと難しいですが、特化ブログの場合は固定フッターに広告先のリンクがあると、訪問者が『これ欲しい!』『すぐ申し込みたい!』と思った瞬間にリンク先を探させることなく、その申し込みページに行けるようにできます。

使うメニューはカスタムリンクです。

↓これは自分が運営してる特化ブログの固定フッターメニュー。

もしかしたらできない広告リンクもあるかもしれないので、設定保存したらスマホで自分のブログを見て確認し、フッターメニューが表示されているか?広告をクリックしたら広告先に繋がるか?を確認しながらやってみてください。

固定フッターメニューにアイコンを表示させる方法

この記事を投稿した後調べたら、そんなに難しいことではなかったです。

固定フッターにアイコンをつけると↓みたいになります。

アイコンを設定するのもメニューで行います。

メニュー作成・編集画面右上の【表示オプション】をクリックして開きます。

出てきたものの中の【説明】にチェックします。

 

【説明】にチェックを入れると、メニューに【説明】という欄が出てくるので、ここにアイコンのコードを入れます。

アイコンのコードは【Font Awesome】で取れます。

【Font Awesome】は、英単語でしかアイコンを検索できません。

次の画面で右下の【Start Using This Icon】をクリック

出てきたコード <i class=”fas fa-home”></i> ” ”の間だけをコピーして【説明】のところにペーストし保存してください。

コードを全部コピーしてペーストしても、アイコンは出ません。

保存したらスマホで見に行ってみましょう!

もし表示されていなかったら、いらない文字が入ってるかもしれません。

まとめ

スマホの固定フッターメニューとグローバルナビゲーションの設定法を書いてみました。

ブログを始めたばかりだったり、パソコンを使い始めたばかりだと
『フッターメニュー?グローバル?なにそれ?』と分からないことばかりかと思いますが、少しでも参考になれば嬉しいです。

それでは最後まで見ていただき ありがとうございました

無料で試せる、ホームページ作成なら【とりあえずHP】