画像をクリックして拡大表示させるには？

2019年3月14日2020年5月23日便利なプラグイン

みなさんブログで写真や画像を載せていますよね。

「記事に写真や画像を挿入したものの…画像が小さい」「クリックして画像を大きく表示させたい」と思うことありませんか？

今回は「画像をクリックして拡大表示させる方法」について描きたいと思います。

一番簡単な方法はHTML

画像をクリックして拡大表示させる方法はいくつかあります。

一番簡単な方法はaタグ(リンク)を使う方法です。

<a href="画像のURL" target="_blank">
    <img src="画像のURL" width="幅" height="高さ" alt="">
</a>

わかりやすく改行しています。記事に挿入する場合は一行にしてください。(改行したままにすると画像の前後に余分なスペースが入ります。)

imgが記事内に挿入される画像で、a(リンク)でリンク先を画像にして拡大表示させるのです。

みなさんフリー素材サイトなどを利用したことあると思います。
画像をダウンロードするときに、「ダウンロードボタン」やサンプル画像をクリックすると画像が別ウィンドウで表示されますよね。
上記のようにするとあのように画像が拡大表示されます。

WordPressでの設定

WordPressで記事に画像を挿入させるときは上記のタグをわざわざ書かなくても設定できます。

1 投稿編集画面上の［メディアを追加］をクリック

2 画像一覧から記事に挿入する画像を選択

3 右に表示される「添付ファイルの詳細」の下にある「添付ファイルの表示設定」のリンク先を「メディアファイル」にして［投稿に挿入］をクリックしてください。

「メディアファイル」にすると下にURLが表示されます。画像はURLを消しています。

この方法だと拡大した画像は『別ウィンドウ』で開きます。(target指定によってはページが切り替わります。)

それでもいいとは思いますが…「できれば画像をクリックしたときにその場で画像を拡大表示させたい！」と私は思ったので他の方法を探してみました。

Lightbox

画像をクリックして拡大表示させる方法として代表的な方法で『Lightbox』というものがあるそです。

※公式サイトにサンプルがありますのでそちらをご覧ください。

私が使っているテーマ「Luxeritas」にはこのLight Boxが実装されているので実際に私は導入したことはありません。ですが、LightBoxの導入方法を大まかに説明すると…

というような流れです。初心者の方でもできると思います。

プラグインを使わずJavaScriptとCSSで実装でき、プラグインより軽量なので「プラグインを使いたくない」という方にはオススメです。

※導入の参考にこちら

Lightbox機能が使えるプラグイン『Easy FancyBox』

「もっと簡単に使いたい！」という方はプラグインがあります。プラグイン『Easy FancyBox』を使うとLightbox機能が簡単にWordPressで使えるようになります。

レスポンシブ対応で、使っている端末に合わせて拡大表示してくれます。
また画像だけではなくYouTubeの動画などもクリックして拡大表示させることができます！

Easy FancyBoxのインストール

インストール

※見つからない場合はプラグインページ(下記リンク)よりファイルをダウンロードしてアップロードしてください。アップロード方法はこちら

使い方

プラグインを有効化すればすぐに使うことができます。

使い方は最初に書いた『一番簡単な方法はHTML』で書いた「 WordPressでの設定」と同じです。

固定ページや投稿の編集画面上の［メディアを追加］表示する画像を選択使用して、表示位置、表示サイズを設定して、リンク先を『メディアファイル』するだけです。

必ずリンク先を『メディアファイル』にしてください。リンク先をメディアファイルにしていないと拡大表示されません。

設定

デフォルトでは「Image」のみ拡大表示されるようになっています。

「Easy FancyBox」は画像以外のメディアも拡大表示できます。
Image(画像)以外のメディアも拡大表示する場合は設定で拡大表示させたいものにチェックを入れてください。

最後に

記事のレイアウト上画像を小さくしたりしなくてはならない場合があります。ですが、小さくしてしまうとせっかくの画像や写真も見づらくなってしまいます。

このような機能を使えばユーザーにもわかりやすくなると思います。

今回はHTML、JavaScript、プラグインの3つの方法を紹介しました。3つともとても簡単にできるので興味がある方はぜひ参考にしてください。