gifアニメを使わずに、画像を半透明にする方法｜CSS opacityを使ってみる

 

こんにちは、ゆーすけです。

物販サイトを作っていて、詳細はこちらをクリック
なんていうボタンを見たことありますよね。

 

そのボタンがピコピコ動いたり、半透明になったりして
カッコイイなぁーと思いつつも技術的に出来ない＞＜

 

となっている人多いんではないでしょうか？

 

やり方はCSS（カスケード・スタイル・シート）と呼ばれる
HTMLのデザイン担当部隊がそれを実行してくれます。

 

次の命令文をCSSのところに入れておこう

次の文字列をCSSの中にコピペするだけです。

 

a:hover img {
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}

 

SIRIUSの場合

１）テンプレート▼

２）スタイルシート編集(Ctrl+W)

３）styles.css内の８１行目あたりにコピー＆ペーストして保存

 

 

 

これでリンクを貼られた画像はHTML上で半透明になります。

↓ ↓

 

【タグ】
<a href=”https://kisokara-kasegu.com/” target=”_blank”><img title=”syousai” border=”0″ alt=”syousai” src=”syousai.jpg” width=”600″ height=”100″ /></a>

 

（ちょっと気持ち悪いボタンでスミマセン；；）

CSSの解説

多くの人はコピペでOKですが、
勉強したい人のために解説を書いておきましょう。

 

(1)a:hover img {
aというタグ（リンクが貼られている）の上に
マウスを置いた(hover)イメージファイル（img)は

(2)opacity: 0.5;
透過度を０．５にしますよ。（０が完全に消える。１００は変化なし）

(3)filter: alpha(opacity=50);
IE専用の命令で、(2)と同じ意味

(4)-moz-opacity: 0.5;
}
FireFox専用の命令で、(2)と同じ意味

 

注意点は古いブラウザでは対応してないという点

 

アフィリエイトは総合格闘技

アフィリエイトをするのにhtmlを覚えたり、
CSSを覚えたりするのは不要という人は以外に
多いけど、それはあくまでやり始めた初心者の
話です。

 

最初からいろいろなことを覚える必要はない
というだけであって知っていればそれだけ有利に
ことが運ぶこともあるのです。

 

アフィリエイトは総合格闘技のようなものなので
いろいろなネット技術を身につけることは損ではないですよ。