Lightbox(画像クリックで拡大表示)をMovable Typeや通常Webで使うには

SEOのためには、ソースは軽佻浮薄が好ましい。

だがしかし、時には凝ったこともやってみたいし、ビジネスサイトならクールな仕掛けも欲しいところ。

今回は、ページに表示させているサムネイルをクリックすると、アニメーションで画像が拡大する「Lightbox」について。
WordPressのプラグインと、Movable Typeや通常のWebサイトで使用する方法を挙げてみる。

Lightbox(画像クリックで拡大表示)のWordPressプラグイン

このSEO塾ブログには、下図のようにプラグインがてんこ盛りである。

WordPressのプラグインとLightbox Gallery

そして、画像クリックで拡大表示のLightboxは、Lightbox Galleryプラグインで実現している。

作者は、イーティーネット株式会社の宮下裕章社長である。
つまり、SEO塾テンプレート×WordPressテーマを開発依頼した企業の社長というわけである。

WordPressのLightbox機能はこのプラグインのお世話になっていることになる。

Lightbox(画像クリックで拡大表示)をMovable Typeや通常Webで使うには

さて、WordPressはすぐれたプラグインがある。

では、Movable Typeや通常のWebサイトではどうすればいいのだろう。

上図をクリックして、次に、株式会社アルゴリズムの会社案内 へ行って、同じ画像をクリックしてみて欲しい。

SEO塾メインサイトは、グリーツリー社に依頼したMovable Typeベースのテンプレートを使ってある。

つい、少しでもクールに見せかけたいと、Movable Type用のLightboxを探し回ってみた。

上記ページでは、とんでもないほど面倒なことをやる必要がありそう。

あきらめかけた時、Lightboxを使い画像を拡大表示する。[to-R] にたどり着いた。

Movable Typeと通常Webでは Lightbox 2 が使える。

Lightbox 2の設置

ダウンロードして解凍すると、3つのフォルダがある。

  • js
  • images
  • css

「js」は、サイトトップページ(index.html)と同じ階層に、フォルダごとアップロードする。
既に「js」ディレクトリーがあるならば、その中に。

次に、「images」。
これも、先ほどと同じ階層に、フォルダごとアップロードする。
既に「images」ディレクトリーがあるならば、その中に。

最後に「css」フォルダの中のファイル、lightbox.css。
これは、中身を既存のCSSに追加コピペする。

そして、「</body>」タグのすぐ上に、下記を貼りつける。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

最初の日本語ページでは、2行目が次のようになって、JavaScriptがうまく動かないから注意。

<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>

念のため。

head要素に上記を書き込まないのは、SEOのためである。
ページソースの上部に、キーワード以外の余計な記述は避けること。

もちろん、CSSの読み込みも同様である。
一行でもダイエットするべきだ。

«
»