「Stinger3カスタマイズ」続きを見るの上にマウスを置いたら変化するようにしてみた

こんにちは。Leewayです。今回もWordPress無料テーマである、Stinger3のカスタマイズ記事です。

どこをカスタマイズしたかというと、「続きを読む」ボタンです！トップページなどにある「続きを読む」ボタンにマウスを置いてみてください。

じんわりと大きくなるのがわかりますか？カッコイイと思ったそこのあなた！スゴーク簡単なので、ぜひカスタマイズしてみてください。

カスタマイズ前にバックアップは必ず行ってくださいね。オネシャス！

では、Stinger3の「続きを読む」ボタンのカスタマイズ方法を紹介していきたいと思います。

Stinger3カスタマイズ手順

１．修正するファイルを開く

ファイル名：style.css

「style.css」をテキストエディタで開きます。

２．検索する

「style.css」から「.motto a {」＆「.motto a:hover {」という記述を探す。

[.motto a ]が、通常の「続きを読む」ボタンの状態を表している部分で、「.motto a:hover」が、マウスを置いたときの状態を表す部分になります。

３．修正しよう！

こちらがソースコードです。

■.motto a {

.motto a{
/*元々ある記述*/
/*下記の３行を追加する*/
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}

■.motto a:hover{

.motto a:hover{
/*元々ある記述*/
/*下記の４行を追加する*/
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}

scale(1.2, 1.2);の数字を大きくすればするほど、マウスを置いたときのボタンが大きくなります。

いろいろ試して、１番しっくりくる値にしてみてはいかがでしょうか。

Stinger3カスタマイズまとめ

以上で修正は完了です。お使いのStinger3かっこよくなったでしょうか。

未だに少しづつStinger3をカスタマイズしております。

カスタマイズが一段落したらStinger3カスタマイズ記事をまとめたいと思います。