『Colorbox』というLightbox風のスクリプトを使用しているプラグインです。

プラグイン配布元 → WordPress › jQuery Colorbox « WordPress Plugins

導入方法

1. プラグイン配布元より『jquery-colorbox.***.zip』をダウンロード（Download）。
2. 解凍後、『jquery-colorbox』をwp-content/pluginsへアップロード。
3. 管理画面（Plugins（プラグイン））にて『jQuery Colorbox』を有効化する。

オプションの設定

Settings（設定） > jQuery Colorbox よりオプションの設定を行う。

　Theme：テーマを5種類から選択
　Maximum width of an image：表示する画像の幅（指定しない場合はfalse）
　Maximum height of an image：表示する画像の高さ（指定しない場合はfalse）
　Maximum width of the Colorbox：画像の余白部分の幅（指定しない場合はfalse）
　Maximum height of the Colorbox：画像の余白部分の幅（指定しない場合はfalse）

使用方法

特になし。
サムネイル画像をクリックすれば、自動的にポップアップ表示されるよう。

スクリーンショット

動作確認環境

WordPress 2.9.1
Plugin ver. 1.3.3

導入方法

1. プラグイン配布元より『wp-websnapr-thumbs.zip』をダウンロード（Download）。
2. 解凍後、『wp-websnapr-thumbs』をwp-content/pluginsへアップロード。
3. 管理画面（Plugins（プラグイン））にて『WP-Websnapr-Thumb』を有効化する。

表示方法

表示したいサイトのURLを下記のようにショートコードを挿入。

[wst]http://********[/wst]

サムネイル画像にURLをリンクさせる場合

[wstlink]http://********[/link]

サムネイル画像を右側に表示させたい場合

[wst]r http://********[/wst]
または
[wstlink]r http://********[/wstlink]

[wst]・[wsrlink]の次に『r』+『半角スペース』

スクリーンショット

動作確認環境

WordPress 2.8.2
Plugin ver. 0.0.1

プラグイン配布元 → WordPress › Polaroid on the Fly « WordPress Plugins

導入方法

1. プラグイン配布元より、『polaroid-on-the-fly.**.zip』をダウンロード。（Download）
2. 解凍後、『polaroid-on-the-fly』をwp-content/pluginsへアップロード。
3. 管理画面（Plugins（プラグイン））にて『Polaroid on the Fly』を有効化する。

オプションの設定

Settings（設定） > Polaroid on the Flyよりオプションの設定を行う

　Enable Security：セキュリティを有効にするかの可否

　Use Tinyurl.com：『Tinyurl.com』（URLの短縮）使用の可否

　Use Lightbox：Lightbox使用の可否

　Use Image Captions:キャプションを表示するかの可否

　Encode URL:

　Window Target：画像クリック時のウィンドウ表示方法
　　New：新しいウィンドウを開く
　　Self：同じウィンドウで表示
　　None：Lightbox使用時はNone

　Height：高さ

　Width ：幅

　Background Color：背景色

表示方法

画像の大きさは『200×200px』以上『2000x2000px』以下にする。
imgタグ内に、下記の属性を追加する。

rel="polaroid" alt="キャプション[roadtrip]"

roadtrip：Lightbox使用時、スライド表示する場合の分類名。

例：

<img src="http://******.jpg" rel="polaroid" width="***" height="***" alt="Sample[roadtrip]" />

alt属性を最後尾にしないと、キャプション表示がおかしくなる場合がある。

フォントを変更する

あまりメリットはないかもしれませんが、一応フォントを変更したい場合。

『polaroid-on-the-fly』フォルダ内に、使用したいフォントをアップロードする。
『gen-polaroid.php』167行目〜169行目あたりを修正。

			$width = imagettfbbox(10, 0, "./annifont.ttf", $text[$i]);
			$text_pos_x = (196 - $width[2])/2;
			imagettftext($polaroid, 18, 0, $text_pos_x, $text_pos_y[$i]+10, $black, "./annifont.ttf", $text[$i]);

