ブロガーさんから「検証画像はポップアップできるようにした方がいいですよ」という、ありがたいアドバイスをいただきました。正直それまで、画像をクリックして拡大表示させることを深く考えたことはなかったのですが、実際に試してみるとCocoonなら想像以上に簡単で驚きました。さらに、CSSを追加するだけで、テーマに依存せず“カーソルを合わせるだけで拡大表示する”方法もあることが分かりました。検証画像や操作画面を記事に載せていると、「クリックしたら大きく見られた方が親切かも？」と感じることはありませんか？今回は、実際に私が試してよかった画像の拡大表示方法を、初心者の方にも分かりやすくまとめていきます。
Cocoonで画像をクリックするとポップアップ表示する方法
Cocoonでは、設定をオンにするだけで画像をクリック拡大できます。
🔧 手順：CocoonのLightbox機能をONにする
- WordPress管理画面にログイン
- 左メニューから
「Cocoon設定」→「画像」タブ をクリック - 中ほどにある
「画像をLightbox表示する」 に ✅チェックを入れる - ページ下の「変更をまとめて保存」をクリック
🔍 注意点：リンク付き画像にする必要あり
画像ブロックを追加し、リンク先を「メディアファイル」に設定します。
記事に画像を挿入する際の手順：
- 画像ブロックを追加
- 右側の設定欄で「リンク先」を「メディアファイル」に変更
実際にcocoon設定⇒【画像タブ】の中程に画像の拡大効果には、
- Spotlight（軽量・高機能ギャラリー）
baguetteBox（軽量・スマートフォン向け）-
Lity（軽量・1枚ずつ表示） -
Lightbox
どれにしてもクリックすると拡大表示するので「baguetteBox（軽量・スマートフォン向け）」にしました。
今までも「baguetteBox（軽量・スマートフォン向け）にチェックが入っていたのですがメディアライブラリーで画像を入れた際に🔗をしていませんでした。
🔗「クリックで拡大」にするには
ブロックエディターで画像をクリック → 🔗マークを押す → 「クリックで拡大」または「画像ファイルへのリンク」を選んでください。
どちらでもLightbox効果が有効になります！
画像ファイルへのリンク⇒バックが黒、クリックで拡大⇒バックが白になりました
画像をクリックして出てきた🔗をクリックすると下に出てくる「画像ファイルへのリンク」か「クリックで拡大」を選択する。
🔍 違いの解説
✅ ①「画像ファイルへのリンク」（背景：黒）
- WordPressやCocoonが標準で使っている 「Lightbox表示」
- 背景が黒くなって、中央に画像が拡大表示されます
- Cocoonの「画像をLightbox表示する」設定に依存
- わかりやすくて目立つ表示
✅ ホバーで画像を拡大するCSS（初心者向け）
以下のCSSを、WordPressの「追加CSS」にコピペしてください。
🔧 手順：
- WordPress左メニュー「外観」→「カスタマイズ」
- 「追加CSS」をクリック
- 以下のCSSを貼り付けて「公開」ボタンをクリック！
img:hover {
transform: scale(1.2);
transition: transform 0.3s ease;
z-index: 10;
}
CSSのホバー拡大部分にアニメーション例を加えると◎
たとえば、画像がスムーズに浮かび上がる感じを出すために以下のようなスタイルも紹介できます
img:hover {
transform: scale(1.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
z-index: 10;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}ホバー拡大に box-shadow を加えることで、より「浮かび上がる」効果になります。
🔍 補足説明
transform: scale(1.2);は 画像を1.2倍に拡大transitionで なめらかに拡大z-index: 10;は他の要素より前に出す（必要な場合）
文字に画像がかぶる場合の対処
拡大時に上下の文字に重なってしまう場合は、以下のCSSに変更してください。
figure:has(img) {
overflow: hidden;
}
img:hover {
transform: scale(1.2);
transition: transform 0.3s ease;
z-index: 10;
}影（シャドー）を出したくない場合
シャドーのはみ出しが気になる場合は、こちらがおすすめです。
figure:has(img) {
overflow: hidden;
width: fit-content;
}
img:hover {
transform: scale(1.2);
transition: transform 0.3s ease;
z-index: 10;
}🎯 注意点
- このCSSは記事内のすべての画像に適用されます（サムネイルなどにも影響する可能性あり）
🛠 画像にクラスを付ける手順（ブロックエディター）
- 画像ブロックをクリック
- 右の「高度な設定」→「追加CSSクラス」に
hover-zoomを入力 - 追加CSSに以下を貼る：
.hover-zoom:hover {
transform: scale(1.2);
transition: transform 0.3s ease;
z-index: 10;
}＊記事内すべての画像に適用する場合は img:hover、特定の画像だけ拡大したい場合は .hover-zoom:hover を使います。
🧪 確認ポイント
- 記事を開いて、画像の上にマウスカーソルを置いてみてください
- フワッと拡大されれば成功です！
まとめ
Cocoonは標準機能だけで画像のクリック拡大が可能
ブロックエディターでは「クリックで拡大」または「画像ファイルへのリンク」を設定する
CSSを1行追加するだけで、テーマに依存しないホバー拡大もできる
検証画像や操作画面が多い記事では、画像を拡大できるようにするだけで、読者の理解度が大きく変わります。Cocoonを使っている方は、ぜひ活用してみてください。
【広告】
コメント