【WordPress】マウスで触れるとリンク文字や画像がちょこっと動くタグ

今回はウェブサイトの装飾として、
マウスで触れたときにリンクの貼られた文字や画像が
ちょこっと動く視覚効果のあるタグを紹介します。

マウスで触れるとちょこっと動くCSSタグの設置方法

(今回のページの画像にはあえてちょこっと動くタグを仕込んでいるので、マウスで触れて確かめてみてください)

では具体的な作業手順です。
下記の枠内のタグをコピーします。

a:hover { top:1px; left:1px; position:relative; }

WordPressの「外観」→「テーマの編集」から
目的のCSSを探します。

サイト全体の共通設定の項目を探します。
下記赤枠を参照してください。
「a ：hover～」という部分に先ほどのタグを貼り付けます。

以上で設定完了です！

役立つ豆知識

a：hover～というのは、「マウスを乗せたら～」という指示なので、
今後、マウスを乗せたときの効果を狙う場合は
この意味を憶えておくと非常に便利ですよ。

スポンサードリンク