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

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

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

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

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

 

一番簡単な方法はHTML

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

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

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

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

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

 

WordPressでの設定

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

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

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

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


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

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

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

 

Lightbox

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

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

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

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

 公式サイト    LightBox

 

結耶

結耶

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

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

 
…と私は思ったので導入してみようと思いましたが…初心者の私にはちょっと難しそうです(^^;)

LightBoxの導入方法を大まかに説明すると…

1 ファイルをダウンロードして解凍
2 中に入っているファイルを所定のフォルダにアップロード
3 コードをコピーして挿入(2箇所)

という感じなのですが…ファイルをアップロードしたり、コードを挿入したりしなくてはいけません。
おまけに間違えていたり、動作しないともうどうしていいかわからなくなってしまいそうです。

もっと簡単に導入できないかと探してみました。

 

スポンサーリンク

 

 

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

きらり

きらり

やっぱりプラグインを使うんだ~
結耶

結耶

だって「WordPressでLightboxを導入」で調べるとプラグインを使う方法がたくさん出てくるんだよ。
おまけに導入がめちゃ簡単♪

 
プラグイン『Easy FancyBox』を使うとLightbox機能が簡単にWordPressで使えるようになります。

サンプル
※クリックすると拡大します。

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

 

Easy FancyBoxのインストール

 場所  [プラグイン][新規追加]

 
Easy FancyBox』を検索して[今すぐインストール]して[有効化]してください。

 

使い方

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

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

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

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

 

 

設定

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

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

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

拡大

 

 

最後に

こんなこともできます。

リンクでリンク先を画像URLにすることで上のようにできます。

 

きらり

きらり

なんだかいろいろ使えそうだね。
結耶

結耶

そうだね~拡大できれば見やすくなるしね。
目の悪い私も助かるわ~♪

 
プラグインを使うと簡単に「クリックしてその場で拡大表示」することができます。
画像をたくさん記事に挿入する方などはとてもいいプラグインだと思います。

今回紹介した方法以外にもCSSを使う方法などがあります。

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトをはじめた駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。