今回は画像をタップしたら別タブで表示・拡大するやり方と、ポップアップさせるプラグインを紹介していこうと思います。
元の画面は残しつつ、タップした画面を別のタブで開くやり方です。自分は記事に貼った画像が携帯で見ると小さくなっていたので、タップして拡大できるようにしたいなと思って調べてみました。

実際に自分もやり方が分からなくて結構苦戦しました。やり方自体は簡単だったので、すぐに実践してみてください。


難易度
この記事の内容
- Cocoonで画像をポップアップする方法
- おすすめプラグインを紹介
画像を別のタブで表示させる
注意 Cocoonでやっているので他のテーマでも同じようにできるのかは分かりません。
①まずは画像を貼り付けます


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


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


④完了


とても簡単です。確認する場合は、プレビューでしてみてください。
ちなみにメディアファイルを選ぶと別のタブで表示ではなく、そのままのページで大きく表示されます。両方試してみて良かった方を使ってみてください。
プラグインを使ってポップアップ



もっとおしゃれにポップアップさせたい!クリックした後なめらかに表示されたり、ふわっと表示されるプラグインを使いたい!
もともとついている機能でも十分やっていけると思いますが、もっと洒落た感じにしたいというかたは、プラグインを使うのをおすすめします。無料で使えるので、初心者でも簡単に利用できます。
ポップアップとは?
ポップアップとは、コンピュータの操作画面で、最前面に飛び出すように現れるウインドウなどの表示要素のこと。すでに表示されている他の要素に覆い被されるように出現し、利用者にメッセージを伝えたり特定の操作を促したりするために用いられることが多い。
e-wordsより引用
ユーザーの意図とは関係なく、表示されるものもポップアップだそうです。
- ページを開いてから一定時間経過することで表示されるもの。
- クリックした際に表示され、拡大に使える。
- ユーザーが離脱しようとしたときに表示されるもの。
- ページを開いたら表示されるもの。
今回は拡大に絞って紹介していきたと思います。
①Easy FancyBox


インストロールするだけでポップアップ表示させることができます。
ポップアップさせるプラグインの中では、一番使われていると思います。
②WP jQuery Lightbox


「WP jQuery Lightbox」も記事の中の画像をクリックすると、ポップアップできるプラグインです。
全て試してみて、どれがいいのか確かめるのもいいと思います。
最後に
自分の場合はプラグインを使ってみましたが、もとある機能を使ったほうが好きだったので、プラグインは使っていません。
自分の好みのポップアップを選んでみてください。
コメント