働かなくても収入が得られるようになる!パソコン音痴な女性起業家・サロンオーナー向け!

大好評!無料オンラインレッスンの登録はコチラ

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

 
この記事を書いている人 - WRITER -

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

 

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

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

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

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

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

 

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

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

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

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

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

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

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

https://blog.riverforest-wp.info/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」の使い方を詳しく説明しました。

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

 

 

大好評!7日間無料オンラインレッスン「楽リッチオンライン講座」の作り方
今だけ5大スペシャルプレゼント中

登録は↓をクリック!

この記事を書いている人 - WRITER -

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© 楽リッチオンライン講座の作り方 , 2020 All Rights Reserved.