--
--/--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2012
02/22

LightboxとGoogleAdsenseの相性が悪い

ブログでLightboxのような画像をスタイリッシュに表示してくれるツールや、Web広告の定番Google Adsenseを既に導入されている方、または導入を検討されている方もいらっしゃるかと思います。
私も例に漏れず、リニューアルに際してGoogle Adsenseを導入し、更にLightboxも導入しようとしたのですが・・・

Lightboxが動かない。。。

悩むこと1時間以上・・・貴重な日曜日です。
そして、どうも自分のせいだとは思えず、色々調べて、Lightboxは他のJavascriptとの相性次第で動かないケースがあることを知る。
私のブログ上では、Google AdsenseとTwitter関連くらいしか思いあたらないので、とりあえず一時的にGoogle Adsenseのタグを削除して、Lightboxに関連付けさせた画像をクリックすると・・・


動いた。


時間が掛かっていただけにちょっと感動・・・と同時に脱力。。。
どうもGoogle Adsenseとどこかでぶつかっていたようです。
・・・だめじゃん。

そこでかわりを探したところ、Slimboxというものを発見。
導入してみたところ、無事動きました。

しかもLightboxより作りがシンプルで導入が簡単。
画像とcssが同じフォルダ内にあるという、fc2ブログユーザには嬉しい設計で、css内の画像パスの書き換えも不要です。
cssと画像はそのままアップロード。
テンプレートに書き込むjsやcss読み込みのタグも、プラグインと一緒についてくるexample.htmlのヘッダの該当部分をコピーして、アップロードしたファイルのパスに書き換えるだけ。
あっさり完了。
タグはこんな具合で↓
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://blog-imgs-37.fc2.com/o/n/e/oneroommusic/slimbox2.js"></script>
<link rel="stylesheet" href="http://blog-imgs-37.fc2.com/o/n/e/oneroommusic/slimbox2.css" type="text/css" media="screen" />

</head>
アップロード先は各自違うはずなのでご注意ください。

そしてaタグの中に、リンク先の画像URLと、Lightbox同様 rel="lightbox"と記述すれば・・・
↓こうなります。
Iblit
タグを直接書くとこんな感じです↓
<a href="http://blog-imgs-37.fc2.com/o/n/e/oneroommusic/iblit.jpg" rel="lightbox"><img src="http://blog-imgs-37.fc2.com/o/n/e/oneroommusic/iblit_ml.gif" alt="Iblit" border="0" width="210" /></a>
太字がポイント。

LightboxとGoogle Adsense、少なくとも私の環境では共存できませんでしたが、調べてみても情報が見つからなかったので、もし他に困っている方がいたら・・・と思い記事にしました。
関連記事
スポンサーサイト

theme : ツール・ソフトウェア ::  genre : コンピュータ


Comment

Secret

Recommend

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。