図形やグラフをサイトに掲載する際、特にサイトのカラム幅が狭い場合ですと画像が縮小されたときに数値がとても見えにくくなる場合があります。
クリックして画像をポップアップ表示にして拡大できれば元のサイズで表示されるためとても見やすくなります。
今回はそれを簡単に実現するためのjQueryのLightboxを利用したプラグインをご紹介します。
↓↓チャートやグラフが縮小されて縦軸などが見づらい・・
↓↓ポップアップで等倍に拡大
クリックして画像をポップアップ表示させるプラグイン「wp-jquery-lightbox」
ダウンロードはこちら：https://ja.wordpress.org/plugins/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を軽量に!!画像を圧縮するプラグイン「EWWW Image Optimizer」
http://nices.xsrv.jp/re/2016/06/ewww-image-optimizer.html
それでは皆さん、良いWordPressライフを！
