こんにちは、kei（@KeiKei0815blog）です！
ブログ記事内に画像を使って説明したりするとき、画像内の文字が小さすぎて読みづらいと感じたことがあるのではないでしょうか。
実際、当ブログの記事内に使われている画像で拡大しないと見辛いものもが複数ありユーザービリティーを低下させているなと感じました...。
そんな時に画像を拡大して読みやすくできる機能があったら便利ですよね。
ただ、プラグイン同士が干渉し合うことを考え自分で実装できるものがないかを調べました。
本記事では、クリックしたらモーダルで画像を拡大して表示できるように実装してみましたので、備忘録として残しておきます。
[toc]
ワードプレス：画像を拡大して表示させる前にやること
まずは、ワードプレスでCSS, JSが使えるようにプラグインをインストールします。
おすすめのプラグインは、Simple Custom CSS and JSです。
また、「function.php」に直接書くやり方もあります。
プラグインをインストールしたくない・ソースを編集するのに抵抗がない方は、以下を参考に設定してみてください。
» WordPress：ページや記事ごとに個別のCSSやJavaScriptを追加する方法
ワードプレス：プラグインなしで画像を拡大表示させる方法
プラグインなしで画像を表示する方法
それでは、ワードプレスでプラグインを使わず画像を拡大表示させるやり方を紹介します。
参考サイト：むねひろ@プログラマーさん
HTML
まずは、HTMLソースは以下の通りです。
HTML
<p class="mousepointer-hand"><img src="画像のURL" /></p>
<div id="graydisplay"></div>
p要素に『mousepointer-hand』のclass名をつけて、画像の上にカーソルがのった時にクリックできることがわかるようにします。
最後のidタグに「graydisplay」を付与して、モーダルが表示されるようにします。
CSS
続いてCSSです。
CSS
.mousepointer-hand {
cursor: pointer;
}
#graydisplay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 100%!important;
height: 100%;
background: rgba(0,0,0,0.45);
z-index:10;
}
#graydisplay img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 80%;
max-height: 80%;
margin: auto;
height: auto;
}
解説
command
#graydisplay img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 80%;
max-height: 80%;
margin: auto;
height: auto;
}
モーダルで表示される画像を「max-width: 80%;、max-height: 80%;」の大きさで調整しています。
また、「height: auto;」でウィンドウ幅に合わせて画像サイズを自動で圧縮させるようにしています。
JQuery
JQueryは以下です。
JQuery
$(function(){
$("main img").click(function() {
$("#graydisplay").html($(this).prop('outerHTML'));
$("#graydisplay").fadeIn(200);
});
$("#graydisplay, #graydisplay img").click(function() {
$("#graydisplay").fadeOut(200);
});
});
解説
JQuery
$(function(){
$("main img").click(function() {
$("#graydisplay").html($(this).prop('outerHTML'));
$("#graydisplay").fadeIn(200);
});
上記は、クリック時に画像が表示される場合の処理です。
『$("#graydisplay").fadeIn(200);』で200ミリ秒かけてモーダルが表示されるようになっています。
JQuery
$("#graydisplay, #graydisplay img").click(function() {
$("#graydisplay").fadeOut(200);
こちらがモーダルが閉じる処理です。
モーダルが開くときと同様に、『$("#graydisplay").fadeOut(200);』で200ミリ秒かけてモーダルが閉じるようにしています。
まとめ
今回は、ワードプレスで画像をモーダル表示させるやり方について紹介しました。
後々は、全記事に画像を拡大できるように実装を進めていきたいなと考えています。
（もし、もっと簡単な実装方法やいいやり方がありましたら教えていただけたら嬉しいです！）
今回は以上です。
ここまで読んでいただきありがとうございました！