[Web] WordPress 上の画像クリックで、画像が拡大表示されるようにする方法

WordPress 上のイメージをクリックした時に、拡大表示される方法を説明します

WordPress 上のイメージ

WordPress 上にイメージを貼り付ける時に、大きいまま貼ってしまうとテキストを読むのに邪魔に感じます。

小さくしてしまうと、画像の詳細がわからなくなり画像を貼り付けた意味がなくなってしまいます。

ということで、本文を読んでいる時にはイメージが分かるくらいの大きさで表示され、画像の詳細を見たいと思った時にクリックすることで、大きく表示されるのが、
読み手にとっては便利だと思います。

クリックすると、画像だけ表示されようにする方法

WordPress 標準の機能で実現できます。

  1. WordPress の エディタ上で、[メディアを追加] メディア追加ボタン を押すことで、メディア画面に遷移します。
  2. “メディアを追加”画面で、追加したい画像を選択しますリンク先選択
  3. 添付ファイルの表示設定中のリンク先を、[メディアファイル]と設定します
  4. 画面右下の [投稿に挿入] ボタンを押します

こうすることで、挿入された画像がクリックされると、その画像のみページに移動します。

ただし、移動した後は、読み手がバックボタン等で前のページに戻らないといけません。

また、現在の状態だと、本文中に表示されているサイズと別ページで表示されるサイズが同じなので、あまり意味がありません。

小さい画像をクリックすると大きな画像で表示する方法

先の方法だと、別表示してもあまり意味がありませんでしたので、もう少し便利にします。

本文中では小さい画像が表示されていて、別表示された時に大きく表示する方法を説明します。

実際には、大きい画像を用意しておいて、本文中に表示される時には小さく表示しておき、別表示された時にオリジナルのサイズで表示することになります。

リンク先として、メディアファイルを選択した画像は、以下のような コードが挿入されています。

コード

内側にある img タグには、オリジナル画像のサイズ情報が、width 属性と height 属性で指定されています。(数値は画像により変わります)

本文中に表示されるサイズを設定するには、この width 属性と height 属性を変更します。

width, height の一方のみを指定すると、画像の縦横比を保ちながら自動でスケーリングしてくれますので、片方だけを指定すると簡単です。

以下では、幅 600 の表示となるように変更しています。

コード

こうすることで、本文中では画像は小さく表示され、クリックされた時に大きく表示されるようになります。

ただ、画像をクリックすると大きく表示されるようになりましたが、別画面に遷移してしまい、本文に戻ってくるのが少し手間です。

現在の画面上にポップアップするように設定すると、読み手にとってはより便利になりそうです。

クリックで画像がポップアップする方法

WordPress 標準の方法ではできません。plugin を導入すると簡単にできます。

  1. WordPress の dashboard にいき、[プラグイン]-[新規追加]を選択
  2. “Easy FancyBox” をキーワードに、プラグインを検索(右上の検索キーワードに指定します)
  3. 表示された “Easy FancyBox” をインストールし、有効にします

上記のプラグインが、自動で行ってくれますので、画像を挿入したコードを変更する必要はありません。

言い換えると、これまで挿入した画像全てで同様の効果が得られることになります。

以下の画像は、上記の手順で設定していますので、実際の動作を確認してみてください。

Cat

まとめ:WordPress で画像をクリックすると大きくポップアップさせる方法

Wordpress で画像をクリックすると大きくポップアップさせる方法
  • 画像を挿入するときに、リンク先を「メディアファイル」にする
  • img タグの width/height 属性で、本文中に表示される大きさを設定する
  • Easy FancyBox をインストールしてポップアップされるようにする

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です