2020/02/28 情報を更新いたしました。
図形やグラフをサイトに掲載する際、特にサイトのカラム幅が狭い場合ですと画像が縮小されたときに数値がとても見えにくくなる場合があります。クリックして画像をポップアップ表示にして拡大できれば元のサイズで表示されるためとても見やすくなります。
今回はそれを簡単に実現するためのjQueryのLightboxを利用したプラグインをご紹介します。動画解説も用意しております（当記事より動画の解説の方が分かりやすいかもしれません・・・）。
例：↓↓チャートやグラフが縮小されて縦軸などが見づらい・・
↓↓ポップアップで等倍に拡大
「WP jQuery Lightbox」のインストール
WordPressの管理画面から、「プラグイン」→「新規追加」と進み、「WP jQuery Lightbox」を検索します。もしくは、下記ボタンからダウンロードします。インストールしたら、有効化します。
詳細設定
基本的に設定なしで使用可能なプラグインですが、「スクリーンサイズに合わせて画像を縮小」にチェックを入れておきましょう。スマホ画面で時々画面をはみ出ることがあります。
自動的に画像（イメージリンク）にLightbox効果を適応する
このチェックは必ず必要です。
コメント欄でLightbox効果を有効にする（nofollow属性は無効になります。）
コメント欄に投稿された画像までLightboxが適用されます。
ダウンロードリンクを表示
Lightboxに画像のダウンロードリンクが表示されます。
Show image info on top
画像のCaptionを丈夫に表示します。
スクリーンサイズに合わせて画像を縮小
推奨。大きいサイズの画像でもスクリーンサイズに合わせてくれます。
Minimum margin to screen edge (default: 0)
画像とスクリーンのmarginを設定します。
Animation duration (in milliseconds)
アニメーションの再生時間です。値を大きくすると遅くなっていきます。
Slideshow speed (in milliseconds). 0 to disable.
スライドショーの表示速度を設定します。詳しくは後述。
Help text (default: none)
lightboxの下部に入力したテキストが表示されます。
コピーライトなどに使ってください。
複数の写真を一つのスライドショーにまとめる
このプラグインは複数の写真をまとめてスライドショーとしてポップアップ表示させることも可能です。
<a href="../image1.jpg" rel="lightbox[group]" title="タイトル">画像かテキスト</a> <a href="../image2.jpg" rel="lightbox[group]" title="タイトル">画像かテキスト</a>
スライドショー化したい画像のリンクにrel=”lightbox[group]”を付加します。このrel=”lightbox[group]”のカッコ内に入る関連付けタグは、何でも構いません。それぞれ同じ関連付けタグをつけた画像がまとめて表示されるといった仕様です。
↑右矢印をクリックするとグループ化した次の画像に移る
[group1]、[group2]とタグを使い分ければ別々のスライドショーを作り出すことができます。
プラグインを増やすとサイト全体が重くなることもありますのでこういうプラグインを使って画像を軽量化するのもいいかもしれません。
以前、WordPressが重くなる理由としてプラグインが原因の一つであると記事を書かせていただきました。 WordPressが重い！！その原因を発見するプラグイン「P3 (Plugin Performance Profiler)」 ただし、他にもWordPressが重くなる理由に画像...
それでは皆さん、良いWordPressライフを！
