【Luxeritas】問い合わせボタンの作成と設置方法について

2019年4月22日2019年5月13日

Luxeritasでの問い合わせボタンの作成と、その設置方法について解説します。
今回、問い合わせボタンの作成はHTMLとCSSで行います。

どのテーマであれ、HTMLとCSSのコード自体は変わりませんので、
「どこに記述するか」に注目していただければよいかと思われます。

完成イメージ

問い合わせボタンのイメージは以下の通りです。シンプルな構成です。

HTMLコードの挿入

「ウィジェット」⇒「（サイドバータイプ）」⇒「ウィジェットを追加」で自由に記述できるウィジェットが追加されます。

追加した欄を選択し、「テキスト」タブをクリックすると、テキストタイプで入力できます。

テキスト欄に以下のHTMLコードを記述します。

<div class="mailbox">
	<a href="#">
		<span class="mailform">
			<i class="fas fa-envelope"></i>お問い合わせ
		</span>
	</a>
</div>

自分宛のアドレスでメールソフトを立ち上げるようにしたい場合、href属性に対して以下のように入力します。

<a href="mailto:hogehoge@hoge.com">

以上で基本的な要素を記述できました。次にCSSで装飾を行います。

CSSコードの挿入

ダッシュボードから、「外観」⇒「テーマの編集」を選択します。
扱うスタイルシートは子テーマのスタイルシートですので、ご注意ください。

以下のCSSコードを記述します。

/*サイドバー問い合わせ欄*/
#side .mailbox {
	text-align:center;
	padding:10px;
}
#side .mailbox :hover{
	opacity:0.7;/*透過率変更*/
}
#side .mailbox a{
	text-decoration:none;
	color:#000;
}
#side .mailform{
	background-color:#EEEEEE;
	padding:5px 10px;
	border-radius:5px;
	font-weight:bold;
}

#sideを入れるかどうかはお使いのテーマにより異なるかと思われます。

今回、使用テーマがLuxeritasであること。及びサイド部分に設置することを想定する為、#sideを記述しました。