アメブロ CSS 編集用デザインで アメブロを遊ぼう!②リンクの色に変化をつける

ポインターがリンクに触れると動く方法を紹介しましたが、
リンクを動かす方法には欠点がありました。

「>>次へ」のリンクが異常に動くんですねヽ(´Д`;)ノ

 

どんなに為になる情報を配信していたとしても、これではブログ訪問者の方にストレスを与えてしまいます。

そこで提案したいのが、「リンクの色に変化を付ける方法」です。

CSS編集画面に移動しましょう。

デザイン変更ではCSS編集用デザインを選ぼう!

「デザインの変更」→「CSSの編集」CSS編集画面に移動しましょう。

 

CSS編集画面の下の方に移動です。

動くリンク為のCSS編集同様、

これを入力するとリンクの色が薄くなりますよ

/* その他、拡張があれば記述 */
の下に以下を記述します。

 


/*↓これを入力するとリンクの色が薄くなります*/
a:hover img { filter: alpha(opacity=60); -moz-opacity:0.6; opacity:0.6; }


 

この2行をコピペしたら「保存」をクリックしてください。

これでリンクの画像の色が薄くなるようになりましたヽ(*´∀`)ノ

 

実際にブログをチェックしてみよう

リンクボタン

リンク先のタイトル

リンク先の説明文

リンク画像の色は薄くなるので、
「これはただの画像ではなく、リンク画像だ!」
と思ってもらえるようになりましたね。

 

そのかわり、画像以外は普通の状態です。

リンクが動きすぎて「>>次へ」が使えない状態になるくらいならこれくらいの方が良いのかもしれません。

 

数値を変えると色の濃さを変える事が出来るので試してみてください。


アメーバキング2について