Cocoonのギャラリーをカスタマイズする方法【初心者必見】

この記事では、Cocoonでギャラリーを見やすくカスタマイズする方法をじっくり解説します。

Cocoonのギャラリーを整える前に知っておきたいこと

まず分けて考えたい｜設定でできることとCSSが必要なこと

ギャラリーの調整は、やりたいことを大きく二つに分けると整理しやすくなります。

やりたいこと	ブロック設定で対応しやすい	CSSが必要になりやすい
画像を並べる	○	△
列数を変える	○	△
画像の余白を細かく調整する	△	○
スマホだけ表示を変える	△	○
角丸や影を付ける	△	○
最後の画像だけ大きく見えるのを防ぐ	△	○
画像ごとに細かくリンク先を変える	△	○

表のとおり、基本の並び方はブロック設定で触れることが多いですが、見た目をきれいに整えようとするとCSSの出番が増えてきます。

特に次のような悩みは、設定だけで解決しにくいことがあります。

• 画像どうしのすき間をもう少し広げたい
• スマホでは一列、パソコンでは三列にしたい
• 最後の一枚だけ妙に大きく見える
• 角丸や影を付けてやわらかい印象にしたい

ギャラリーを整えると、サイト全体の印象が変わる

ギャラリーは、画像をきれいに並べるための機能です。

でも実際には、画像の並び方ひとつで、サイト全体が丁寧に作られているようにも、逆に少し雑に見えてしまうこともあります。

特に写真、作品、商品の紹介では、本文を読む前に画像の見え方で印象が決まることが少なくありません。

ギャラリーを整えることで、次のような変化が出やすくなります。

• ごちゃついた感じが減る
• どの画像を見ればいいか分かりやすくなる
• スマホでも見やすくなる
• サイト全体に統一感が出る
• 読みやすさや信頼感が高まりやすい

見た目だけの話に見えて、実は読みやすさや回遊しやすさにもつながる部分です。

最初は全部変えようとしないほうがうまくいく

ギャラリーを理想どおりにしたいと思うと、最初から細かい装飾まで手を入れたくなります。ただ、最初から全部を一気に変えようとすると、どこで崩れたのかが分からなくなりやすいです。

おすすめは、次の順番で進めることです。

• まずは列数を決める
• 次に余白を整える
• そのあとスマホ表示を確認する
• 最後に角丸や影などの装飾を足す

この順番で進めると、見た目が崩れたときも原因を見つけやすくなります。

家の模様替えでも、家具の配置を決める前に小物を並べ始めるとうまくいかないのと少し似ています。

Cocoonのギャラリーでよくある悩みと、その原因

よくある悩みを先に一覧で整理

悩み	起きやすい原因	考え方
スマホで見づらい	列数が多い	スマホだけ列数を減らす
画像の間隔が狭い	初期状態のまま使っている	余白の取り方を見直す
最後の画像だけ大きい	画像枚数やレイアウトの相性	列数や比率のそろえ方を考える
CSSが効かない	書く場所や優先順位の問題	追加CSSや指定方法を見直す
拡大表示されない	リンク設定が合っていない	リンク先の種類を確認する
画像ごとに自由なリンクを付けたい	標準ギャラリーでは制限がある	別の組み方も検討する

一覧で見ると、見た目の悩みだけではなく、WordPress側の仕様や表示方法の違いが関係していることも分かります。

スマホで崩れて見えるのは、よくあること

パソコンではちょうどよく見えていても、スマホでは急に窮屈に感じることがあります。

これは、限られた横幅の中で複数列をそのまま維持しようとするためです。

たとえば三列のままスマホに表示すると、一枚一枚が小さくなりすぎて、何の写真なのか一目で分かりにくくなることがあります。

特に料理、商品、作品の写真は、細部が見えないと魅力が伝わりにくくなります。

そのため、スマホでは次のどちらかに寄せるのが基本です。

• 一列で大きく見せる
• 二列でバランスを取る

「CSSが効かない」は珍しいトラブルではない

ギャラリーを調整していると、「書いたのに変わらない」という壁に当たることがあります。

でも、これは珍しいことではありません。

原因としては、次のようなものが考えられます。

• 書く場所が違う
• 指定したクラス名がずれている
• キャッシュが残っている
• 別のCSSのほうが優先されている
• 編集画面だけ見て公開画面を確認していない

このあたりは後半でもう少し詳しく触れますが、まず知っておきたいのは、自分の書き方が極端に悪いから反映されないわけではない、ということです。

確認する場所がいくつかあるだけで、落ち着いて見ていけば原因は見つかることが多いです。

Cocoonのギャラリーを整える基本の進め方

最初に決めたいのは「どんな見せ方にしたいか」

ギャラリーを整えるときは、まず完成イメージを決めることが大切です。

