WordPressテーマ「Grider (tcd015)」

WordPressテーマ「Canvas (tcd017)」

WordPressテーマ「Chill (tcd016)」

© STUDIO-colorz All rights reserved.

201710/4

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

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


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


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


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

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


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

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

これポイントです!

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


おすすめのプラグイン

・JetPack
・Simple Custom CSS


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

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


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

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

ね? 違うでしょ?
今っぽいでしょw


施したCSSはこちら

transitionを使って時間を遅らせて反応することで、ふわっと変化するエフェクトを表現できます。
ぜひお試しあれ♪

PS:TCDのWordPressテーマ「Grider」はコチラから購入できます。






null

関連記事

20202/7

WEBデザイナーさん必見! おすすめのポートフォリオ【無料WordPressテーマ】

WEBデザイナーさんが自分の作品を見せる時に、 ポートフォリオがまとめられたら見やすいですよね。 私が使ったことのあるテーマから、これか…

20202/5

ファビコンの設定の仕方

「https」に変更してから、ファビコンも表示されなくなったので、 再設定しようといろいろ調べてたら・・・ ひゃだ! めちゃ簡…

20202/3

【SSL化対策】WordPressのURLを「http」から「https」に変更する方法

SSL化対策、今までやってなかったんですよね。 なんか面倒くさくって・・・ でもね、セキュリティ面を考えてもねやったほうがいいんだな…

20202/1

ネットで契約書を結ぶ時代【CloudSign – クラウドサイン】

今日は私がお世話になっているオンライン契約書をご紹介致します。 フリーランスでお仕事をする場合、 お金が絡んできますので欠かせな…

20199/9

【WordPress】プラグインのアップしたら「Parse error」が出たし

げ!!!!! プラグインアップしたらサイト真っ白だし!!!!! Parse error: syntax error, unexpec…

ページ上部へ戻る