スポンサーリンク

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

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

  • 2020年5月23日
    『Light Box』他を少し書き換えをしました。

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

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

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

スポンサーリンク

一番簡単な方法はHTML

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

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

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

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

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

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

WordPressでの設定

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

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

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

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

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

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

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

Luxeritasをお使いの方

WordPressテーマ Luxeritas(ルクセリタス)には「Lightbox」が実装されています。Luxeritasでの設定方法は下記を参考にしてください。

Lightbox

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

ライトボックス

【英】LightBox
ライトボックスとは、Webページ上のサムネイル画像を拡大表示できるJavaScriptのライブラリ、および、そのライブラリを使用して実現できる画像表示機能のことである。ボルチモア在住のWebデザイナー、Lokesh Dhakarによって開発された。

ライトボックスは、サムネイル画像をクリックした場合にモーダルウィンドウを開いて拡大画像を表示する。Ajaxの技術が使用されており、画面遷移せずになめらかに画像を閲覧できる。

Weblio辞典 IT用語辞典バイナリ 『ライトボックス』頁より引用

結耶

結耶

これこれ!こんな感じに拡大表示させたい~!

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

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

1ファイルをダウンロードして解凍

2中に入っているファイルを所定のフォルダにアップロード

3読み込むためのコードをコピーしてHEAD内に挿入

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

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

※導入の参考にこちら

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

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

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

Easy FancyBoxのインストール

インストール

Easy Fancy Box

インストール方法

  1. WordPress管理画面から[プラグイン]→[新規追加]
  2. Easy Fancy Box』と入力して検索
  3. [今すぐインストール]をクリック。インストール後[有効化]する

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

使い方

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

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

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

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

設定

 場所  [設定][メディア]

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

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

最後に

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

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

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

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人
結耶(ゆうや)

2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。

登場キャラクター
きらり
きらり

ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。

楽天ROOM