TCDのWordPressテーマ「Grider」をカスタマイズふわっと白く変化するHover

Memu

facebook
search button
検索ボックス

201710/4

TCDのWordPressテーマ「Grider」をカスタマイズ　ふわっと白く変化するHover

TCDのWordPressテーマにはいつもお世話になっております。
なかでも、「Grider」が気に入って、かれこれ4年使用させて頂いています。
ありがとうございます(*^^*)

気に入っているテーマですが、レスポンシブに対応していなかったり、リンク部分のHoverのエフェクトが今風ではなかったりして、そろそろテーマを変更する時期かしらと考えていました。
GRIDデザインが気に入っていたので、同じGRIDデザインの「FOCUS」というテーマがいいかな？　　・・・なんて

詳細はこちら：WordPressテーマ「FOCUS (TCD030)」

でも・・・やっぱりこの長年使っている「Grider」が好きっ！(T-T)

ということでｗ　
まずはHoverのエフェクトをカスタマイズしていくことにしました。

WordPressのカスタマイズはCSSを直接編集しない

テーマのカスタマイズをする前に、プラグインをインストールしましょう。
理由は、CSSファイルを直接編集すると、テーマの更新が行われたとき上書きされてしまうので、せっかくカスタマイズしても元通りになってしまうからです。
それを防ぐために、更新のときに影響が出ないようCSS編集できるプラグインから、編集するようにします。

これポイントです！

おすすめのプラグインはこちら。

・JetPack
・Simple Custom CSS

私は「JetPack」を使用しています。

CSS編集だけでなくいろいろな機能もついてくるプラグインで結構重宝していますが、いろいろ機能を増やしたくない、CSS編集だけの機能が欲しいという方には「Simple Custom CSS」をおすすめ致します。

カーソルを乗せたときにふわっと変化させたい！

この表現分かるかなぁ・・・
カーソル乗せたときにパッとすぐに色が変わったり下線がつくんじゃなくて、ふわっとしたいんですよね。
カテゴリのボタンやその他のリンク部分、すでにカスタマイズしていますので、ふわっと変わる感じを体感して頂けたらと思います。

ね？　違うでしょ？
今っぽいでしょｗ

施したCSSはこちら

#side_category ul li a {
    backface-visibility: hidden;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

#side_category ul li a:hover{
opacity: 0.7;
-webkit-opacity:  0.7;
-moz-opacity:  0.7;
filter: alpha(opacity=60); 
}