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