Lightbox(画像クリックで拡大表示)をMovable Typeや通常Webで使うには
SEOのためには、ソースは軽佻浮薄が好ましい。
だがしかし、時には凝ったこともやってみたいし、ビジネスサイトならクールな仕掛けも欲しいところ。
今回は、ページに表示させているサムネイルをクリックすると、アニメーションで画像が拡大する「Lightbox」について。
WordPressのプラグインと、Movable Typeや通常のWebサイトで使用する方法を挙げてみる。
Lightbox(画像クリックで拡大表示)のWordPressプラグイン
このSEO塾ブログには、下図のようにプラグインがてんこ盛りである。
そして、画像クリックで拡大表示の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つのフォルダがある。
- ｊｓ
- 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の読み込みも同様である。
一行でもダイエットするべきだ。
コメントを書き込む