【Cocoon】画像リンクを別ウィンドウ(タブ)で表示&画像を拡大(ポップアップ)させるプラグインを紹介～体験も含めて～

今回は画像をタップしたら別タブで表示・拡大するやり方と、ポップアップさせるプラグインを紹介していこうと思います。

元の画面は残しつつ、タップした画面を別のタブで開くやり方です。自分は記事に貼った画像が携帯で見ると小さくなっていたので、タップして拡大できるようにしたいなと思って調べてみました。

画像を別のタブで表示させる

注意　Cocoonでやっているので他のテーマでも同じようにできるのかは分かりません。

①まずは画像を貼り付けます

②左から3番目にあるリンクを編集をクリック

③添付ファイルのページをクリック

④完了

とても簡単です。確認する場合は、プレビューでしてみてください。

ちなみにメディアファイルを選ぶと別のタブで表示ではなく、そのままのページで大きく表示されます。両方試してみて良かった方を使ってみてください。

プラグインを使ってポップアップ

もともとついている機能でも十分やっていけると思いますが、もっと洒落た感じにしたいというかたは、プラグインを使うのをおすすめします。無料で使えるので、初心者でも簡単に利用できます。

ポップアップとは？

ポップアップとは、コンピュータの操作画面で、最前面に飛び出すように現れるウインドウなどの表示要素のこと。すでに表示されている他の要素に覆い被されるように出現し、利用者にメッセージを伝えたり特定の操作を促したりするために用いられることが多い。

e-wordsより引用

ユーザーの意図とは関係なく、表示されるものもポップアップだそうです。

今回は拡大に絞って紹介していきたと思います。

①Easy　FancyBox

インストロールするだけでポップアップ表示させることができます。

ポップアップさせるプラグインの中では、一番使われていると思います。

②WP jQuery Lightbox

「WP jQuery Lightbox」も記事の中の画像をクリックすると、ポップアップできるプラグインです。

全て試してみて、どれがいいのか確かめるのもいいと思います。

最後に

自分の場合はプラグインを使ってみましたが、もとある機能を使ったほうが好きだったので、プラグインは使っていません。

自分の好みのポップアップを選んでみてください。