2020/05/13

メモ：フッター固定でボタンを設置する【電話／メール／LINE他】

WORDPRESS

本記事は、フッター固定でボタンを設置する方法のメモページです。具体的には、「電話」「メール」「LINE」などのボタンを設置するためのHTMLとCSSのソースコードとです。

メモ：フッター固定でボタンを設置する【電話／メール／LINE他】

設置参考イメージは、上記画像のとおりです。

編集箇所

footer.php
style.css

footer.php

<!-- FOOTER BANNER -->
<div id="footer_mail">
	<div id="footer_mail_box">
		<p style="margin-bottom: 4px; font-weight:bold; color:#505050;">【アクセスUP】ブログ書き方テンプレ請求</p>
		<input class="btn-blog2" type="button" name="" value="LINEで相談" onClick="location.href='https://line.me/ti/p/9dHUQH0ocQ'">
		<input class="btn-blog3" type="button" name="" value="Zoomで相談" onClick="location.href='https://01blog.org/30-minutes-consultation/'">
		<input class="btn-blog" type="button" name="" value="資料請求する" onClick="location.href='https://nakazononorifumi.net/btml/'">
	</div>
</div>

style.css

/*フッター固定ボタン*/
#footer_mail{
	display: block;
	opacity: 0.92;
	background-color:#E3F6FF;
	width: 100%;
	position: fixed;
	bottom: 0;
	padding: 10px 15px;
}

#footer_mail_box{
	text-align:center;
}

.btn-blog{
	height:34px;
	color: #FFFFFF;
	background: #FC5C63;
	border-style: none;
	border-radius: 4px;
	font-weight: bold;
}

.btn-blog2{
	height:34px;
	color: #FFFFFF;
	background: #39AE36;
	border-style: none;
	border-radius: 4px;
	font-weight: bold;
}

.btn-blog3{
	height:34px;
	color: #FFFFFF;
	background: #0092D5;
	border-style: none;
	border-radius: 4px;
	font-weight: bold;
}

以上です。

参考記事

フッター固定でメールフォームを設置する場合は、下記記事をどうぞ。

稼げる「無料ブログ勉強会」

朝５時〜 or 夜９時〜の時間帯で「ブログ運営の基礎」が無料で学べます。「Zoom」を利用して開催しますので、ご自宅からご参加可能です😌

参加者限定の特典があります

参加特典は「６０分の個別相談」＆「９８０円で販売しているブログ企画室に無料ご招待」なので、お得感満載で結構学べると思います。

嬉しいお声をいただいております