黒色系背景のテンプレートでディスプレイ広告を透過させて背景に馴染ませる

延々と…相も変わらず…チマチマと…

テンプレートのカスタマイズを続けている訳ですが…　σ(^_^;)

どうにも我慢ならないのが…画像形式のディスプレイ広告の「色」です…

白色系背景のテンプレートでは…然程気にならないのかもしれませんが…

当サイトのような黒色系背景テンプレートでは…

原色がチカチカして…デザイン的に馴染まない事この上ないッ…

まぁ…広告クライアント側の問題なのでしょうが…

「文字が綺麗に見える」…などなど…

白色系背景を推奨する怪しげな世間の風潮ともども…

何とかならないものでしょうかねぇ…

…なので…少々…透過させてみました…(￣ー￣) 邪笑®

誘導している訳では無いので…規約的にも問題無いと思われますが…

導入は…あくまでも…自己責任で…熟考後にして下さいな…

「opacity」プロパティで…

要素の透明度を「0.7」に指定すると…

こんな感じで…黒色系背景テンプレートでも…

なかなか良い感じになります…

これを…マウスホバー時に…

透明度に「1.0」を指定して完全に不透明に戻してやれば完成ですね…

問題は…どの部分に指定してやるか…ですね…これは正直…悩みました…

考え方は…3種類ほどあるかと思われます…

1. サイドバーなど…大きな領域全体を透過させる…
2. 個別のガジェット全体を透過させる…
3. 個別のガジェットのコンテンツのみを透過させる…

…ってな感じですかね…

1番目の方法だとコンテンツの中にタイトルを入れ込んでいる場合や…

外部スクリプトを読み込んで「div」を生成している場合などで…

均一に透過されない事も考えられますので…除外しました…

2番目を選択しましたが…3番目も一応含めて

ガジェット全体やガジェットのコンテンツだけを透過させる場合用の「CSS」です…

「サイドバー」と「フッター」を例にします…

ご自身のサイトの「id」や「class」に書き換えて下さい…

ガジェット全体やガジェットのコンテンツだけを透過させる「CSS」 (クリックで開閉)

/* 「widget」全体を透過する場合 */
.sidebar .widget,#footer-wrapper .widget{opacity:0.7;filter:Alpha(Opacity=70)}
.sidebar .widget:hover,#footer-wrapper .widget:hover{opacity:1;filter:Alpha(Opacity=100)}

/* 「widget-content」だけを透過する場合 */
.sidebar .widget-content,#footer-wrapper .widget-content{opacity:0.7;filter:Alpha(Opacity=70)}
.sidebar .widget-content:hover,#footer-wrapper .widget-content:hover{opacity:1;filter:Alpha(Opacity=100)}

一般的には…

「widget-content」＋「h2」＝「widget」

…ってな感じですね…要素の透明度は…

お好みで…黃文字部分を変更して下さい…

尚…カスタマイズして「h2」を削除したり…

「h2」を「widget-content」の「div」内に移動させていたりしている場合は…

要素名も解るでしょうから…個別に指定して下さい…

以上ですが…昨年…

「AdSense」に「非同期型広告コード」が導入された際…記事にしましたが…

 Google AdSense (グーグル アドセンス）が「非同期型広告コード」の提供を開始

「ベータ版」だったので書かなかった事を…正式にリリースされましたので…

…ついでに…ほんの些細な「Tips」として置いておきます…

広告を複数個設置しているのがデフォルトでしょうが…

取得したコードの…この部分のスクリプト…

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

当然ながら…「1箇所にだけ記述」すれば残りの広告も問題無く表示されます…

まぁ…「当たり前だ」…ってなツッコミが…

モニターの向こう側から聞こえてきそうですから…これにて…　σ(^_^;)

Tips Header Sidebar Main Footer Current-Label : Universal