Lightbox2.0をウェブリブログ(BIGLOBE)で使用するには。

質問

この度、ウェブリブログでブログを始めて、Lightbox2.0を導入しようと試みているのですが
試行錯誤してみても結果、中途半端なできになり行き詰ってしまったので質問させていただきます。
長いですが、お知恵を貸していただけると大変助かります。よろしくお願いしますm(_ _)m

(1)ダウンロードしてきたファイルは、ウェブリブログではディレクトリ管理できないし、js、cssはUP自体出来ないので、
他で借りていた有料サーバー(FC2ホームページ)に全て纏めてUPしました。
(http://○○○/js/)(http://○○○/images/)(http://○○○/css/)

(2)htmlはウェブリブログでは直接編集できないのでウェブリブログのフリースペースに書き足しました。
( <script type="text/javascript" src="http://○○○/js/prototype.js"></script>
<script type="text/javascript" src="http://○○○/js/scriptaculous.js"?load=effects,builder></script>
<script type="text/javascript" src="http://○○○/js/lightbox.js"></script>
<link rel="stylesheet" href="http://○○○/css/lightbox.css" type="text/css" media="screen" />)
(ここに書いたショートカットアイコンも機能しているので大丈夫なようです。)

(3)解説サイトに倣ってlightbox.csを2箇所書き換え
( #prevLink:hover, #prevLink:visited:hover { background: url(http://○○○/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://○○○/images/nextlabel.gif) right 15% no-repeat; }
)

(4)同じくlightbox.jsを4箇所書き換え
fileLoadingImage: 'http://○○○/images/loading.gif',
fileBottomNavCloseImage: 'http://○○○/images/closelabel.gif',
<img src="○○○/images/loading.gif">
<img src="○○○/images/close.gif">

そして、Firefoxで確認してみると右下に出る筈のclose×ボタンが出ない…。IE6ではnext画像とplev画像が表示されていない。

試しに(4)のloading.gifとcloselabel.gifをウェブリブログにUP。絶対パスで書き換え。
すると、何故かは分からないがFirefoxIE6ともにcloseボタンが正常に表示されました。
しかし、IE6で確認してみると今度はこちらでprevlabel.gifとnextlabel.gifが表示されていない…。
ウェブリブログにUP。絶対パスで書き換えをしてみると今度はFirefoxで表示されない。結局Firefox優先ということで戻しました。

そして何気なくoperaで見てみると、新しい不具合…。
表示はされるのだがページの下の方。スクロールしていかないと見れない。最初は背景がグレーになるだけだ！と思ったほど。

以上、分かりにくい文章だとは思いますが、ご教示いただきたいと思います！よろしくお願いしますm(_ _)m

回答No.1

tenderfeel · ベストアンサー

具体的に検証はしてないですが、
もしテンプレートのCSSに書き足すことが出来るなら、lightbox.cssに書いてあるスタイルシートを
全てテンプレートのCSSにコピペしてみたらいかがでしょう。（それでフリースペースのlinkタグは消す）

画像はlightboxが呼び出されてるページから画像へのパスになるので、
相対よりは絶対パスの方が良いと思います。

お礼

回答ありがとうございますm(_ _)m

テンプレートのCSSに書き足してlinkタグを消去し、
画像をウェブリブログの方から読みこんだら
Firefox・IE6で正常に画像が表示されました！
（operaでは画像表示はするものの、ズレは直りませんでした。）
要因はわかりませんがとても嬉しいです。

ありがとうございました。