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

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を記述しました。
ディスカッション
コメント一覧
まだ、コメントがありません