『annifont.ttf』をアップロードしたフォント名に変更。

スクリーンショット

動作確認環境

WordPress 2.7.1
Plugin ver. 0.7

※サーバーによっては、画像が表示されない・キャプション表示がうまくいかない等、ある場合があります。

ポラロイド初心者の方にオススメ！【国内版】Polaroid（ポラロイド） 600高感度レギュラーイン…

プラグイン配布元 → WordPress › WP-prettyPhoto « WordPress Plugins

導入方法

1. プラグイン配布元より『wp-prettyphoto.***.zip』をダウンロード（Download）。
2. 解凍後、『wp-prettyphoto』をwp-content/pluginsへアップロード。
3. 管理画面（Plugins（プラグイン））にて『WP-prettyPhoto』を有効化する。

オプションの設定

Settings（設定） > WP-prettyPhotoよりオプションの設定を行う。

　Auto-prettify image links：aタグ内にrel属性を自動的に挿入する
　prettyPhoto theme：テーマを選択。dark_rounded・dark_square・light_roundedの3種類
　Rel value：rel属性の値
　Animation speed：アニメーション速度
　Padding：余白の大きさ
　Opacity：透明度
　Show title：title属性で指定した値を表示するかの可否
　Allow resize：
　Counter Separator Label：セパレータ

スクリーンショット

動作確認環境

WordPress 2.7.1
Plugin ver. 1.1.3

Lightbox系プラグインは、これでもかというほどいっぱいあるので、正直どれを選んでいいか迷うかと思います。

とりあえず、現在私の使っているものを紹介してみることにしました。

プラグイン配布元 → WordPress › Lightbox 2 « WordPress Plugins

導入方法

1. プラグイン配布元より『lightbox-***.zip』をダウンロード。（Download）
2. 解凍後、『lightbox-2』をwp-content/pluginsへフォルダごとアップロード。
3. 管理画面（Plugins（プラグイン））にて『Lightbox 2』を有効化する。
4. オプションの設定を行う。

オプションの設定

Setting（設定） > Lightbox 2 よりオプションの設定を行う。

Lightbox Appearance：
　アピアランスを白・黒・グレー・ダークグレーの4色から選ぶことが出来る。
　デフォルトは黒。

Auto-lightbox image links：
　自動的にLightboxのコードを挿入するかの可否。

未チェックの場合

aタグ内に、下記コードを挿入。

rel="lightbox[***]

***は記事のID等。

スクリーンショット

動作確認環境

WordPress 2.6.2
Plugin ver. 2.7.8

導入方法

1. プラグイン配布元から『wpj-highslide.zip』をダウンロード。
2. 解凍後、『wpj-highslide』フォルダ内、『wpj-highslide.php』を編集する。
3. 15行目をWordPressをインストールした環境に合わせて修正する。




$highslide_path = get_settings('home')."/wordpress/wp-content/plugins/wpj-highslide/";




4. 16行目以下で、画像表示のデザインを決める。
   表示させたいデザインのコメントアウトされている箇所のコメントアウトを解除する。

   　選べるデザインは以下7種類。
   　ドロップシャドウ付縁なし
   　ドロップシャドウなし。
   　縁が輝くデザイン。
   　ドロップシャドウ付、10pxの白いボーダーのデザイン
   　白い角丸デザイン
   　スライドショーデザイン
   　コントロールボックス付スライドショーデザイン

5. 『wpj-highslide』をフォルダごと、wp-content/pluginsへアップロード。
6. 管理画面（Plugins（プラグイン））にて有効化する。

画像を拡大表示させる

<a href="images/full-image.jpg" rel="lightbox">
	<img src="images/thumbnail.jpg" alt="Highslide JS" title="Click to enlarge" height="***" width="***" />
</a>

上記の様にタグを挿入する。

スクリーンショット

動作確認環境

WordPress 2.5.1
Plugin ver. 0.2