WordPress

WordPress(ワードプレス)プラグインなしで画像を拡大させる方法

2021年1月24日

 

こんにちは、kei(@KeiKei0815blog)です!

 

悩む人
ワードプレスのプラグインを使わないで、画像を拡大してみせるやり方を知りたい!

 

ブログ記事内に画像を使って説明したりするとき、画像内の文字が小さすぎて読みづらいと感じたことがあるのではないでしょうか。

 

実際、当ブログの記事内に使われている画像で拡大しないと見辛いものもが複数ありユーザービリティーを低下させているなと感じました...。

 

そんな時に画像を拡大して読みやすくできる機能があったら便利ですよね

 

ワードプレスには、「Easy Fancy Box」などプラグインをインストールすることで、簡単に画像を拡大できる便利なものもあります。

 

ただ、プラグイン同士が干渉し合うことを考え自分で実装できるものがないかを調べました。

 

本記事では、クリックしたらモーダルで画像を拡大して表示できるように実装してみましたので、備忘録として残しておきます。

 

 

ワードプレス:画像を拡大して表示させる前にやること

 

まずは、ワードプレスでCSS, JSが使えるようにプラグインをインストールします。

 

おすすめのプラグインは、Simple Custom CSS and JSです。

 

こちらをインストールしてCSS,JSが使えるようにしましょう!
KEI

 

また、「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ミリ秒かけてモーダルが閉じるようにしています。

 

まとめ

 

今回は、ワードプレスで画像をモーダル表示させるやり方について紹介しました。

 

後々は、全記事に画像を拡大できるように実装を進めていきたいなと考えています。

 

(もし、もっと簡単な実装方法やいいやり方がありましたら教えていただけたら嬉しいです!)

 

今回は以上です。

 

ここまで読んでいただきありがとうございました!

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-WordPress