なぜなら、見せたい内容によって正解が変わるからです。

用途	向いている見せ方
商品紹介	二列か三列で整然と並べる
作品集	余白を広めにして一枚ずつ見せる
旅行写真	一枚をやや大きめに見せる
記事の補足画像	シンプルな二列表示にする
比較用の画像	同じサイズ感でそろえて並べる

目的が決まると、列数や余白の取り方も選びやすくなります。

逆にここがあいまいだと、作っては戻し、また迷うという流れになりがちです。

先にブロック設定で整えられるところを触る

いきなりCSSを書き始めるより、まずはブロック設定でできる範囲を見直すほうが効率的です。

先に見ておきたいポイントは次のとおりです。

• 列数
• トリミングの有無
• リンク先
• キャプションの表示
• 画像サイズ

ここだけでかなりイメージに近づくこともあります。

そのうえで、余白やスマホ表示など、設定だけでは足りないところをCSSで調整すると進めやすいです。

CSSは足りないところを埋めるために使う

CSSはとても便利ですが、最初から何でもCSSで解決しようとすると、後で管理が大変になりやすいです。特に同じサイトの別記事でもギャラリーを使う場合、どの指定がどこに効いているのか分からなくなりがちです。

そのため、基本の考え方は次のようになります。

• ブロック設定でできることは設定でやる
• 見た目の微調整だけCSSにする
• スマホ対応はまとめて考える

この分け方にすると、後から修正するときにも迷いにくくなります。

見た目がぐっと整うカスタマイズのポイント

余白を整えるだけで、見やすさはかなり変わる

ギャラリーがなんとなく野暮ったく見えるときは、画像そのものよりも余白の取り方が原因になっていることがよくあります。

画像がぎゅうぎゅうに並んでいると、一枚一枚の魅力が埋もれてしまいます。

反対に、少し余白があるだけで、画像が丁寧に置かれている印象になります。

余白を考えるときの目安は次のとおりです。

• 情報量が多いなら余白はやや狭め
• 作品を見せたいなら余白は広め
• スマホでは広げすぎない
• 本文全体の余白とそろえる

私自身、最初に余白だけ調整したときに、同じ画像でも見え方が驚くほど変わると感じました。

それくらい、余白は効果の大きいポイントです。

列数は多ければいい、というものではない

画像をたくさん見せたいからといって、列数を増やしすぎると逆に見づらくなります。

特にスマホでは、一枚一枚が小さくなりすぎて、画像の魅力が伝わりにくくなります。

列数の考え方としては、次のような目安があります。

• スマホ重視なら一列か二列
• パソコン中心なら三列までが見やすい
• 一覧性を優先したいなら四列もあり
• 写真そのものを見せたいなら列数は少なめ

一度に表示する枚数よりも、一枚一枚がきちんと伝わることのほうが大切です。

角丸や影は、少しだけ足すくらいがちょうどいい

角丸や影を加えると、ギャラリーがやわらかく見えたり、少し洗練された印象になったりします。

ただし、やりすぎると画像そのものより装飾が目立ってしまうことがあります。

おすすめの考え方は次のとおりです。

• 角丸はほんの少しにする
• 影は弱めにする
• 記事内の他のボックス装飾とそろえる
• 画像の内容より装飾が主張しないようにする

Cocoonはもともとすっきり見せやすいテーマなので、装飾を盛りすぎないほうが全体になじみやすいです。

スマホで見やすいギャラリーにするコツ

スマホでは情報量より見やすさを優先する

スマホ画面は横幅が限られています。

その中で無理に画像を詰め込むと、読者は何を見ればいいのか分かりにくくなってしまいます。

スマホでは、次の点を意識すると見やすくなります。

• 一枚の画像が小さくなりすぎない
• タップしやすい間隔を取る
• キャプションが詰まりすぎない
• 本文との境目が分かるようにする

見た目がにぎやかでも、読者が見づらいなら意味がありません。

スマホでは、少し余白を残した、呼吸しやすいレイアウトのほうが読みやすいです。

一列にするか二列にするか｜迷ったときの選び方

パターン	向いているケース	印象
一列	写真を大きく見せたいとき	落ち着いて見やすい
二列	枚数もある程度見せたいとき	すっきり軽い
三列以上	小さな一覧表示で十分なとき	情報量が多い

迷ったら、まずは二列で試してみるのがおすすめです。

それで窮屈なら一列にする、物足りなければ余白を見直す、という流れが失敗しにくいです。

スマホで縦一列にしたいなら、かなり自然な考え方

スマホでは一列で見せたい、という要望はとても多いです。これは特別な考え方ではなく、かなり実用的な選び方です。

特に次のような場合は、一列表示が向いています。

