こんにちは、ゆーすけです。
物販サイトを作っていて、詳細はこちらをクリック
なんていうボタンを見たことありますよね。
そのボタンがピコピコ動いたり、半透明になったりして
カッコイイなぁーと思いつつも技術的に出来ない＞＜
となっている人多いんではないでしょうか？
やり方は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を覚えたりするのは不要という人は以外に
多いけど、それはあくまでやり始めた初心者の
話です。
最初からいろいろなことを覚える必要はない
というだけであって知っていればそれだけ有利に
ことが運ぶこともあるのです。
アフィリエイトは総合格闘技のようなものなので
いろいろなネット技術を身につけることは損ではないですよ。
こんにちは・・・。
北海道より『良の助』と申します。
さすがですね・・・。
半透明のリンク、とっても勉強になりました。
ちょくちょく、寄らせて貰います。
宜しくお願いいたします・・・。
良の助さん＞
はじめまして、ようこそお出でいただきました。
勉強になられてよかったです＾＾
又お越しください＾＾
p.s.宣伝系のコメントは承認しないのでご遠慮願います。
下手にリンクしちゃうとすべてサイト飛んじゃいますからね。
ゆーすけさん( ﾟ∀ﾟ )ﾉたぬきちです
確かにキモイバナーだなー(笑)
色が赤なので個人的に指の所にウルトラマンがシュワ！って返信する画像を設置して
オンカーソルでウルトラマンが飛び出してくるで使うかも(笑)
ボタンひとつとっても、カスタマイズの楽しみ方ありますよねｗ
ブラウザの互換性がなければ、追記ひとつでいいんですけどね^^;
ブラウザ間の技術競争でもかなり今動きがあるみたいで
WEBkitベース以外に、新しい技術が導入されるようで・・
特に、Googleさんがそっちに以降する（crome）らしいです
またしてもサイト運営者泣かせの時代が近づいております（しくしく）
たぬきちさん＞
こんばんは、ゆーすけです。
いつもお世話になってます。
ｗ やっぱり＾＾；
あ、確かにそういう遊び方も出来きますね＾＾
CSSなどをちゃんと知ってれば楽勝♪
ホント互換性は大変ですよね。
でも前のIE6とかのころみたいなひどさではないから
まだいいかなって思いますが。
え！？新しい技術・・・。
もう辞めてクレェぇぇぇ
常に勉強あるのみですな。