Word Pressで画像や文字にリンクを貼ったりするかと思います。
その時、私が困ったのが…
管理人
リンク貼れたのはいいけれど、リンクの有無がわかりにくい。
他のサイトとかは、少し凹んだり、画像が半透明になったり
「ここはリンクだよ」って、動きで表現されていてわかりやすい。
…どうやってそういう風に設定するんだろう？
マウス（ポインター）をリンクがついているところの上に持って行っても、動きなし。
これでは、アクセスしてくれた人にもわかりにくく、残念なサイトになってしまいます。
この記事を読めば、誰でも簡単に、リンク付きの画像や文字が動くようになります！
設定方法① リンクがついているところを凹ませる
Word Pressの「CSS」にコードを貼り付けます。
Word Press 「外観」→「データエディター」をクリック。
スタイルシートが表示されるので、一番下に以下のコードを入力してください。
/*マウスオーバーでリンクを凹ませる*/
a:hover{position:relative;top:2px;left:2px;}このコードをいれると、リンク付きの画像や文字が、下の文字のように動きます。
テスト → リンクがついているところが凹む
設定方法② リンクがついているところを透過させる
これだけだと寂しいので、画像を透過させる設定もしてみましょう。
同じスタイルシートの一番下に、以下のコードを入力してください。
/*マウスオーバーでリンクを透過させる*/
a:hover img{opacity:0.5;filter:alpha(opacity=50);-ms-filter: “alpha( opacity=50 )”;}すると、リンク付きの画像が下の図のように動きます。
どうでしたか？ 簡単に設定ができたかと思います。
これで、閲覧者にとってわかりやすいリンク設定ができました。
コメント