トップページイラスト(ナナセミキ様作成)

イラストの情報はこちらから≫

Jimdo・みんビズカスタマイズ Jimdoの画像リンクに簡単にエフェクトをつける方法(透明度変更CSS)

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が設定されるので、幅の設定を行わなくても動作します。

参考サイト

参考サイトについては、もっと沢山調べたのですが、一番困ったのが「(特にブラウザ毎の設定について)サイト毎に記載してある内容が違う(AサイトとBサイトで内容が逆、等)」という事。
上記サイトは、その中でも非常にきちんとまとめてあり、大変参考になりました。

今回の記載については、特に最後の参考サイトをベースに用意しました。ありがとうございます。

設置対応行います(有償での対応になります)

上記の説明でも分からない!という方向けに、標準レイアウトに限り設置対応を行います。

一律○円!としたい所ですが、他ソース等の設置状況によりうまく動作しない場合は調査・修正の必要がありますので、サイト拝見した上で金額を提示させて頂きます。

※お支払(お振込)を確認した上で対応致します。
※独自レイアウトへの設置も可能ですが、他ソース等の設置状況によりうまく動作しない場合がございますので、調査・修正費用を含めた金額は高額になります。ご了承頂ける場合は、下記フォームのメッセージ欄に「独自レイアウトへの設置」を明記頂きご連絡ください。
サイトを確認の上、別途金額をご連絡致します。

コードを入力してください。:

メモ: * は入力必須項目です

▲このページのトップへ