「画像クリックでポップアップ」Cocoonなら簡単!方法をご紹介します
![Photo by Markus Winkler on Unsplash](https://usort.jp/wp-content/uploads/2022/04/expand.jpg)
WordPressで投稿や固定ページに画像を載せたいときに
「大きな画像だけど小さく載せたい。でも詳しく見たい人には大きく見せたい」
ってこと、ありますよね!
そんなときに 画像をポップアップさせたい と思うのですが、一般的なテーマだとプラグインを入れないとできません。しかし、ブログなどにお勧めのテーマ Cocoon なら簡単に画像のポップアップができます。
超簡単!Cocoonで画像をクリックするとポップアップさせる方法
Cocoonで画像をクリックしたときにポップアップさせる方法はとても簡単です。
![](https://usort.jp/wp-content/uploads/2022/04/4B4720F2-22AD-481C-8061-18F67868DBAC.jpg)
こんな感じに小さめの画像を入れたときに画像を大きくポップアップさせるには、
![](https://usort.jp/wp-content/uploads/2022/04/168A5010-2A8F-40C1-B4B1-EFF9AF66618E-1.jpg)
画像をクリックして、メディアファイル をクリック、そうすると
![](https://usort.jp/wp-content/uploads/2022/04/64E452AE-C23B-41EE-AC91-932D91F030ED.jpg)
こんな感じに メディアファイル というリンクができるので、この状態で投稿または固定ページを保存します。
画像をクリックするとポップアップされる
表側からこの記事を表示させて
![](https://usort.jp/wp-content/uploads/2022/04/A6B9B742-ADFF-4EE7-A780-BB62C07A8080.jpg)
画像をクリックすると、
![](https://usort.jp/wp-content/uploads/2022/04/4B9EEC88-E923-4C47-9712-5B7DBBC72CE5-1024x674.jpg)
このようにポップアップで表示され、× をクリックするか、黒い部分をクリックすると元の記事に戻れるようになります。
テーマがCocoonでなかった場合、ポップアップでなくその画像に移動してしまう
テーマがCocoonでなかった場合は、画像をクリックすると
![](https://usort.jp/wp-content/uploads/2022/04/031DFC47-35AA-4A77-917A-C4CDDDE51BC7-1024x649.jpg)
同じように画像は表示されるのですが、urlが画像のものになっているため元の記事を見るにはブラウザの戻るボタンをクリックしないと戻ることができません。
Cocoonのポップアップ設定によって5種類の表示方法が利用できる
Cocoon設定→画像 でポップアップの種類を5種類から選ぶことができます。
![](https://usort.jp/wp-content/uploads/2022/04/3A1CD306-229B-4884-A80E-0AAF563D960C-1024x154.png)
![](https://usort.jp/wp-content/uploads/2022/04/5AF45E3A-0213-497A-82DF-E9BB8C9CE3CF.png)
ポップアップ=画像の拡大効果 という項目から設定できます。それぞれの違いについては解説ページを見るとわかりやすいです。
Cocoonでポップアップしている川鵜などの写真がある記事はこちら
ゆーそうとでは地域情報サイト「まちさがさんぽ」を運営しています。Cocoonでポップアップしている記事が
こちらとなります。ぜひご覧下さい!
ホームページの新規作成・リニューアルで
お困りの担当者様へ
![](https://usort.jp/wp-content/uploads/2023/07/illust_usort_05.png)
WordPressの機能を活かして運用しやすいホームページを作成
せっかくのWordPressなのに「自分で文章が書き換えられない」「ブログの更新ができない」などWordPressの機能を活かしきれていないことはありませんか?
ゆーそうとではWordPressの機能を最大限発揮して、HTMLなどの知識がないお客様でも運用しやすいホームページを作成します。