リンクの設定されている画像やテキストをマウスでポイントした時に変化させる方法

リンクが設定されている画像やテキストの上に

マウスを乗せた時にヒョコっと動かしたり、

白っぽく色が変わるのってカッコイイですよね。

簡単にカスタマイズできるのでやってみましょう！

（賢威6.2のヘルシー版を使用しています）

 

ヘッダー部分やグローバルメニューなど部分ごとに
設定することもできるのですが、

今回は、より簡単にをモットーに
シンプルにサイト全体を一括で設定します。

 

それでは、レッツカスタマイズです。

 

ワードプレスの管理画面から
外観→テーマ編集をクリックします。

 

 

 

 

画面を下にスクロールしていくと右側に
スタイルシートという文字の下にある

 

design.css（でざいん　どっと　しーえすえす）と
いう項目をクリックします。

 


 

 

 

 

 

 

プログラムコードの１番下に
このタグをコピペで貼り付けましょう。

a:hover{ position:relative;top:3px ;left:3px; opacity: 0.6; }

 

簡単な作業ですがdesin.cssの内容をメモ帳などに
コピーするなど必ずバックアップをとってから作業しましょうね。

 

バックアップの習慣をつけておけば必ず

「よかった！」と  　（；^ω^）

思える時がやってきますので

 

どうでしょうか？うまく動いていますか？

 

ちなみに、
３pxという部分が動く量を指定していますので
数字が大きくなれば動きも大きくなります。

自分の好みを探してみてください。

また、
0.6という数字が小さくなるほど透明度が高くなり
より光ったようになりますので

こちらもお好みで調節してみてください。

いつもあなたを応援しています。
最後まで読んで頂きありがとうございました。