• 料理や商品を大きく見せたい
• 作品写真を丁寧に見せたい
• 画像の説明も一緒に読ませたい
• 画像枚数がそこまで多くない

一列表示は派手さこそありませんが、見やすさではかなり安定しています。

全体をやさしい印象に見せたいサイトにも向いています。

端数画像の拡大や並び崩れを防ぐ考え方

最後の一枚だけ目立つときに見たいポイント

次のような状況では、端の画像が目立ちやすくなります。

• 三列にしたいのに画像枚数が割り切れない
• 画像サイズや比率がばらついている
• トリミングの考え方がそろっていない
• 本文幅とのバランスが合っていない

たとえば、横長画像と縦長画像が混ざるだけでも、全体が整って見えにくくなることがあります。

画像そのものが悪いのではなく、見せ方の土台がそろっていないだけ、ということも多いです。

並び崩れを減らすために意識したいこと

崩れを減らしたいなら、次の点を意識すると安定しやすくなります。

• 画像の比率をなるべくそろえる
• 列数と画像枚数の相性を見る
• トリミングの考え方を統一する
• スマホとパソコンで別の見え方を想定する

特に画像比率がそろうと、全体の完成度が一気に上がって見えます。

迷ったら、まずは均一感を優先する

あえて画像サイズに変化を付けたほうが味になるケースもあります。ただ、最初に目指すなら、まずは均一感を優先したほうがうまくいきやすいです。

理由は単純で、整っているだけで読み手に安心感を与えやすいからです。

カフェのショーケースでも、同じ向きできれいに並んでいるだけで、なんだかおいしそうに見えることがありますが、それと少し似ています。

クリック拡大やリンク設定で迷わないために

画像を拡大表示したいなら、まずはリンク先を確認する

画像をタップしたときに大きく表示したい場合は、リンク先の設定が重要です。

設定内容によって、何も起きなかったり、別ページへ移動したり、画像だけが大きく表示されたりと、挙動が変わります。

読者目線では、次のような違いとして感じられます。

• タップしても何も起きない
• 別ページに飛んでしまう
• 大きく見られて便利
• 意図しない動きで少し分かりにくい

見た目が整っていても、タップしたときの動きがちぐはぐだと、使いやすさは下がります。

画像を見せることが主役の記事では、この部分も大切です。

画像ごとのリンク設定は、制約を知ったうえで考える

標準ギャラリーは手軽ですが、画像ごとに細かく違うリンクを設定したい場面では、少し扱いづらいことがあります。

たとえば、ひとつは作品詳細、ひとつは購入ページ、別のひとつは外部サイトへ飛ばしたい、というようなケースです。

そういう場合は、無理に標準ギャラリーの中だけで完結させようとしないほうが進めやすいです。

代わりに、次のような方法を考えると柔軟に組めます。

• 画像ブロックを並べて疑似ギャラリーにする
• カラムブロックで自由に組む
• 必要に応じて専用プラグインを使う

ギャラリーだから必ずこの形でなければいけない、と考えすぎないことが大切です。

どこまで標準機能でやるかを先に決める

やりたいこと	標準ギャラリー向き	代替案向き
シンプルに並べたい	○	△
タップで拡大したい	○	△
画像ごとに自由なリンクを付けたい	△	○
デザインを細かく変えたい	△	○
更新を楽にしたい	○	△

このように、目的によって向き不向きがあります。

大切なのは、最初から完璧な方法を探すことではなく、自分のサイトに合うやり方を選ぶことです。

CSSが効かないときに見直したいポイント

最初に見直したい基本チェック

CSSが反映されないときは、次の順番で確認すると整理しやすくなります。

• 公開ページで確認したか
• キャッシュを削除したか
• 指定したクラス名は合っているか
• 書く場所は適切か
• 他のCSSに上書きされていないか

この順番で見ていくだけでも、かなり原因を絞れます。

私も以前、ずいぶん悩んだあとに原因がキャッシュだったことがありました。

拍子抜けするような理由でも、実際にはよくあります。

書く場所の違いで、見え方が変わることがある

Cocoonでは、CSSを書く場所によって確認しやすさや管理のしやすさが変わります。

環境によっては、どこに書くかで調整の進めやすさに差が出ることもあります。

代表的な候補は次のとおりです。

書く場所	特徴	向いている人
追加CSS	反映確認がしやすい	初心者
子テーマのstyle.css	管理しやすいが慣れが必要	中級者以上
プラグイン側のCSS	用途が限定されるが便利なこともある	特定用途向け

最初は追加CSSで確認し、落ち着いてから整理していく流れのほうが分かりやすいです。

いきなり複雑にしないほうが、結果としてきれいにまとまります。

一度にたくさん変えず、ひとつずつ確認する

反映されないときほど、いろいろ書き足したくなります。

