新着記事
2010年04月28日

Seesaaブログで「Lightbox Plus」を使う

Seesaaブログではサムネイル画像をクリックして拡大画像を表示する場合、別の画像表示専用のページが開きます。この見せ方が気に入らない場合、最近のwebサービスなどでよく使われている、そのページ上で拡大画像を表示させる「Lightbox」がSeesaaブログに導入できます。実際に導入したのは「Lightbox」に類似した「Lightbox Plus」です。

余談ですが、このブログでは別ウィンドウで拡大画像を表示する「Highslide JS」も導入しています。ところが現在、Seesaaの下層ディレクトリ作成仕様が変わり、「Highslide JS」を設定することが簡単にはできなくなりました。Seesaaブログユーザーで拡大画像の見せ方を変えたいのなら、「Lightbox Plus」の導入は「Highslide JS」に比べて簡単ですしお勧めです。

参考→Highslide JSをSeesaaブログで使用

「Lightbox Plus」の使い方については、以下の記事が丁寧に解説されています。
別窓を開かずに、その場で拡大画像を表示! - All About/ホームページ作成

たいへん詳しくしかも易しく解説してあるので、この記事ではSeesaaブログでの導入手順に絞って説明します。

先ず「Lightbox Plus」をダウンロードします。
「Lightbox Plus」の配布サイト

ダウンロードした「lightbox_sample.zip」の中身、sampleフォルダの中にある「resource」フォルダの中を展開します。これらのファイルをSeesaaブログにアップロードするわけですが、その前にしておくことがあります。

Seesaaブログの仕様では「Lightbox Plus」で使用するloading用などの効果画像を置くディレクトリと、画像自体を置くディレクトリが別になるので、「lightbox_plus.js」のスクリプトの一部を書き換える必要があります。

スクリプトのカスタマイズ
「lightbox_plus.js」をテキストエディタで開く、あるいはファイル名を「lightbox_plus.txt」に変更するなどして、「lightbox_plus.js」を書き換えられるようにします。ファイルを開き、一番最後の部分(以下参照)の効果画像の保存場所を指示した箇所を、相対パス(赤字部分)ではなく絶対パス(青字部分)に書き換えます。
変更前
};
Spica.Event.run(function() {
var lightbox = new Lightbox({
loadingimg:'resource/loading.gif',
expandimg:'resource/expand.gif',
shrinkimg:'resource/shrink.gif',
blankimg:'resource/blank.gif',
previmg:'resource/prev.gif',
nextimg:'resource/next.gif',
closeimg:'resource/close.gif',
effectimg:'resource/zzoop.gif',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
resizable:true,
animation:true
});
});

変更後
Spica.Event.run(function() {
var lightbox = new Lightbox({
loadingimg:'http://△△△(あなたのブログのURLに合わせて変更).up.seesaa.net/resource/loading.gif',
expandimg:'http://△△△.up.seesaa.net/resource/expand.gif',
shrinkimg:'http://△△△.up.seesaa.net/resource/shrink.gif',
blankimg:'http://△△△.up.seesaa.net/resource/blank.gif',
previmg:'http://△△△.up.seesaa.net/resource/prev.gif',
nextimg:'http://△△△.up.seesaa.net/resource/next.gif',
closeimg:'http://△△△.up.seesaa.net/resource/close.gif',
effectimg:'http://△△△.up.seesaa.net/resource/zzoop.gif',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
resizable:true,
animation:true
});
});

(表示の便宜上「http」のh は全角にしてあります)

書き直したらファイル名を「lightbox_plus.js」に戻して保存します。

アップロード
Seesaaブログのファイルマネージャではフォルダ自体をアップできないので、先ず「resource」という新しいディレクトリを作成する必要があります。その後でファイル一つ一つをアップロードします。新しいディレクトリを作るにはファイルマネージャの「オプションを表示する」をクリックし、

10.04.28-01.gif
↓↓↓
10.04.28-02.gif


ディレクトリの項目に resource と入力して「追加」ボタンを押します。
「jojo.css」と「sample.css」の2ファイルを除く全てのファイル(書き換えした「lightbox_plus.js」も含め)をアップロードします。ちなみにオプションで使用する効果画像「zzoop.gif」を使うつもりがなければ外しても構いません。

