ワードプレスでスマホに固定フッターボタンをプラグインでカンタンに表示させる方法!

ワードプレス

スマホでサイトを表示したスマホ画面の下の方に固定フッターボタンが表示されているのを最近よく見かけます。スマホ用固定フッターボタンをカンタンにきれいに表示させることができる神アプリ「Fixed Bottom Menu」を発見しましたので、使い方を説明したいと思います。

 

スマホ用固定フッターボタンって何?

スマホでサイトを見たときに、画面の下の方にこんなボタンが表示されているのを見たことがありませんか?

これがスマホ用固定フッターボタンです。(正式名称ではありませんが・・・)

このボタンはクリックするだけで、指定のページに飛んでくれるので、読者を誘導したいページにカンタンに飛ばすことが可能です。とっても分かりやすいですよね。

スマホメニューとしてはハンバーガーメニューというものは昔からあります↓

 

が、ここをクリックする人はなかなかいないのが現状です。しかも、ワンタッチではないので片手操作ではできないというデメリットもあります。このデメリットをなくすべく登場したのが、スマホ用固定フッターボタンです。

スマホ用固定フッターボタンはテーマによっては最初から設定されているものもあるのですが、残念ながら設定されていないテーマも数多くあります。

その場合、スマホ固定フッターボタンを表示させようとすると、テーマ編集をして、更にCSSコードを追加し、表示させたいURLや言葉を編集して・・・となかなか大変な作業となります。

しかも、なかなかうまく表示されなかったりもします。(→まさに私もなかなかうまく表示されませんでした。)

しかし、めちゃくちゃカンタンにきれいに設置できる神プラグイン「Fixed Bottom Menu」を発見しましたので、そのプラグインでスマホ用固定フッターボタンを設置する方法を説明しますね。

表示させる文字やアイコン、色なども自由自在に設定できます!

開発者の方のサイトは↓です。

固定フッターメニューを表示するプラグイン
はじめに 高齢者向けのサイトを制作していますが、高齢者の皆様はハンバーガーメニューが苦手です。誰にでも分かり易くてワンタッチで操作できる固定フッターメニューは必須です。カスタムテンプレートで制作してい...

 

スマホ用固定フッターボタンをカンタンきれいに表示させる神アプリ「Fixed Bottom Menu」の使い方!

使い方はめちゃくちゃカンタンな3ステップです。

①プラグイン「Fixed Bottom Menu」をダウンロードして有効化

②プラグイン→インストール済プラグイン→Fixed Bottom Menuの設定をクリック

③設定画面で設定をする

これだけなので、めちゃくちゃカンタンなのですが、設定画面のところをもう少し詳しく説明しますね。

 

神アプリ「Fixed Bottom Menu」の設定の仕方!

設定はとっても簡単なのですが、詳しく説明しますね。

 

①表示させたいアイコンを選ぶ

表示させたいアイコンはWordPress公式アイコンフォント[Dashicons]から好きなものを選べるようになっています。

Dshiconsから使いたいアイコンを選びます。

例えば、お家のアイコンを使いたい場合はまずお家のアイコンをクリックします。

 

すると下記のページが表示されます。

下記の赤い四角の部分の「dashicons-admin-home」の部分の「dashicons-」以降の部分をコピーして、Fixed Bottom Menuの設定画面のdashiconsの部分にペーストします。

②リンク先のURLと表示させたい文字をそれぞれ入力する

表示させたい文字はあまり長いときれいに表示されませんので5文字以内で入力してください。

 

③フォントサイズや背景色・文字の色を選ぶ

フォントサイズも選べます。③の部分のバーを左右にスクロールさせるとフォントサイズが変更可能です。

背景色や文字の色・オーバーレイの色も自由に設定できます。

例えば背景色を設定したい場合は背景色の色の部分をクリックすると下記のような画面となりますので、十字を動かして好きな色に設定してください。

テキストの色やオーバーレイの色も同じ要領で設定することが可能です。

 

まとめ

スマホで固定フッターボタンを表示させる神アプリ「Fixed Bottom Menu」の使い方を詳しく説明しました。

ぜひ設定してみて下さいね~。