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

関連記事

20214/24

使いやすそうなサイトを厳選!AIが顔画像を加工しているサイト6選

結婚式の集合写真で目をつむってしまったり、ネクタイが歪んでいたり、昔そういう写真の修正をしていたこともあります。また、少し痩せているように…

20214/16

オンライン上でかわいく写真加工してくれるサイト紹介するよ

スマホで写真加工する方も多いかと思いますが、私は断然PC派です。そんなPC派な方に、パソコンで作業するときに役立つ、オンライン上でかわいく…

20207/16

ファビコンの設定の仕方

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

20207/11

コロナで注目されている契約書 ネットで契約書を結ぶ時代【CloudSign – クラウドサイン】

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

20202/7

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

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

ページ上部へ戻る