QHMの新世代のホームページ作成ソフト|簡単と安心で初心者に高評価、比較して見て下さい。

マウスオーバーでリンク画像を半透明にさせる方法|QHMユーザーの為のカスタマイズ

マウスオーバーでリンク画像を半透明にさせる方法




リンク画像に、カーソルを乗せた時に画像を半透明にさせることができます。
ロゴ、ナビ、メニュー、ナビ2、コンテンツの画像に適用されます。




リンク画像を半透明にさせる

下記のタグコードを、記述することで画像を半透明にさせることができます。

「opacity:0.70;」「filter: alpha(opacity=70);」の数字を変更することで、
不透明度数を変えることが出来ます。

0になるほど透明になり、100になるほど不透明になります。

コード

//マウスオーバー
#beforescript{{
<style type="text/css">
<!--
a:hover img{
opacity:0.70; /* opera firefox safari */
filter: alpha(opacity=70); /* ie */
}
-->
</style>
}}


記述する場所は、「その他のタグ」「ナビ2」若しくは、「CSS編集」

  • 「その他のタグ」

「設定」~「サイト情報設定」の中の「その他のタグ」に記述します。
その際、「#beforescript{{」「}}」の部分を省いた、上記のタグコードを記述します。



  • 「ナビ2」

上記のタグコードを、そのまま「ナビ2」に記述します。
コードの上に「//」を付けて名前を書くことで、後から見ても分かりやすいように
しておくことをおすすめします。



  • 「CSS編集」

「FTP」を起動させて、「public_html」~「skin」~「hokukenstyle」~「デザイン名」
の中から、「main.css」を、PCにダウンロードして、エディタでファイルを開いて編集します。

その際、予期せぬことを考慮して「main.css」をコピー、バックアップしておいて下さい。

編集箇所は

a:hover {
xxxxxxxxxx
xxxxxxxxxxxxxxx
}

上のコードの下に、下のコードを追加します。

a:hover img{
opacity:0.70; /* opera firefox safari */
filter: alpha(opacity=70); /* ie */
}

次の様になるようにします。

a:hover {
xxxxxxxxxx
xxxxxxxxxxxxxxx
}

a:hover img{
opacity:0.70; /* opera firefox safari */
filter: alpha(opacity=70); /* ie */
}

編集後は、同じ場所にアップロードして完了です。




このページは役に立ちましたか?

選択肢 投票
大変役に立った 9  
多少役に立った 1  
解かりづらかった 3  
まったく必要ない 0  




自動スパムコメントの回避の為、認証コードの4桁の数字を記入して下さい。


  • 「QHM 画像 マウスオーバー」の検索でここに辿り着きました!
    12時間奮闘したかいがありました(・∀・)

    また、遊びに来ますね!
    ありがとうございます。 -- マルス 2012-09-22 (土) 00:08:52



a:5024 t:2 y:0

powered by HAIK 7.1.0
based on PukiWiki 1.4.7 License is GPL. HAIK

最新の更新 RSS  Valid XHTML 1.0 Transitional