でも、そこで変更を増やしすぎると、どこが効いてどこが効いていないのか分からなくなってしまいます。

おすすめは、次の進め方です。

• 一行ずつ足す
• そのたびに公開画面を見る
• 変化があったかを確認する
• 効いた指定だけを残す

地味ですが、これがいちばん確実です。

ギャラリーは見た目の変化が分かりやすいので、少しずつ試すほうが理解もしやすくなります。

標準ギャラリーで足りないときの代替案

画像ブロックとカラムを組み合わせて自由に作る

もっと自由に見せたいなら、画像ブロックとカラムブロックを組み合わせる方法が便利です。

これは少し手間が増えますが、そのぶんできることが広がります。

向いているケースは次のとおりです。

• 画像ごとに別のリンクを付けたい
• 説明文やボタンも一緒に置きたい
• 一部の画像だけ大きく見せたい
• 同じ記事の中で見せ方を変えたい

既製品の棚を使うというより、棚板を自分で組み替えるような感覚です。

少し手間はかかりますが、自由度はかなり高くなります。

専用プラグインを使うという選択肢もある

標準機能だけではやりたい見せ方が難しい場合は、専用プラグインを検討するのもひとつの方法です。

ただし、何でも入れればいいわけではありません。

選ぶときは、次の視点が大切です。

• 本当に必要な機能か
• 更新や管理が負担にならないか
• サイト速度に影響しすぎないか
• サイト全体の雰囲気に合うか

できるだけ軽く、必要最小限にする意識が大切です。

見た目のためにサイト全体が重くなると、本末転倒になってしまいます。

結局どの方法を選ぶのがいいのか

方法	メリット	デメリット
標準ギャラリー	手軽で管理しやすい	細かい自由度は低め
画像ブロック＋カラム	自由度が高い	手間がかかる
プラグイン	機能が豊富	管理項目が増える

迷ったら、まずは標準ギャラリーから始めるのがおすすめです。

そこで不満が出た部分だけ、次の方法に進むほうが無理なく続けられます。

Cocoonのギャラリー調整をうまく進めるコツ

いきなり完成形を目指さない

最初から完璧なデザインを目指すと、途中で手が止まりやすくなります。

それよりも、まずは見やすくすることを目標にしたほうが進めやすいです。

おすすめの順番は次のとおりです。

• 並び方を決める
• 余白を整える
• スマホ表示を確認する
• 最後に装飾を足す

この順番なら、読者にとって大切な部分から改善できます。

読者が喜ぶのは、おしゃれさより見やすさ

サイトを作っていると、つい見た目のおしゃれさを追いかけたくなります。

でも、実際の読者が助かるのは、迷わず見られるギャラリーです。

たとえば、次のような状態はかなり好印象です。

• 画像が小さすぎない
• 間隔が詰まりすぎていない
• スマホでも押しやすい
• どこを見ればいいか分かる

華やかさよりも親切さのほうが、長く読まれる記事には合っています。

これはギャラリーだけでなく、サイト全体にも通じる考え方です。

統一感を意識すると、ぐっと整って見える

最後に意識したいのが統一感です。個別に見ると悪くなくても、全体で見るとちぐはぐに見えることがあります。

そろえたいポイントは次のとおりです。

• 画像の比率
• 余白の広さ
• 角丸の大きさ
• 影の強さ
• キャプションの見せ方

統一感が出ると、サイト全体の完成度が一気に上がって見えます。

難しいテクニックより、この感覚のほうが見た目にはしっかり効きます。

よくある質問

Cocoonのギャラリーカスタマイズは初心者でもできますか？

はい、できます。

最初から難しいコードを書く必要はありません。まずは列数やリンク先など、触りやすい部分から整えて、足りないところだけ少しずつ調整していけば十分です。一気に完成させようとしないことが、初心者にはいちばん大切です。

Cocoonのギャラリーをスマホだけ一列にするのはありですか？

もちろん、ありです。

むしろ、スマホだけ一列にする考え方はとても実用的です。画像を大きく見せやすく、タップもしやすくなるため、作品紹介や商品紹介とも相性が良いです。迷ったら、まずはスマホ一列を基準に考えると失敗しにくいです。

CocoonのギャラリーでCSSが効かないときはどうすればいいですか？

CSSが効かないときは、慌てて書き足す前に確認の順番を決めることが大切です。公開画面での確認、キャッシュの削除、クラス名の見直し、書く場所の確認を順番に行ってください。一度にたくさん直そうとせず、ひとつずつ試すと原因が見つけやすくなります。

まとめ｜まずは列数と余白から整えよう

今日から最初の一歩としておすすめしたいのは、あなたのサイトのギャラリーをスマホで開いて、まず「列数」と「余白」だけを見直してみることです。

そこを整えるだけでも、見やすさははっきり変わります。