プラグインもいらない!ワードプレスで画像をクリックで拡大表示させる方法

ブログ運営
記事内リンク先に広告が含まれている場合があります。

ワードプレスに表示する画像をしっかり見てもらいたいときってありますよね。

アイキャッチ画像や本文中に挿入する画像はあまりサイズが大きすぎると表示が遅くなったりするので適切なサイズにするべきですが、説明したいとかの場合は違います。

そんな時は「クリックしたら大きくなる画像」が便利です。

しかもたまに画像だけのページに飛ぶみたいなやつありますよね?あれじゃなくて、カッコよくボヨンって画像が浮き出るみたいなのにしたい!

実はプラグインもなしで、簡単にできるんです!

でもいざやろうと思ったら・・あれ?どうやるんだろう?ってなっちゃいます(汗)やり方を説明しておきますね♪

スポンサーリンク

ワードプレスで画像をクリックしたら拡大させる方法

まずは大きく表示させたい画像を追加します。追加の仕方はこちらの記事をご覧ください。

ワードプレスで記事投稿する際に画像を挿入する方法
ブログを書き始めると必ずしたくなるのが画像の挿入です。 画像が一枚でもあることで読みやすい記事になりますし、積極的に画像を入れましょう♪ ワードプレスでは簡単に画像を追加できるので、サクッと紹介しておきますね。 ワードプレスの記事投稿で画像...

この時の画像サイズがクリック後の画像サイズになりますので、小さすぎず大きすぎずのものをアップロードするようにしてくださいね。

で、ここからがいつもの画像挿入方法と変わります!

クリックしたら画像が拡大するための設定ポイント

画像を挿入する前に、右側にある「添付ファイルの詳細」部分の設定を変更します。

例えば用意したこちらの画像。2000×1281の画像です。

クリックしたら拡大画像

添付ファイルの詳細にて、タイトルと代替テキストなど必要事項を入力したら、下にスクロールします。

クリックで拡大

添付ファイルの表示設定のところを下記のように変更します。

クリックで拡大

  • リンク先・・メディアファイルを選択する
  • サイズ・・表示させたいサイズにする

この設定で 投稿に挿入 をクリックします。それがこちら↓

クリックしたら拡大する画像

この上の画像クリックしてみて♪

ボヨーンってなりましたよね!(スマホでは表示の大きさに限りがありますが・・)

比較するために640×410の画像も用意したので挿入してみました。

クリックしても拡大しない画像

この画像はリンク先をメディアファイルにせず、「なし」のままにしていますのでクリックもできません。

薬がおいてありますけど、さっきの拡大できた画像の方が文字がしっかり読めますね!

やはり説明が入っている画像などは大きくなったほうがみやすいです。

プラグインはいらない

初めはプラグインを入れないとできないのかな?と思ってたんですけど、入れずにできました。

もしかしたらテーマによって違ったりするかもしれませんが、まずはプラグインインストールの手間が必要ないこの方法で試してみてくださいねー!

まとめ

大きすぎると重たいし、表示もおかしくなる画像・・。とはいえ大きく見せたい時だってありますよね。

ワードプレスでは画像をクリックしたら拡大するようにする設定も覚えてしまえば簡単です。

画像を使った解説なども記事上でやりやすくなりますし便利なのでどんどんクリックでボヨンって大きくなる画像を活用してくださいね!

※テーマは無料のCocoonを使用しています。

コメント