「画像クリックでポップアップ」Cocoonなら簡単！方法をご紹介します

WordPressで投稿や固定ページに画像を載せたいときに

「大きな画像だけど小さく載せたい。でも詳しく見たい人には大きく見せたい」

ってこと、ありますよね！

そんなときに 画像をポップアップさせたい と思うのですが、一般的なテーマだとプラグインを入れないとできません。しかし、ブログなどにお勧めのテーマ Cocoon なら簡単に画像のポップアップができます。

超簡単！Cocoonで画像をクリックするとポップアップさせる方法

Cocoonで画像をクリックしたときにポップアップさせる方法はとても簡単です。

こんな感じに小さめの画像を入れたときに画像を大きくポップアップさせるには、

画像をクリックして、メディアファイル をクリック、そうすると

こんな感じに メディアファイル というリンクができるので、この状態で投稿または固定ページを保存します。

画像をクリックするとポップアップされる

表側からこの記事を表示させて

画像をクリックすると、

このようにポップアップで表示され、× をクリックするか、黒い部分をクリックすると元の記事に戻れるようになります。

テーマがCocoonでなかった場合、ポップアップでなくその画像に移動してしまう

テーマがCocoonでなかった場合は、画像をクリックすると

同じように画像は表示されるのですが、urlが画像のものになっているため元の記事を見るにはブラウザの戻るボタンをクリックしないと戻ることができません。

Cocoonのポップアップ設定によって5種類の表示方法が利用できる

Cocoon設定→画像 でポップアップの種類を5種類から選ぶことができます。

ポップアップ＝画像の拡大効果 という項目から設定できます。それぞれの違いについては解説ページを見るとわかりやすいです。

Cocoonでポップアップしている川鵜などの写真がある記事はこちら

ゆーそうとでは地域情報サイト「まちさがさんぽ」を運営しています。Cocoonでポップアップしている記事が

【町田駅付近の自然】春の境川ゆっくりロードで見つけられる花や生き物 | まちさがさんぽ

とても天気が良かったので境川で見かけた花や生き物を写真に撮ってきました。町田駅という大きな駅の近くなのに境川には驚くほどたくさんの自然があります。ゴールデンウ…

まちさがさんぽ〜町田駅付近の町田市・相模原市の生活・地域情報ブログサイト〜

こちらとなります。ぜひご覧下さい！

この記事のご依頼・お問い合わせの方はこちら