この記事の所要時間: 136

image

 

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

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

 

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

 

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

 

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

 

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

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

 

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

 

SIRIUSの場合

1)テンプレート▼

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

3)styles.css内の81行目あたりにコピー&ペーストして保存

image

 

image

 

 

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

↓ ↓

syousai

 

【タグ】
<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;
透過度を0.5にしますよ。(0が完全に消える。100は変化なし)

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

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

 

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

 

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

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

 

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

 

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