スマホ画面下部に固定された電話ボタンとお問い合わせボタンを配置する方法

2023-10-15 by スキマデザイン

今や、ホームページ、WEBサイトの「スマホ最適化」は必須です。
お客様にスマホでご自身のホームページを見てもらい、気に入ってもらえたらすぐにお問い合わせできるように、画面に「電話ボタン」や「お問い合わせボタン」を常時固定できたらいいですね。
今回はその方法をできるだけ簡単にコピペで実装できるように解説していきます。

前提条件

・WordPressのサイトであること
・bootstrapでのレスポンシブ構築であること

電話とお問い合わせのバナー画像

電話とお問い合わせのバナー画像を作成しアップロードします。
表示させたいサイズの倍で作成すると高解像度ディスプレイでもぼやけなくていい感じです。

HTML記述

WordPressのfooter.phpの任意の場所に記述します。（</body>上など）

src=""に先ほどアップロードした画像のURLを記述します。

<div class="container smpfix">
<div class="row">
<div class="col-6">
<a href="tel:00000000000" alt="電話番号"><img src="" alt="スマホ電話バナー" /></a>
</div>
<div class="col-6">
<a href="#" alt="お問い合わせ"><img src="" alt="スマホメールバナー" /></a>
</div>
</div>
</div>

CSS記述

div.smpfix {
position: fixed;
bottom: 0;
max-width: 100%;
}

/*スマホよりも大きい端末で閲覧中は非表示*/
@media screen and (min-width:769px) {
div.smpfix {
display:none;
}
}

以上になります。