Cocoonには、記事内の画像を整列させたり、クリックすると拡大して表示するギャラリー機能がついています。
記事内で画像を複数枚ならべて使用したい場合などに活用してください。
記事内ギャラリーの使い方
Cocoon標準機能で画像をグリッド表示＆ライトボックス拡大
この手順書でできること
- 複数の画像をグリッド（格子状）に並べて表示できます
- 画像をクリックするとその場で大きく拡大されます（ライトボックス機能）
- スワイプ・矢印ボタンで前後の画像に切り替えられます
- Cocoon標準機能のみで実現できます（追加プラグイン不要）
はじめに — Cocoon側の設定確認
ギャラリーを使う前に、Cocoon側でライトボックスが有効になっているか確認してください。
- WordPress管理画面 → Cocoon設定 → 「画像」タブ を開く
- 「画像の拡大効果」が 「baguetteBox」 になっているか確認する
- なっていない場合は「baguetteBox」に変更して「変更をまとめて保存」をクリック
「baguetteBox」はスライド・スワイプ対応でギャラリーに最適な設定です。
STEP 1 ギャラリーブロックを挿入する
開く
- WordPress管理画面 → 投稿 → 投稿一覧 から編集したい記事を開く
- 新しく作る場合は「新規投稿を追加」をクリックする
追加する
- ギャラリーを入れたい場所をクリックする
- 「＋」ボタンをクリックして検索欄に「ギャラリー」と入力する
- 「ギャラリー」ブロックをクリックして挿入する
「/ギャラリー」と入力してEnterを押すと素早く挿入できます。
STEP 2 画像をアップロード・選択する
追加する
- ギャラリーブロックが挿入されると「アップロード」「メディアライブラリ」のボタンが表示される
- 新しい画像を使う場合 → 「アップロード」をクリックしてパソコンから画像を選ぶ
- すでにアップロード済みの画像を使う場合 → 「メディアライブラリ」をクリックする
する
- メディアライブラリで使いたい画像を1枚ずつクリックする（クリックのたびにチェック✓が付く）
- 使いたい画像をすべて選択したら「ギャラリーを作成」をクリックする
画像の縦横比を統一しておくときれいに並びます。同じサイズで撮影した写真が理想的です。
STEP 3 ギャラリーの表示を設定する
ギャラリーブロック全体を選択すると、右側の設定パネルに以下の項目が表示されます。
| 設定項目 | 内容・推奨設定 |
|---|---|
| カラム数 | 横に並べる列数。2〜4列がおすすめ |
| 解像度 | 「大」またはフルサイズを推奨 |
| 画像を切り抜いて調整 | ONにするとサイズが揃ってきれいに並ぶ |
| アスペクト比 | 「正方形（1:1）」にすると画像サイズが揃う |
STEP 4 ライトボックス用のリンクを設定する（重要）
この設定をしないと、画像をクリックしても拡大されません。ギャラリーを作成するたびに必ず行ってください。
選択
- ギャラリーブロックの外枠をクリックするか、左上の「リスト表示」からギャラリーを選択する
- 右パネルに「カラム」「アスペクト比」などが表示されていればギャラリー全体が選択されている状態
をクリック
- ギャラリー上部に表示されるツールバーの中に鎖のマーク（リンクアイコン）がある
- その鎖のマークをクリックする
- 「画像ファイルへのリンク」と「添付ファイルページへのリンク」の2つが表示される
選択
- 「画像ファイルへのリンク」を選択する
- これでギャラリー内のすべての画像に一括でリンクが設定される
- クリックしたときに元の大きな画像が開き、ライトボックスが動作するようになる
ギャラリー全体を選択した状態でツールバーの鎖マークから設定すると、全画像に一括で適用されます。個別設定は不要です。
STEP 5 保存してプレビューで動作確認する
- 記事上部の「更新」または「下書き保存」をクリックする
を開く
- 「プレビュー」→「新しいタブでプレビュー」をクリックする
- プレビュー画面でギャラリーの画像をクリックする
- 画像がふわっと大きく表示されればOK
- 「←」「→」ボタン（またはスワイプ）で前後の画像に移動できることを確認する
- 画像の外側をクリックすると閉じることを確認する
プレビューで拡大されない場合はSTEP 4のリンク設定を再確認してください。また Cocoon設定 → 高速化 → 「LazyLoadを有効にする」および 画像最適化プラグインのLazyLoadがONになっている場合はOFFにしてください。
よくある質問
画像をクリックしても拡大されません
STEP 4のリンク設定が完了しているか確認してください。
Cocoon設定 → 高速化 → LazyLoadが有効になっている場合はOFFにしてください。
EWWW Image Optimizerなど画像最適化プラグインのLazyLoadもOFFにしてください。
拡大画像が2枚重なって表示されます
CocoonのライトボックスとFancyBoxなどのプラグインが同時に動いています。
プラグイン一覧からFancyBox系プラグインを「無効化」してください。
画像のサイズがバラバラで揃いません
STEP 3の「画像を切り抜いて調整」をONにするか、「アスペクト比」を「正方形（1:1）」に設定してください。
画像の順番を変えたいです
ギャラリー内の画像をドラッグ＆ドロップで並べ替えできます。
または画像を選択してツールバーの「←」「→」ボタンで移動できます。
あとから画像を追加・削除したいです
ギャラリー全体を選択し、ツールバーから「追加」ボタンで画像を追加できます。
削除は個別の画像を選択して「×」ボタンをクリックします。
