クリックするとギューンと画像が大きくなるWordPressのプラグイン「Lightbox 2」の使い方

2010.12.29

四葉のクローバー
 
上の写真をクリックしてみてください。

こんな感じでギューンと写真が大きくなるWordPressのプラグイン「Lightbox 2」を入れてみました。
 
 
基本の使い方
 
まずWordPressの管理画面>プラグイン>新規追加から「Lightbox 2」を検索してインストールします。
 
次に通常の投稿画面から画像を追加します。そのときサイズを「サムネイル」か「中サイズ」にしてください。
コード的にはこんな感じになっているはずです。

<a href="大きな画像">
<img src="サムネイル画像" alt="代替文字列" 
title="写真のタイトル" width="xxxx" height="xxx" 
class="alignnone size-thumbnail wp-image-xxxxx" />
</a>


 
あとは保存すれば完成です。
WordPressのプラグイン「Lightbox 2」
title=のあとの文字列が写真左下の文字列になります。
 
 
細かな設定方法
 
写真の枠の色を変えたいとき
管理画面>設定>Lightbox 2で「Lightbox Appearance」から色を選択すればOK。
WordPressのプラグイン「Lightbox 2」
枠はグレー、ダークグレー、白、黒の4色から選べるようになっています。
 
写真ごとに「Lightbox 2」を使うかどうか決めたいとき
管理画面>設定>Lightbox 2で「Auto-lightbox image links」のチェックを外しておきます。そして使いたいものだけに「rel=”lightbox”」といれればOKです。

<a href="大きな画像" rel=”lightbox”>
<img src="サムネイル画像" alt="代替文字列" 
title="写真のタイトル" width="xxxx" height="xxx" 
class="alignnone size-thumbnail wp-image-xxxxx" />
</a>


 
ブラウザに合わせて表示サイズを変えたいとき
管理画面>設定>Lightbox 2で「Shrink large images to fit smaller screens」にチェックを入れます。
WordPressのプラグイン「Lightbox 2」
ブラウザの左右に合わせて表示されます。
 
複数の写真のセットを作りたいとき
セットにしたいものすべてに「rel=”lightbox[roadtrip]“」といれます。

<a href="大きな画像" rel=”lightbox[roadtrip]“>
<img src="サムネイル画像" alt="代替文字列" 
title="写真のタイトル1" width="xxxx" height="xxx" 
class="alignnone size-thumbnail wp-image-xxxxx" />
</a>


こんな感じになります。
WordPressのプラグイン「Lightbox 2」
マウスを乗せると矢印が出てきてクリックすると次の写真が表示されます。
 
 
「オレンヂ」の場合、メインコンテンツスペースが左右400pxなのですが、時には大きく見せたいので、このWordPressのプラグイン「Lightbox 2」は重宝しそうです。

関連してるかもしれない記事

Pocket