wordpressでつかえるお勧めプラグインを紹介する日記。
というより、自分で使い方忘れたときのためのメモですが。
今回ご紹介するのはLightbox。サムネイルをクリックすると画像を表示してくれるやつです。
ちなみにFC2ブログとか一般的なレンタルブログでもつかえます。
画像クリックして、わざわざ新しい窓が開いたりするのにげんなりしている人には、お勧めの機能です。
具体的にはこんな感じ↓
開き方はサムネイルをクリックするだけ。そしたら元サイズの画像が表示されます。
閉じ方は右下に出た「CLOSE×」か、もしくは周りの黒いところをクリックするだけです。
新しい窓が開かなくて、見るほうも快適です。
以下は具体的な使い方。JavaScript版もあわせてご紹介します。
なおFC2の場合導入法が微妙に異なるので、このへんが参考になるかもしれません。本記事ではwordpressのみご紹介します。
1.こちらにアクセスします。
2.以下の画像のようなところを探してください。ページのかなり下のほうです。ここからダウンロードします。
3.ダウンロードしたファイルを解凍するとlightbox-2-wordpress-pluginというフォルダが出るので、/wp-content/plugins/にフォルダごとアップロードします。
4.wordpress管理画面で、プラグインを有効にします。
5.あとは画像を記事に埋め込むだけ。埋め込む方法はHTMLの書式で、
<a title=”ここにキャプション” rel=”lightbox” href=”大きな画像のURL“><img title=”画像のキャプション” src=”サムネイルのURL” alt=”任意” /></a>
で表示できます。画像をアルバムのようにまとめたいとき、すなわち
↑2つのように、グループ化したのは画像の左側をクリックすると前の画像、画像の右側をクリックすると次の画像が見れるようになります。
このようにするには
<a title=”ここにキャプション” rel=”lightbox[roadtrip]” href=”大きな画像のURL“><img title=”画像のキャプション” src=”サムネイルのURL” alt=”任意” /></a>
のように、lightboxの後ろに[ ]をつけて中にグループ名を入れるとよいです。roadtripじゃなくてもグループ名が同じであれば、それらの画像は同じグループにまとまられますよ。
・・・さて、↑のようにまじめにHTMLコードを書かないといけないように見えますが、実はそのコードを自動生成してくれるプラグインも存在します。
その紹介はまた後日。
では、おまけとしてJavascript版をご紹介しましょう。
Javascript版は、wordpress版の本家とも言える存在です。こちらを参照のこと。
導入法をさくっと説明します。
1.まずダウンロードして解凍する。
2.解凍して出てきたフォルダ内は以下のような構成です。
lightbox2.04
┗css (フォルダ名)
┗images (フォルダ名)
┗js (フォルダ名)
┗index.html (HTMLファイル)
3.FTPでcss、images、jsをサーバのドキュメントルートにアップロードします。
あとは使うだけですが、ただ単に↑で紹介したwordpress版のようにHTMLタグを打つだけでは認識してくれません。
例として以下のような構成のHPで使う場合を紹介します。
DocumentRoot
┗css
┗images
┗js
┗illust
┗pop.png
┗index.html
┗oekaki.html
WEBサーバは、たとえばhttp://cami-moe.net/とブラウザに入れた場合、普通はindex.htmlを返します。
つまりhttp://cami-moe.net/index.htmlにアクセスしているわけです。
さて、今お絵かきサイトを作っているとして、lightboxを使いたいと考えています。
↑のファイル構成では、すでにlightbox 2.04をアップロードしていると思ってください。
oekaki.htmlで描いた絵を載せるとしますね。
oekaki.htmlにpop.pngという画像を載せるとします。
すると考えられるHTMLのソースは以下のようになるでしょう。
<html>
<body>
<img src=”illust/pop.png”>
</body>
</html>
ものすごく単純ですが、これで画像1枚だけのページができます。
lightboxを使うには以下のようにheaderにHTMLコードを記述してください。
<html>
<head>
<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>
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
</head>
<body>
<a href=”illust/pop.png” rel=”lightbox”>pop.png</a>
</body>
</html>
こうすると以下のような感じになると思います。
<a href=”illust/pop.png” rel=”lightbox”>pop.png</a>の部分をwordpress版と同じ表記にすれば、サムネイルをクリックしたら元画像が出るようにもできます。
以上です。