Lightbox系プラグインを入れて気軽に画像を拡大出来るようにしてみた

どうもこんにちは。ましゅーです。

私ブログを読んで下さってる方は大体想像つくと思うのですが、趣味の模型制作、買ったモノ自慢、そして旅行・お出かけ…などなどを記事にしており、そういった記事の性質上、1記事あたりの画像の掲載枚数がものすごいことになっています。

そのため画像の縦の幅だけでスクロールバーがエラいことになっておりました。

なので、先日の週記でもチラっと書いたのですが、サムネイル画像のサイズを縮小するとともに、Lightbox系プラグインを導入して、画像をクリックすると同じウィンドウでフワッと画像が表示されるようにしました。

ということで、今回はこの「画像」に関する変更について順を追って説明したいと思います。

[スポンサードリンク]
[ad#entry1]

ウチのブログ記事は画像が多すぎる!!

冒頭で書いたとおり、扱っている記事の性質上どうしても画像が多くなってしまいます。

模型制作やレビュー記事でも10枚20枚、中には1記事70枚とか掲載してる時もあり（流石にこれは多すぎた。反省）、「もう少し少なく出来るだろ」とか「記事分割しろよ」とツッコまれそうなくらい画像を載せています。

この手のジャンルの記事は、文章力の無い私がアレコレと書き殴るよりも1枚の画像をバンと載せた方が読者に伝わりやすいだろうと思い画像を載せているのですが、画像が多いならではの悩みも発生します。

画像が多ければ多いほど縦長なページになってしまう

言わずもがな画像には横幅と縦幅があり、これらをうまく調整しないと枠を突き破ってレイアウトがおかしくなったりするわけです。

…が、ウチのブログ（WordPress）はわりとその辺をしっかり理解できてる良い子なので、デカい画像を載せても表示領域の幅を突き破らないように調整してくれています。

なので、それに甘んじて今まではブログのテキストスペースの幅の限界のサイズ（764×573px）で掲載していました。

↑今までの画像のサイズ。この画像1枚だけでものっそい縦幅食っています。

これがテキスト中心で、1記事あたりの画像が5枚未満だったら何ら問題ないのですが、10枚、20枚、30枚とバカみたいに画像を多用しているウチでは画像だけで縦の幅が偉いことになってしまいます。

なので画像1枚のサイズを小さくした

この問題を解決するには単純に

1. 画像の枚数を減らす
2. 画像のサイズを小さくする

の2つの方法がまず出てくるかと思います。

…が、やはり画像はなるべくたくさん掲載したいという私のこだわりもあるので、なるべく枚数は変えず（それでも不要な画像は極力削ってます）に行きたいと思いました。

で、そうなると、2つ目の画像を小さくするという選択肢を採用するわけで、ライブドアブログ時代に設定していた横幅500pxで画像を掲載してみることにしました。

↑こちらがその横幅500ピクセルの画像（500×375ピクセル）。

画像の横幅を変更すると、それに伴い縦幅も自動的に変更されるので、375ピクセルとなり、先述のフルサイズ画像に比べて3センチほど縦幅の縮小に成功しました。

…え? 何でピクセルじゃなくセンチだって? ディスプレイに定規あてて測ったからです。

でも拡大画像だって見たい

単純に画像サイズを小さくしたのでその分だけ縦幅も縮小できたはずです。

…が、レビューや模型制作は細かい所を解説する事が多く、画像も細部をシッカリ見たいという人もいると思います。私がその一人です。

なので、ただ画像サイズを小さくしただけで終わらせるのではなく、画像をクリックして拡大画像が表示されるように設定すべきと思いました。

その場合、従来だと画像をクリックしたら別タブ（あるいは同じタブ）で画像が表示されるように、画像にリンクを貼るわけですが、画像を見終わった後にいちいちタブを閉じたり「戻る」のが面倒だなぁと思いました。

そこでLightbox系のプラグインに手を出したわけです。

[スポンサードリンク]
[ad#entry2]

Lightbox系プラグインを追加してみた

さて、本題に入るわけですが、

• 記事で表示されるサムネイル画像は小さくして
• 読者が見たい画像だけ拡大表示でき
• 見終わったら速やかに記事に復帰する

…というワガママな仕組みを導入したかったので、以前より色々調べていたのです。

それで、そんなワガママな仕組みを実現できるLightboxというJavaScriptとCSSで作動するスプリクトがあり、WordPressではプラグインを追加するだけで実装出来るのでやってみました。

Lightboxとは

まず「Lightbox」って何ぞ? となったので調べてみると、以下のような説明がありました。

Webブラウザで、同一画面上に画像を上乗せ表示するためのスクリプト。材料はCSSとJavascriptと少々の画像。

ひとたび縮小画像をクリックすれば、黒色半透明の背景がページを覆い、その上に拡大画像が真ん中に表示される。画像を閉じれば、元のページに戻る。

via : Lightboxとは – はてなキーワード

だいたい「あー、アレね」ってなったかと思いますが、百聞は一見にしかずということで、下の画像をクリックしてみてください。

…安心してください。アフィリエイトでもランキング投票バナーでもありませんよ?

で、クリックすると上の画像のように背景が薄暗くなってモワーッと大きい画像が浮かび上がります。

逆に画像を消したくなったら右上のバツ印または画像の外をクリックすることでスーッと画像が消えて元の記事ページにすぐ戻ります。

記事と同じページに表示されるので、気軽に拡大できて飽きたらすぐ消せるというものです。便利やなぁ。考えた人にチューしたくなるくらいだわ。

追加したのは『Fancybox for WordPress』というプラグイン

そんな便利なLightbox系プラグインはいくつか種類があるのですが、私は『Fancybox for WordPress』というプラグインを導入しました。

他にも高機能なプラグインとしては『Easy FancyBox』もあり、最初はそちらを試してみたのですが、私のブログだと他のJavaScriptライブラリとケンカしちゃってるみたいで正しく作動しませんでした。

次に選んだ『WP-Slimbox2 Plugin』は細かい設定も出来るので、最初「お、これいいな!」と思ったのですが、元の画像サイズが表示されてしまう欠点ががあったので変更しました。

これは元の画像サイズが600pxとかだったらいいのですが、横幅2048ピクセルで設定してるウチのデジカメだとアカン（めんどくさいヤツだなぁ…）。

という試行錯誤を経てようやく良さそうなLightbox系プラグインというのが、先程の『Fancybox for WordPress』でした。

設定は英語で書かれていますが、日本語で解説しているページもあるので簡単に設定出来ますが、初期状態のままでも十分使えるので私のように知識のない人でも気軽に実装できるのが魅力的。

…ただ、Lightbox系プラグインに共通していることですが、初期状態のままでも使えるとはいえ、掲載する画像の設定は必要です。

上の画像のように、画像の設定でリンク先をメディアファイルに設定（赤丸部分）しておいてください。

一個一個設定するのは面倒に見えますが、アップロード画像一覧の画面で設定しておけば以降の画像も同じ設定が適応されるので楽です。

で、逆にLightboxを作動させたくない画像は個別にリンク先を「なし」にすればOK。こういう細かい使い分けができるのは有り難いですよね。

[スポンサードリンク]
[ad#entry3]

まとめ

画像やテキストに関する大きさはブログを始めた頃からずっと「あーでもない、こーでもない」と試行錯誤しながらモンモンしていました。

私はこのサイズがいいけど読者はどうだろう…と言った具合に。

テキストの方はさておき、画像に関しては今回の設定が（今のところ）はいい感じなので、しばらく様子を見て問題なければこのまま導入しようと思います。