Jimdo以外でも利用可能 画像に簡単に半透明エフェクトをつけるCSSです
Jimdoのサイト制作でリンクや拡大表示の設定のある画像にマウスカーソルをのせた際、エフェクトをつける必要があったのでCSSを制作しました。
便利なコードですので早速本サイトにも設置。マウスカーソルが画像の上にのった場合、画像の「透明度」が変更されます。
簡単に設定できるソースですので、設置方法を紹介。ご活用ください。
現時点でIE6~9、Firefox、Google Chrome、Safariで動作確認をしております。
ソースの設置方法
標準レイアウト・スペシャルレイアウトに設置する方法
Jimdoにログイン後、管理メニュー(右側に表示されるアイコン一覧)から「設定(歯車のアイコン)」をクリック後、メニューから「ヘッダー部分を編集」をクリックし、下記ソースを貼り付けてください。
コピペする際は、コピー後一度「メモ帳」に貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます(以下コードです)
/* リンク付画像マウスオーバー時透明度変更
(Jimdoの「ヘッダ」部分に追記用)
----------------------------------------------- */
<style type="text/css">
a:hover img
{
filter:alpha(opacity=70); /* IE7以下用 */
-ms-filter: "alpha(opacity=70)"; /* IE8用 */
-moz-opacity:0.7; /* Firefox 1.5未満, Netscape用 */
-khtml-opacity: 0.7; /* Safari 1.x, 他khtmlに対応したブラウザ用 */
opacity: 0.7; /* Firefox 1.5以上, Opera, Safari用 */
}
</style>
独自レイアウトに設置する方法
Jimdoにログイン後、管理メニュー(右側に表示されるアイコン一覧)から「設定(歯車のアイコン)」をクリック後、メニューから「レイアウト」をクリックし、「独自レイアウト」内「CSS」に下記ソースを貼り付けてください。
コピペする際は、コピー後一度「メモ帳」に貼り付けてから作業すると「余計なコード」が表示されずにうまく貼り付けることができます(以下コードです)
/* リンク付画像マウスオーバー時透明度変更
(独自レイアウトで設置用)
----------------------------------------------- */
a:hover img
{
filter:alpha(opacity=70); /* IE7以下用 */
-ms-filter: "alpha(opacity=70)"; /* IE8用 */
-moz-opacity:0.7; /* Firefox 1.5未満, Netscape用 */
-khtml-opacity: 0.7; /* Safari 1.x, 他khtmlに対応したブラウザ用 */
opacity: 0.7; /* Firefox 1.5以上, Opera, Safari用 */
}
コードを設置すると、Jimdoページ内のリンク及び拡大表示を設定してある画像にマウスカーソルをあわせた際、画像の透明度が変更されます。
ソースの解説
数字の「70」や「0.7」部分が透明度の数値です。
数値が小さいほど、画像が透明になります。お使いのサイトにあわせて調整してください。
ブラウザによってソースが異なりますので、上記ソースを全て記載してください(環境によっては、上記ソースを全て記載しても動作しない場合があります)。
本コードを設置する際、画像の「幅(width)」を設定しないと動作しない場合があるのですが、Jimdoは画像を設置するだけで自動的にwidthが設定されるので、幅の設定を行わなくても動作します。
参考サイト
CSS3リファレンス「opacity」|HTMLクイックリファレンス
画像の透明度を変化させる:CSS小技|ブログが作りたい!
デザインに使えるちょっとしたCSSのスニペットいろいろ|Webデザインレシピ
参考サイトについては、もっと沢山調べたのですが、一番困ったのが「(特にブラウザ毎の設定について)サイト毎に記載してある内容が違う(AサイトとBサイトで内容が逆、等)」という事。
上記サイトは、その中でも非常にきちんとまとめてあり、大変参考になりました。
今回の記載については、特に最後の参考サイトをベースに用意しました。ありがとうございます。
設置対応行います(有償での対応になります)
上記の説明でも分からない!という方向けに、標準レイアウトに限り設置対応を行います。
一律○円!としたい所ですが、他ソース等の設置状況によりうまく動作しない場合は調査・修正の必要がありますので、サイト拝見した上で金額を提示させて頂きます。
※お支払(お振込)を確認した上で対応致します。
※独自レイアウトへの設置も可能ですが、他ソース等の設置状況によりうまく動作しない場合がございますので、調査・修正費用を含めた金額は高額になります。ご了承頂ける場合は、下記フォームのメッセージ欄に「独自レイアウトへの設置」を明記頂きご連絡ください。
サイトを確認の上、別途金額をご連絡致します。
コメントをお書きください