※この記事にはプロモーションが含まれています
![ワードプレスでフッターCTAを設置する方法<基本編>](https://zoroya.co.jp/wp-content/uploads/2020/10/footercta-1.png)
サイトの構成、デザインにもよりますが、フッターCTAというのは導線上、有効です。
人はわがままですから、質問したい時に質問したいのです。
電話で聞いてみたいと思った時、連絡先を探すようではだめですね。
その瞬間に行動を起こせるようにしておかないと。
画面の下に固定表示しておけば、機会を逃しません。
それがフッターCTA(Call to Action)。
正式には「フローティングメニュー」といいます。
目次
フッターCTA(フローティングメニュー)の設置方法
たとえば、下記のような画像を画面下に固定表示するとします。
![](https://hico2019.com/wp-content/uploads/2020/11/floatingmenu.png)
まず、その画像を「メディア」にアップロードします。
![](https://hico2019.com/wp-content/uploads/2020/11/1-1024x287.jpg)
アップロードした画像のURLを控えておいてください。
URLは、メディア選択画面でアップロードした画像の詳細を見ると「ファイルのURL」というのがありますが、そのアドレスです。
HTMLの記述
次に、フッター(footer.php)のbodyタグの前に下記のようなHTMLを入力します。
<div id="footerFloatingMenu">
<a href="#"><img src="画像のURL"></a>
</div>
これだけではまだ、表示されません。
cssの入力が必要です。
style.cssあるいは、カスタマイズ編集画面の追加cssなどに下記のコードを記載します。
#footerFloatingMenu {
display: block;
width: 100%;
position: fixed;
left: 0px;
bottom: 2px;
z-index: 9999;
text-align: center;
padding: 0 auto;
}
これで、先ほどの画像が画面トップ下に固定表示されるようになります。
あわせて読みたい![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://zoroya.co.jp/wp-content/uploads/2020/11/footercta-2-300x158.png)
ワードプレスサイトでフッターCTAを設置する方法<応用編> サイト制作において、フッターCTA(Call to Action)あるいはフローティングメニューを設置するのはユーザーの利便性を考えると、有効です。 基礎的な設置方法は下記の記…