Cocoon標準機能で画像を拡大表示（Lightbox）させる方法

結論：初心者でも簡単にできます！

サイト運営をしている中で、これまで膨大な疑問に直面してきました。その一つ一つを実践しながら解決してきた内容の記事です。

今回は画像拡大の方法を調査して実践しました。

1. はじめに

Cocoonでは、プラグインを追加しなくても、画像をクリックした際にふわっと拡大させる「Lightbox（ライトボックス）」機能が標準で備わっています。読者が細かい図解や写真を見やすくするために、ぜひ設定しておきましょう。

2. Cocoonでの設定手順

設定はたったの4ステップで完了します。

1. WordPress管理画面から [Cocoon設定] ＞ [Cocoon設定] を選択
2. [画像] タブをクリック
3. 「画像の拡大効果」 の項目までスクロールする
   （【本文画像設定】の下のほうにある）
4. 好みのライブラリを選択し、[変更をまとめて保存] をクリック

より詳細な設定方法やカスタマイズについては、Cocoon公式サイトの解説ページ で確認できます。

3. 選べる4つの拡大エフェクト

Cocoonでは以下のライブラリから選択可能です。自分のブログの雰囲気に合うものを選んでみてください。

• Spotlight（おすすめ）：モダンで多機能。拡大・縮小やスライドショー機能も搭載。写真メインのサイトならコレ！
• baguetteBox：シンプルかつ軽量。スマホでの操作性が高い。
  （当サイトはこの設定にしています）
• Lity：とにかく軽快に動作する。
• Lightbox：古くから愛される定番のデザイン。

こんな感じ↓

4. 【重要】画像が拡大されない時のチェックポイント

設定しても拡大されない場合、画像挿入時の設定が原因であることがほとんどです。

• リンク先を「クリックで拡大」にする
  画像を記事に配置する際、画像ブロックの設定パネルの「リンク先」を必ず [クリックで拡大] に設定してください。ここが「なし」や「添付ファイルのページ」になっていると、拡大機能が動作しません。

5. まとめ

Cocoonならプラグイン不要で、チェックを入れるだけで画像拡大を実装できます。サイトの表示速度を落とさずに利便性を高められるので、忘れずに設定しておきましょう。

---