 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
本年もよろしくお願い致します。
2014年最初のデザイン道場は、ご自身で自由記入欄やhtml利用可能エリアに挿入されたリンクバナー画像のマウスオーバー時の色変更についてです。
マウスオーバー時に透明にすることで、色を薄くします。
※適用される画像は、<a>タグにてリンクが設定されている画像となります。
 |
|
 |
 |
 |
 |
自由記入欄等に設定されたhtmlタグに下記のように<div>タグを追加してください。
バナー画像を<div class="imgalpha">～</div>で囲んでください。
同様に別の画像でも<div class="imgalpha">～</div>で囲んでいただくことで同様に適用させることが可能です。
<a href="リンク先"><img src="http://cafe0808.ocnk.net/data/cafe0808/image/top_bn.jpg" width="500" height="333" alt="バナー" border="0" /></a>
<div class="imgalpha">
<a href="リンク先"><img src="http://cafe0808.ocnk.net/data/cafe0808/image/top_bn.jpg" width="500" height="333" alt="バナー" border="0" /></a>
</div>
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面に下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
.imgalpha A:hover {
-moz-opacity:0.8;
opacity:0.8;
filter: alpha(opacity=80);
}
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.