簡単で効果的なCSS

技術情報

HTMLも未だよく分からないのにCSSなんて・・・

この様な方は多いのではないでしょうか。

そんなあなたのために、ものすごく簡単で、ものすごく効果的なCSSをご紹介します。

先ずは、どうにかしてCSSファイルに辿り着いてください。(FTPを使用しない方はWordPress管理画面の外観⇒テーマの編集からstyle.cssを選択すると良いです)

そうしたら、cssファイルのどこかに、次のおまじないを記入してください。

a img { opacity: 1.0; }

a img:hover { opacity: 0.8; }

少し説明すると、”a”と云うのはアンカーのことでリンクの貼ってあるHTML記述のことです。”img”はお察しの通り画像表示を行うHTML記述のこと。

つまり、”a img”でリンクの貼ってある画像という意味になります。

次に、”a img:hover”ですが、”:hover”はマウスカーソル(マウスの位置を示すマークなど)が対象の場所に乗ったらと云う意味です。hoverはホーバークラフトのホーバーです。何かの上に浮かぶという意味らしいです。

ですから、”a img:hover”は、リンクの貼ってある画像の上にマウスカーソルが乗ったら・・・ということになります。

次に、”opacity”ですが、これは透明度を表します。1.0が完全に不透明(通常)、0.0が完全透明を意味します。

ですから、上記のCSSは、リンクの貼ってある画像の通常は完全不透明で上にマウスカーソルが乗ったら不透明度を80%(少しだけ透明)にしなさいという記述になります。

これを書くだけで、あなたのホームページの全てのリンク付き画像に適応されます。(特別なことをしてない限り・・・)

どうですか、画像を選択したことが明確になって、ちょっと高級感が出たと思いませんか?

お試しください。

«
»
  • LINEで送る

音声ミュートを解除すると軽快な音楽が流れます (^^♪