これが、画像のいっぱい張ってあるブログ記事だと、行ったり来たりが煩わしく思っていた。
調べてみると、以外とBloggerユーザも画像のポップアップを実装していることを知った。
一番疑問だったのが、画像以外にファイルのアップロード機能が無いブログシステムにどうやってみんなはスクリプト置いているのかが判らなかった。
自分の場合一番簡単なのは仕事で使ってるサーバーにすでに入ってる"Lightbox"のスクリプトにアクセスして実装しまう方法だったのですが、あまりに私的な利用に少し気が引けましたので皆さんのお知恵を拝借することに...。
調べてみると何てことはない、灯台下暗しとはこのこと。
Googleには"Google サイト"なるサービスが存在しているので、その領域を使えば良かったのです。
ようは"サイト"を一つ作ってそこをスクリプト類の置き場所にすれば良いだけのことだったのです。orz
画像は"Picasa ウェブアルバム"にアップしてスクリプト類は"Google サイト"にアップしてそれをBloggerから利用する。
全部一つのアカウント（Googleのサービス）でまかなうことが可能でした。
以下実装手順。
- まずGoogle サイト"へアクセスして適当なサイト名で一つ領域を作っておく。
- "Lightbox2"からパッケージをダウンロード。 展開するとスクリプトファイルとcssファイルと画像ファイル（パーツ）が入っているので、まずサンプル画像を除いたGIFファイルをサイトのルートにアップロードする。
（"ホーム"画面で画像のアップロードしても良いけど、後でスクリプトもアップしないといけないので、右上にある「その他の操作」から「サイトを管理」を選んで管理画面に入って作業した方が解りやすいと思います。
サイト管理画面の左側のメニューに「添付ファイル」があり、それをクリックするとファイルのアップローダーの画面になります。）
- アップロードした画像ファイルへのパスをメモります。
（多分"http://sites.google.com/site/（サイト名）/loading.gif"のようなパスになるはずです。）
- 次に"js"フォルダ内にある"lightbox.js"及び"css"フォルダ内にある"lightbox.css"ファイルに記述されているGIF画像ファイル群へのパスを自分のサイトにアップしたパスに書き換えます。（何もかもルート直下に配置なら"./"指定でも良いと思います。）
- 画像へのパスを修正したらスクリプト群をサイトのルートにアップします。
- 最後にBloggerの「レイアウト」からテンプレートのHTML編集で<head>〜</head>内に
<script src='http://sites.google.com/site/（サイト名）/prototype.js' type='text/javascript'/>
<script src='http://sites.google.com/site/（サイト名）/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://sites.google.com/site/（サイト名）/lightbox.js' type='text/javascript'/>
<link href='http://sites.google.com/site/（サイト名）/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
を書き込みます。
あとは、Bloggerで普通に画像アップした後に「HTMLの編集」画面で"< a href="http://...xxx.jpg"に続く画像へのリンクタグ内に「 rel="lightbox" 」を追記すればポップアップするようになります。
title="xxxxx" オプションも使えばポップアップした画像ウィンドウの左下にコメントとして入って良いかも知れません。
【画像サンプル】
ところで本題はここから。
Lightbox2組み込んだのは良いけれど、Blogger Widgetの"Recent Comments"とコンフリクトしてしまう。
テンプレートに<script src='http://sites.google.com/site/（サイト名）/prototype.js' type='text/javascript'/>を記述するとWidgetが全くコメントを読み込まなくなってしまうんです。orz
何か回避策があれば良いのだが...。
【2010/4/24-9:10追記】
ただ単に自分のデスクトップ(PowerMac G5+Safari4)の環境下だけの問題でした。orz
iPhoneでもIE8(win)でもちゃんと表示してました。
入ってるJavaのバージョンが違うのか？！
【2011/3/26-11:30追記】
原因はLightBoxで利用している"prototype.js"内の宣言がGadgetsの命令とかぶってしまうことが原因だったようです。最新版（2.05）ではコンフリクトしませんので、新しいLightBox2を入手された人はトラぶらないと思います。
それより、もっと簡単に組み込む方法がありました。(^^;; 詳細はこちらの記事で...。
はじめまして、こんにちは。
返信削除私も、Lightbox2を入れているんですが、これを組み込みと、読者Followのガジェットが表示できなくなりますよね。それと、一部のガジェットにも、不具合が起きるようです。おそらく、どこかでスクリプトが競合している可能性がありますが、もし、回避策等あれば、ご教示いただけませんか。いろいろ試しましたが、駄目でした。宜しくお願い致します。
> 匿名さん
返信削除コメント有り難うございます。
申し訳ない。
匿名さんがどんな環境で運用していて"読者Follow"ガジェットを利用しているのかが、分からないため検証してみる事が出来ていません。（"読者Follow"ガジェットなるものが、どれなのかもよく分かってないのですが....(^_^;）
私の環境で起こっている不具合は端末機の環境によって表示出来たり出来なかったりしますので、JavaVMの互換問題かと思っているのですが、匿名さんのサイトではどんな環境でも表示されないのでしょうか？
mantapapaさん。早速お返事いただきありがとうございます。また、匿名で投稿させていただきました事についてお詫びさせて頂かなくてはなりませんね。今回は、ユーザーIDから投稿させて頂きます。それで、実は、私のブログでも、言われているように、端末機の環境によって表示できたり出来なかったりするようです。現象は全く同じです。そして、他のBloggerユーザーの方も、これはLightboxを使っているなと思われる方は、同じ現象が見られます。しかし、気付かないのでしょうか。私の場合とは、逆なのかもしれません。という事の様です。因みに、たまたまOSが違っただけですが、私の持っている環境では、Windows7は×、WindowsXPは○でした。
返信削除近いうちに、JavaVMのバージョンも調べてみようと思います。宜しくです。
何度も申し訳ありません。参考までに、現在、私のパソコンからは、mantpapaさんのブログサイドバー、一番下の読者の四角の中は、真っ黒で何も見えない状態です。ですから、私は読者登録ができません。残念・・・。
返信削除> Maruさん
返信削除こんにちは。
サイト拝見させて頂きました。
同じような状態ですねぇ...(^_^;
自分の閲覧環境がMacメインな為、Appleが提供するJavaVMのせいだと思いって半分あきらめてました。
Javaの公式サイト（http://www.java.com/ja/download/manual.jsp）でも、「Appleだけ独自のバージョンを配布している」と言っているくらいなので、互換性も怪しいです。(ToT)
今の所、XP+IE8、 2003Server+IE8, Vista+IE8ではちゃんと閲覧できる（Win7の環境が身の回りに無い...）ので、AppleのJavaアップデートに期待している次第です。
解決策になっていなくてすいません...。
参考になりました。読者登録しました
返信削除こんにちわ。
返信削除書いてある通りでうまく出来ました。とても参考になりました。
画像表示も動きがあるのと無いのとでは違い、楽しいですね。