フッター固定メニューを表示する(Really Simple Click To Call Bar)
スマホ画面のフッターに固定メニューを表示したいという要望は多いです。画面がスクロールしても消えずに固定で表示されるメニューです。footer.phpを修正してフローティングメニューを表示する方法もありますが、Really Simple Click To Call Barプラグインを使うと、テンプレートを修正せずに「お問い合わせはこちら」のようなフッター固定メニューを表示することができます。
![フッター固定メニューを表示したい](http://www.nishi2002.com/wp-content/uploads/2018/10/2018-10-06-12-46-52-1.png)
以下、Really Simple Click To Call Barプラグインの使い方を紹介します。
テンプレートをカスタマイズしてフッターにフローティングメニューを表示する方法について詳しくは以下のページも参考にしてください。
フッター固定メニューの表示
「プラグイン」‐「新規追加」メニューからReally Simple Click To Call Barプラグインをインストール、有効化します。
![Really Simple Click To Call Barプラグインのインストール](http://www.nishi2002.com/wp-content/uploads/2018/09/2018-09-06-10-42-57.png)
「設定」‐「Really Simple Click to Call Bar」メニューを開いてリンクの文字や色、電話番号などを設定します。
設定項目の内容
- Enable Click to Call --- 固定メニューが表示されるようになる
- Your Click to Call Message --- リンクの文字
- Your Click to Call Number --- 電話番号(ハイフンの有無はどちらでも)
- Click to Call Text Color --- リンクテキストの色
- Click to Call Background Color --- 背景色
リンクを表示するには「Enable Click to Call」をチェックします。
設定イメージは次のようになります。
![フッターメニューの設定](http://www.nishi2002.com/wp-content/uploads/2018/10/2018-10-06-12-41-18.png)
「変更を保存」ボタンをクリックすると設定完了です。これで、幅736pxまでの端末にフッター固定メニューが表示されるようになります。
![フッター固定メニューが表示される](http://www.nishi2002.com/wp-content/uploads/2018/09/2018-09-06-11-02-03.png)
フッター固定メニューのカスタマイズ
カスタマイズ方法はアイデア次第ですがCSSを記述してボタン風に加工することもできます。
![フッター固定メニューをボタン風にカスタマイズ](http://www.nishi2002.com/wp-content/uploads/2018/10/2018-10-06-12-46-52.png)
使用したCSSは次のとおりです。子テーマのstyle.cssまたは「CSSカスタマイズ」などのメニューに入力してください。
/* フッター固定メニューのスタイル */ body #click_to_call_bar { width: auto; left: 50%; bottom: 5px; transform: translate(-50%); white-space: nowrap; padding: 0 10px; border: 4px double #fff; border-radius: 8px; font-weight:bold; }