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

Luxeritasボタンサムネイル

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

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

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

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

ボタンの挙動

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

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

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

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

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

これは、テーマが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が既にあるかどうか分からなかったときは、とりあえず追記してみて、挙動が変になるようなら削除してください。

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

あとがき

以上で、ボタンの挙動の設定方法の紹介は終了です。

私はトップページのボタンの挙動が少し気に入らなくて、今回の方法を調べたのですが、結構大変でした。

完成し終わった後ならなんでもないCSS文なのですが、0から考えるとなると骨が折れます。。。(笑)

クラス名を複数付けるというのが盲点でした。

今回のも、皆さんのはてなを少しでも解決できれば幸いです。

よろしければ左下のweb拍手をしていってください!

それでは今回はこの辺で

またいつか

1

Posted by 隠家 くろ