【Luxeritas以外でも出来る】初心者も簡単！ボタンのマウスホバーの設定方法

2019年11月11日

皆さんこんにちは。隠家くろ（@kakurekuro）です。

ブログを書く際に、ワードプレスや他のエディタでボタンを設置したことはありますか？

今回はそのボタンについての記事です。

細かい点かもしれませんが、誰でも簡単にできますので、是非試してみてください！

1. ボタンの挙動
2. 実際の設定方法（Luxeritasユーザー向け）
3. Luxeritasユーザー以外での設定方法
4. あとがき

ボタンの挙動

まず、皆さんがご自分で使っているエディタでは、ボタンがどのように挙動するのかを確かめてください。

例えば、私が使っているLuxeritasというテーマでは通常、下のような挙動をします↓

ボタンだよ☆

個人的に気に入らなかった点は、最初からボタンの文字に下線が入っていることです。

ボタンかどうか分かりにくいため下線を入れていると思うのですが、自由に消したりできないのが難点でした。

これを、下のようにマウスがボタンに触れたときにだけ、下線と色が変わる仕様にすることが出来ます↓

　　新しいボタンだよ！　　

これは、テーマがLuxeritasに限らず出来ることなのでご安心ください！

実際の設定方法（Luxeritasユーザー向け）

実際の設定方法です。

まず、Luxeritasの投稿ページで、ブロックエディタのボタンを選択します↓

ボタンのリンク先や文字、色などを好きにカスタマイズします。

デザインが終わったらHTMLでそのボタン要素を表示してクラス名を追加します。

クラス名を追加する箇所は　<a class="　の後にある　has-background　に半角スペースを空けて好きな文字を入れてください↓

画像では、kokonikurasumeiと入れている場所です。

次は子テーマを編集します。

画面左のLuxeritasから「子テーマの編集」をクリックしてください↓

子テーマに最初から記述されている文は消したりしないようにしてください。

正常に動作しなくなる可能性があります。

子テーマに以下のコードを追記します↓

/* ボタンリンクの下線消去　マウスホバー処理 */
a.kokonikurasumei   {          /*上で設定したクラス名と同じにするように*/
	text-decoration:none;  /*ボタン内の文字の下線消去*/
}
a.kokonikurasumei:hover { 
	text-decoration:underline;  /*ボタンにマウスが重なった時に下線を表示する*/
	color:#faff00;              /*色の指定（任意に変更してください）*/
}

kokonikurasumei:hover　はスペースを入れずに記載してください。

スペースがあると、上手く動かなくなるので注意です。

以上で、設定は完了です。

先程投稿ページで作ったボタンをプレビューしてみると、挙動が変わっていると思います。

Luxeritasユーザー以外での設定方法

このボタンの設定はLuxeritasを使っていなくても可能です。

その場合は、ボタンをHTML記述で作成する必要がありますが、サルワカさんの記事を参考にすれば、だれでも作れるのでおすすめです。

サルワカさんのボタンを作成する際に、CSSを記述すると思うのですが、そのときに以下のコードも一緒に追記すると先程のような挙動を追加することが出来ます↓

/* ボタンリンクの下線消去　マウスホバー処理 */
a.クラス名   {          　　　　　　　/*サルワカさんで設定してあるクラス名と同じにするように*/
	text-decoration:none; 　　　 /*ボタン内の文字の下線消去*/
}
a.クラス名:hover {      　　　　　　　/*hoverが既にあるときは、hoverの中に追記しても良い*/
	text-decoration:underline;  /*ボタンにマウスが重なった時に下線を表示する*/
	color:#faff00;              /*色の指定（任意に変更してください）*/
}

hoverが既にあるかどうか分からなかったときは、とりあえず追記してみて、挙動が変になるようなら削除してください。

また、サルワカさんの元々のボタンの挙動と上手く共存できない可能性もあるので、そのときも上のコードを削除してください。