STUDIO Nirone

WordPress 投稿内の画像にポップアップ画面とリンクを作成してくれるプラグイン jQuery Colorbox

今使ってるテンプレートのDigiPressの唯一の不満が、ブログ記事内の画像の取り扱いです。DigiPressで画像を投稿する際は、記事内に元画像へのリンク付きサムネイル(小)or(大)または原寸をそのまま掲載の3つのオプションから選ぶのですが、問題はリンク付きサムネイルのリンク先が元の画像サイズそのまま開くため、デジ一眼で撮った写真を素のまま上げると(4000×3000)サイズの巨大画像がそのまま開きディスプレイにはまりきらないということになります。

そこで便利なプラグインが jQuery Colorbox です。

このプラグインは記事内で投稿された画像のリンク先を、あらかじめ設定したサイズのポップアップ画面に自動的にしてくれるプラグインです。

インストールは簡単で、WordPressのダッシュボード>プラグイン>新規追加 で 検索窓を使って「jQuery Colorbox」を検索すれば見つけられますので、そのままインストールします。

次に同じくダッシュボード>設定>jQuery Colorbox と進み オプションを設定します。
1.”Automate jQuery Colorbox for all images in pages, posts and galleries” をチェック
2.”Maximum width of the Colorbox: ” と ”Maximum height of the Colorbox:” に画像をクリックしたときに開くポップアップ画像を画面のどのくらいの幅、高さにするのかを、percentで相対的に指定するかpixcelで固定サイズに指定します(私は70percentで相対指定しています)
3.”Resize images:” をチェックします。←これをチェック入れることで2.で指定したサイズに合わせて元画像をリサイズして表示しますのでお忘れなく。
4.ダッシュボードのプラグイン画面からjQuery Colorboxを「有効化」します。

設定はこれだけで下の画像のような取り扱いになりました。

20130114-2

Return Top