HTMLへの記述
編集メニューの〔デザイン〕→〔HTML〕でHTMLの編集画面を開きます。上部のhead要素内に以下の2行(記事欄の横幅の都合で4行になっていますが、実際は2行です)をコピー&ペーストしてください。「All About/ホームページ作成」の解説では3行になっていますが、「Lightbox Plus」の配布サイトの設置解説にあるように、バージョンアップして「spica.js」が不要になりました。

<link rel="stylesheet" type="text/css" href="resource/lightbox.css" media="screen,tv">
<script type="text/javascript" charset="UTF-8" src="resource/lightbox_plus.js"></script>

</head><body>のタグのすぐ上に記述すればよいでしょう。

記事の編集画面での記述
Lightbox Plusを適用したい画像をアップロードしたら、記事の編集画面では以下のように記述します。

<a href="http://△△△.up.seesaa.net/image/xxx.jpg" rel="lightbox[◎□×]"><img
src="http://△△△.up.seesaa.net/image/xxx-thumbnail2.jpg" width="200"
height="150" align="" alt="なんとかかんとか"
></a>
(表示の便宜上「http」のh は全角にしてあります)


上記の「△△△」部分はあなたのブログのURLの一部にし(ファイルのURLの一部)ます。[◎□×]の部分は1つの記事に複数の画像を載せた場合、◎□×の部分に適当な名前を記述すると拡大画像をスライドショーのように次々と表示できるようになります。

で、導入が成功すればこんなふうになります。
サムネイル画像をクリックして拡大画像が開き、拡大画像をマウスオンすると次の画像への矢印ボタンや画像拡張ボタンが表示されます。

参考画像拡大画像は閲覧者のブラウザ解像度に合わせ自動で拡大します。大きめの画像の場合は画像左上の拡張ボタンをクリックすると、アップしたサイズまでサイズアップします。最大拡大画像はマウスで動かすことができます。

御嶽山600×450ピクセル程度の画像だと拡張機能は働かないのに、拡張ボタンが表示されてしまうのがちょっと欠点ですが。
タグ:サイト制作

拍手してくださるとうれしいです→ 拍手する

このエントリーをはてなブックマークに追加
posted by Masako at 15:51 | Comment(5) | TrackBack(0) | Seesaaブログのカスタマイズ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
う〜ん、ありがとうございます。

早速、(GW中かな(^^ゞ)やってみます。

seesaaでできるなら『さくら』でもOKですよね。
Posted by つかさ at 2010年04月28日 19:06
ブログも長い間ほったらかしで、ようやく記事にしました(^^;
さくらのブログでも新しいディレクトリ作成が可能なので導入できますね。
Seesaa、さくらのカスタマイズできる幅が広いのは
ホント、うれしいですねー。
Posted by Masako at 2010年04月28日 22:09
はじめまして。ひないぶと申します。
ここ数日間、seesaaにlightboxを設置しようとして苦しんでおります。
Masakoさんの記事を参考にLightbox Plusも設置してみましたが、なぜか自分のパソコンでは正常に動作するのに(もちろん全てのファイルはseesaaにアップしたものを使っています。)seesaaに記事を投稿すると読み込みが途中でとまってしまうのです。
どうしてかお分かりになったら教えていただけないでしょうか。助けてください。
Posted by ひないぶ at 2011年03月30日 03:00
ひないぶ様
動作不具合の状態と原因の要素の手がかりが少ないので、アドバイスをすることも難しいのですが…。
「読み込みが途中でとまってしまう」ということから推察すると、コードの書き込みミスが疑われます。
コピー&ペーストした場合、最後のカンマを落としていたということがよくあります。
何度もやっていると見落としのスパイラルに陥りますから、一息入れて再度じっくり確認してみてください。
かく言う私もよくこの失敗をやります(笑)

念押しですが、コード内の画像やスクリプトファイルのディレクトリURLの最初「http」の<h>は小文字<h>に修正してくださいね。

書き込みミスが原因ではない場合は、コメントしていただいた内容では情報不足ですので、もう一度詳しく教えてください。
Posted by Masako at 2011年03月30日 15:48
ご丁寧にありがとうございます。
色々調べた結果、お恥ずかしい事に、ブログ設定の「画像詳細ページ:表示する/しない」の問題でした。「しない」にしたところ、無事に作動しました!
お騒がせして申し訳ありません。ありがとうございました。
Posted by ひないぶ at 2011年04月02日 01:57
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
最近のトラックバック