はじめに
私は現在、wordpressでブログを運用し、「ザ・トール」というテーマを使用しています。
このテーマは多機能でCSSの知識が無くても、自分の好みのデザインが作れるというのが魅力の一つでした。
しかし、購入して思ったのが、どんなに多機能でデザインを細かく自分でカスタマイズできるテーマを選んでも、細かい所で「この部分を修正したい」「このようなデザインを作りたい」というのが少なからず出てくると思います。
今日は別のテーマを使用している方でもカスマイズできるようにご説明していきます。
今回のカスマイズ箇所は画像のホバーエフェクトです。
ホバーエフェクトとは
上の動画のようにカーソルを画像の上にもっていくと、大きさが変わったり、 画像の色が変わったりするのがホバーエフェクトです。個人的に写真にリンクがないのに、画像に効果を付けるのは必要のないデザインだと思うので、ホバーエフェクトをなしに修正していきます。
カスタマイズ方法
【無音】カスマイズの大まかな流れ
①自分の修正したいサイトを開く。
②「右クリック」→「検証」or「要素の検索」をクリックして、「デベロッパーツール」を起動する。
⇒今回使用しているブラウザーは「Firefox」です。「検証」のボタンはありませんので、「要素の検索」をクリックします。
③デベロッパーツールで「要素の選択」ができるようにする。
④カスマイズしたい箇所をクリックする。
→今回の場合、ホバーエフェクトの画像をクリックします。
⑤変更したい箇所のCSSをコピペする。
→デベロッパーツール上でカスマイズして、コピペでも大丈夫です。
⑥「追加CSS」にコピペしたものを張り付け、CSSを修正する。
どの部分を修正するかの名前を書きます。それぞれのテーマや修正する場所によって名前が違いますので、デベロッパーツールで調べてください。
修正する箇所の名前を指定できたら、後はその｛ ；｝の中を変更して、好きなようにカスマイズしてください。以下を参考にしてみてください。
参考 【CSS】transformの使い方を解説！要素の変形や回転も自由自在
今回は「 ｛transform:scale(1.2);} 」→「 ｛transform:none;} 」に変更しました。
⑦「公開」ボタンを押す