2011年4月10日日曜日

BloggerでLightBoxを使ってオシャレに画像を表示してみる。

画像をクリックするとビヨーンとそのサイトの上に大きい画像が表示されるようなサイトあるよね。

←こういうの、やってみました。 LightBox と呼ばれるもの(手法?)です。 

どうよ! センスなしのオッサンのブログでも、ちったぁ オシャレになったでしょ!?



百聞は一見にしかず、まずは以下の2つの画像をクリックしてみて!

普通の画像(別ページで開く) LightBox使用の画像(このページ上に開く)


参考サイト
■つわものぶろぐ: ちょっと真剣に対策してみた。〜LightBoxとBlogger Gadgetsのコンフリクト〜
http://tsuwamono.blogspot.com/2011/03/lightboxblogger-gadgets.html

 "Bloggerユーザーで、これからLightBox導入したい人は、~" ってところを読むべし。

スクリプトの配布サイト
■Light Box Image Viewer For Blogger ~ Blogger Widgets
http://www.bloggerplugins.org/2009/08/light-box-image-viewer-for-blogger.html


使うには多少なり手間はかかるし、ソースを修正する作業が初めて、慣れてない人は最初は戸惑うかもしれないけど、さほど難しくはないと思いますよ、はい。 すぐ慣れるって。




【準備】
※間違った時に戻せなくなると困るので、デザインを変更する前には、"テンプレートをすべてダウンロード" をクリックして変更前のデータを保存してから行うべし!

お約束ですが、自己責任でやってください。 うまくできーん! テンプレート壊れた! (#゚Д゚)ゴルァ!! とか言われても責任は負いかねます。 ヾ(゚д゚;) スッ、スマソ


ダッシュボードの「デザイン」→「HTMLの編集」で、配布サイトに書いてあるコードを、"</head>" の前に追記する。 …上記サイトの書き方だと、</head> の部分を、"<!--Light Box Code ~ " に書き換えて! だけどね。

この部分は、最初に1回書いてあげればいい。 (ただ、その後にテンプレートを変更した際には、また書く必要があると思う。 テンプレート変えたら、たぶん消えてしまうだろう。)



【記事で使うには】
 で、実際に記事で使うには、その画像ごとにHTMLを修正する作業が必要になる。

  • rel="lightbox" とだけだと、その画像だけしか表示されないが、
    rel="lightbox[albumname]" とすれば、同じalbumnameを指定された画像を次々に表示することができる。 …この上の2つの作業説明の画像が そう です。
  • 画像の左側にマウスを持ってくると [PREV](前)と、右側だと[NEXT](後)と表示されて、クリックすると前後の画像に切り替わる。
  • albumname は、アルバム名(AlbumName)というより、グループ名の方がイメージしやすいかな? ともかく一意の名前であれば何でもいい。 ただ名前には日本語は使わずに英数文字の方が無難かと。 たいていはその記事内で一意にするだろうから、日付とかにでもすれば、名前に悩まずにラクかもね。 ま、あえてブログ内で同じ名前にするのも手だろうけど。
  • title は、画像の下側の枠に表示される文字で、その名の通りですね。 ココは日本語でも大丈夫。  


なわけで、勝手に適用されるわけじゃないんで、過去にUPした画像でもやりたい場合には、当然一つ一つ修正する必要があるわけで、とてもやる気が出ないので、そのままでいいや。。。(・ε・)キニシナイ!!

0 件のコメント: