SWELLで写真をたくさん並べたいのに、ギャラリーブロックの使い方がいまいち分からない……そんなモヤモヤを抱えていませんか？
ポイントさえ押さえれば、SWELLのギャラリーブロックは初心者でも迷わずきれいなギャラリーを作れます。
読み終わるころには、自分のブログでも「こう並べれば見やすい」「ここを触れば崩れにくい」というイメージがきっとつかめるはずです。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
SWELLのギャラリーブロックの使い方をざっくり理解しよう
まずは、SWELLのギャラリーブロックで何ができるのか、そしてどんな場面で使うと便利なのかをざっくりつかんでおきましょう。ここをイメージできているかどうかで、「とりあえず並べてみた写真」と「ちゃんと見せたいギャラリー」の差が出てきます。
ギャラリーブロックでできることを簡単にチェック
最初は「画像ブロックを何枚も並べるのと何が違うの？」と感じるかもしれません。
ギャラリーブロックが得意なシーンを、他のブロックとの違いと一緒に整理してみます。
| シーン | ギャラリーブロックを使うと良いとき | 他のブロックを使うと良いとき |
|---|---|---|
| 旅行やイベントの写真紹介 | 同じテーマの写真をまとめて一覧で見せたい | 1枚ずつ大きく見せたいときは通常の画像ブロック |
| ポートフォリオ・制作実績 | 作品をタイル状に並べて、クリックで大きく見せたい | 1作品ごとに詳しい説明を書きたいときはリッチカラム |
| 商品紹介・レビュー | 色違いや角度違いの写真を横並びで見せたい | メイン画像＋テキスト主体で見せたいときはカラムブロック |
| 比較・ビフォーアフター | 似たような写真をまとめてざっくり比較してほしい | 順番に変化を追ってほしいときは画像ブロック＋段落 |
ざっくり言うと、ギャラリーブロックは「同じ系統の画像をまとめて見せる箱」です。
1枚ずつじっくり読ませたいときは、画像ブロックやリッチカラムの方が向いています。
SWELLでギャラリーブロックを挿入する基本手順
次に、SWELLでギャラリーブロックを挿入する流れを押さえておきましょう。一度慣れてしまえば、毎回同じパターンでサクッと作れるようになります。
- WordPressの管理画面から、投稿または固定ページの編集画面を開く
- 本文エリアで「＋」ボタンをクリックする
- 検索欄に「ギャラリー」と入力し、「ギャラリー」ブロックを選ぶ
- 「メディアライブラリ」または「アップロード」から使いたい画像を複数選ぶ
- 右側の設定パネルでカラム数や画像サイズ、リンク先などを調整する
ポイントは、画像を選ぶときに「使いそうな写真を先にざっくりまとめて選んでしまうこと」です。
あとから1枚ずつ追加することもできますが、最初にある程度まとまりを作っておくと、全体のレイアウトをイメージしやすくなります。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
SWELLギャラリーブロックの使い方 基本設定をマスターしよう
ここからは、SWELLのギャラリーブロックを実際に使ううえで大事な設定を詳しく見ていきます。カラム数や画像サイズ、トリミングなど、最初に覚えておきたい項目をおさえるだけで、仕上がりがかなり変わってきます。
カラム数・画像サイズ・トリミングの設定
ギャラリーブロックの見た目を大きく左右するのが、カラム数・画像サイズ・トリミングの3つです。
私がよく使う組み合わせを、イメージしやすいようにまとめました。
| 項目 | 説明 | 私のおすすめ |
|---|---|---|
| カラム数 | 横に何枚並べるかを決める | PCは3〜4カラム、スマホでは3カラムまでを目安にすると見やすい |
| 画像サイズ | サムネイル・中・大・フルサイズなどを選べる | 基本は「中」か「大」、フルサイズはページが重くなりやすいので注意 |
| 画像の切り抜き | 画像を同じ比率にトリミングするかどうか | 一覧の統一感を出したいならオン、構図を崩したくない写真が多いならオフ |
特に「画像の切り抜き」は、オンにするとギャラリー全体としてはきれいにそろいやすくなります。
ただ、上下が少し切れてしまう写真も出てくるので、作品や商品など「構図が大事な写真」は別のレイアウトにするなど、少し工夫すると安心です。
リンク設定とクリックで拡大させる方法
次に、画像をクリックしたときの動きです。
ギャラリーブロックでは、画像をどこにリンクさせるかを指定できます。
| リンク先 | 動き | 向いている使い方 |
|---|---|---|
| なし | クリックしても何も起きない | ただ眺めてもらえれば十分なギャラリー |
| メディアファイル | 画像そのものが大きく開く | 写真を大きく見せたいときの基本パターン |
| 添付ファイルのページ | 画像専用のページに移動する | 画像1枚ごとに個別ページで説明を書きたいときなど |
クリックで拡大表示させたい場合は、リンク先を「メディアファイル」にしておくのが分かりやすいです。
テーマやプラグイン側で画像のポップアップ表示機能を使っている場合は、その設定もオンになっているか確認しておくと安心です。
キャプション・altテキストでSEOと分かりやすさを両立
ギャラリーブロックの画像にも、キャプションやaltテキストを入れておくと、読者にも検索エンジンにも親切です。
どちらも難しいことを書く必要はなく、「見て分かることを短く言葉にする」イメージでOKです。
- キャプション
画像のすぐ下に表示される説明文です。「〇〇旅行で撮った夕焼け」「白いスニーカーの横からの写真」など、パッと見て内容が伝わる一言を書いておくと親切です。 - altテキスト
画像が表示できなかったときに代わりに表示されるテキストで、検索エンジンもここを読みます。「青い海と白い砂浜の写真」「黒いリュックサックの商品写真」など、画像の内容を素直に言葉にすると良いです。
SWELLのギャラリーブロックの使い方に慣れてきたら、こうした細かい情報も少しずつ整えていくと、写真が多い記事でも伝わりやすさがぐっと変わります。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
SWELLギャラリーブロックをおしゃれに見せるコツ
機能としての使い方が分かってきたら、次は「どう見せるか」です。同じ写真でも、レイアウトや余白の取り方を少し変えるだけで、雰囲気がガラッと変わります。
レイアウトと余白の整え方
ギャラリーがおしゃれに見えるかどうかは、画像そのものよりも「整ったレイアウト」と「適度な余白」の影響が大きいです。
よく使うレイアウトのパターンを整理してみます。
| レイアウト | 特徴 | 向いているケース |
|---|---|---|
| 2カラム | 1枚ずつが大きく見える | 写真の迫力や雰囲気をしっかり伝えたいとき |
| 3カラム | バランスが良く崩れにくい | ブログ記事内で使う、定番で無難なレイアウト |
| 4カラム | 一度に多くの写真を一覧できる | 小さめの写真をたくさん並べたいとき |
ギャラリーブロックの上下には、少し多めに余白を空けてあげると、写真のまとまりとして見えやすくなります。
特にテキストブロックがすぐ隣にある場合は、前後に余白を入れて「ここから写真のかたまりです」というメリハリを作ると、かなり読みやすくなります。
デバイス別（PCとスマホ）の見え方をチェック
SWELLのギャラリーブロックの使い方で意外と忘れがちなのが、スマホでの見え方です。PCではきれいに見えていても、スマホで見ると窮屈だったり、小さすぎたりすることがあります。
- ギャラリーを作ったら、必ずスマホのプレビューでも確認する
- 3カラム以上にしたときは、スマホでは2カラムや1カラムになることを前提に画像の比率をそろえておく
- 極端な縦長・横長の画像を混ぜすぎないように意識する
私も最初はPC画面だけ見て「いい感じだな」と思っていたのですが、スマホで見ると「写真が小さすぎる」「1枚だけ妙に細長い」ということがよくありました。
少し面倒でも、プレビューでPCとスマホの両方をチェックするクセを付けておくと安心です。
実例で見るギャラリーの使い方
最後に、ギャラリーブロックが活躍しやすい具体的な使い方をいくつか挙げます。
- 旅行ブログ
日ごとのハイライト写真をギャラリーブロックでまとめ、本文ではエピソード中心に書くと、「写真でざっくり雰囲気→文章で細かい話」という流れが作れます。 - ハンドメイドや作品紹介
作品一覧はギャラリーでタイル状に並べ、クリックした先や個別ページでは大きな画像＋説明文という構成にすると、見た目と情報量のバランスが取りやすいです。 - 商品レビュー記事
外観・付属品・使用イメージなどをギャラリーブロックでまとめて見せると、読者は一目で全体像をつかめます。細かい説明はその下の文章で補うイメージです。
こうした使い方を意識しておくと、「とりあえず写真を並べただけ」の状態から、「見ていて気持ちいいギャラリー」に一歩近づきます。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 【稼げるキーワード教えます】 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。
▼ ▼ ▼
SWELLギャラリーブロックの使い方 応用編：CSSカスタマイズ
ここからは、少し踏み込んだSWELLのギャラリーブロックの使い方として、CSSを使った軽いカスタマイズの考え方を紹介します。いきなり難しいコードを書く必要はないので、「こんなこともできるんだな」くらいの気持ちで読んでみてください。
画像サイズをそろえてきれいに並べるには
ギャラリーブロックを使っていると、縦長の画像と横長の画像が混ざって、最終行だけ高さがバラバラになってしまうことがあります。
そんなときに考えられるのが、「トリミングを使う方法」と「CSSで見え方を整える方法」です。
- トリミング設定をオンにする
ギャラリーブロックの設定で「画像の切り抜き」をオンにすると、正方形に近い形でそろいやすくなります。多少上下が切れても問題ない写真が多いときに向いています。 - CSSで高さをそろえる
もっと細かく揃えたい場合は、外観メニューの「追加CSS」や、SWELLのカスタムCSS機能を使って、ギャラリー内の画像に高さや表示方法を指定するやり方もあります。
私も最初は、いきなり難しそうなコードに手を出して挫折しかけました。
まずはトリミング設定など、テーマ標準の機能でどこまで整えられるかを試してみるのがおすすめです。
奇数枚でも崩れないギャラリーにする考え方
画像が奇数枚のとき、最後の行だけ画像の幅が妙に広くなってしまうことがあります。
これはギャラリーブロックの仕様としては自然な動きですが、見た目として気になる場合も多いです。
- 画像枚数を偶数にそろえる
もっとも簡単なのは、写真を1枚追加して偶数枚にしてしまう方法です。似たカットをもう1枚足すだけでも、最後の行が整って見えることが多いです。 - 最後の1枚だけ別ブロックにする
どうしても奇数枚でいきたいときは、最後の1枚だけ通常の画像ブロックにして大きく見せるという手もあります。「最後の1枚は特別扱い」という演出にもなって一石二鳥です。
高度なCSSでダミー要素を追加する方法もありますが、SWELLのギャラリーブロックを使い始めた段階では、まずこの2つの考え方だけでも十分実用的だと感じています。
スライダー風の見せ方や1枚目だけ表示するテクニック
もう少し遊び心を出したい場合は、「スライダー風に見せる」「1枚目だけ表示して、クリックしたら他の写真も見られる」といった見せ方もあります。
| テクニック | 見え方 | 向いているサイト |
|---|---|---|
| スライダー風表示 | 画像が横にスライドして切り替わる | 商品レビューや、トップページのメインビジュアル |
| 1枚目だけ表示 | 一覧は1枚だけ、クリックすると他の画像も見られる | 写真は多いけれど、ページ自体はすっきり見せたいページ |
| サムネイル＋拡大のみ | 小さな画像をタイル状に並べ、クリックで大きく表示 | ギャラリーを「おまけ的に」入れたいとき |
こうしたカスタマイズは、JavaScriptや追加CSSが必要になるケースもあり、やや中級者向けです。
無理にすべてを自前でやろうとせず、必要に応じてプラグインを使ったり、信頼できるコード例を参考にしながら少しずつ試していくと、安全に応用できます。
SWELLギャラリーブロックのよくあるつまずきと対処法
ここでは、SWELLのギャラリーブロックを使っていて、私自身も含めて多くの人がつまずきやすいポイントをまとめておきます。「なんか変だな」と感じたときに、チェックリスト代わりに使ってみてください。
レイアウトが崩れる・幅いっぱいになるとき
ギャラリーだけ横幅いっぱいに広がってしまったり、隣のブロックとズレて見えることがあります。
よくある原因と対処法を整理すると、次のような感じです。
| 症状 | よくある原因 | 対処法 |
|---|---|---|
| ギャラリーだけ横幅が広い | ギャラリーブロックの配置幅が「全幅」になっている | ブロックツールバーから「標準」や「幅広」に戻す |
| 上下の余白がおかしい | ギャラリーだけ余白設定が他のブロックと違う | 周囲のブロックと同じ余白設定にそろえる |
| カラム数が思った通りにならない | 画像数が少なすぎる、縦長画像が多い | カラム数を減らすか、画像の比率を見直す |
まずは「配置幅」と「カラム数」を確認するだけでも、かなりのトラブルは解消できます。
それでも直らないときは、テーマや他のプラグインが出しているスタイルが影響している場合もあるので、別ページでテストしてみると原因を切り分けやすいです。
クリックしても画像が拡大しないとき
ギャラリーの画像をクリックしても拡大されない、という相談もよくあります。
チェックするポイントは次のあたりです。
- ギャラリーブロックのリンク先が「メディアファイル」になっているか
- テーマやプラグインの設定で、画像のポップアップ表示が有効になっているか
- キャッシュ系プラグインを使っている場合は、一度キャッシュを削除してみる
それでも改善しないときは、一時的にプラグインを停止してみて、どれかが干渉していないか確認してみると原因が見えやすくなります。
ページ表示が重い・読み込みが遅いとき
ギャラリーブロックに大きな画像を詰め込みすぎると、ページの読み込みが重くなります。
これはSWELLに限らず、画像が多いサイトで共通の悩みです。
- 画像サイズを「フルサイズ」ではなく「中」や「大」にしておく
- アップロード前に、画像の幅や容量をあらかじめ小さめにしておく
- 本当に必要な写真だけをギャラリーに入れ、似たようなカットは減らす
「とりあえず全部載せてしまおう」と考えると、どうしても重くなってしまいます。
見せたいポイントを整理して、「この写真は本文中で大きく」「このあたりはギャラリーでざっくり」と役割を分けてあげると、表示速度も見やすさも両方ケアできます。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
よくある質問
最後に、SWELLのギャラリーブロックの使い方について、よくありそうな質問にQ&A形式で答えておきます。
Q1. SWELLでギャラリーブロックを使うか、画像ブロックを使うか迷います
A1. 大まかな目安として、「同じカテゴリの写真をまとめてパッと見せたいときはギャラリーブロック」「1枚ずつじっくり見せたいときは画像ブロック」と考えると分かりやすいです。
旅行レポートやイベント紹介など、雰囲気をざっと伝えたい場合はギャラリーが便利です。
手順解説や図解メインの記事では、1枚ずつ説明できる画像ブロックの方が親切なことが多いので、記事の目的に合わせて使い分けてみてください。
Q2. ギャラリーブロックの写真がバラバラでダサく見えてしまいます
A2. 一番多い原因は、縦長と横長の画像が混ざっていることです。
できるだけ同じ比率の写真を集めるか、ギャラリーブロックの「画像の切り抜き」をオンにして比率をそろえると、ずいぶん印象が変わります。
どうしても混ざってしまう場合は、縦長の写真だけ別のブロックで大きく見せるなど、構成そのものを分けてしまうのも有効です。
Q3. CSSカスタマイズが難しそうで、SWELLのギャラリーブロックの応用が怖いです
A3. 正直なところ、私も最初は同じ気持ちでした。
ただ、ギャラリーの使い方は、基本的な設定だけでも十分きれいに見せることができます。
まずは「トリミングをオンにしてみる」「カラム数を2〜3に抑える」「クリックしたら拡大できるようにする」といった、コード不要の部分から慣れていくのがおすすめです。
そのうえで、「もう少し揃えたいな」と感じたタイミングで、簡単なカスタムCSSを1つだけ試してみる、というように段階を分けてチャレンジすると、怖さもかなり減ります。
まとめ
ここまでの内容を整理しておきます
- ギャラリーブロックは「同じ系統の画像をまとめて見せる箱」と考えると、画像ブロックとの使い分けがしやすくなります。
- カラム数・画像サイズ・トリミング・リンク先の4つを押さえるだけで、見た目と使いやすさが大きく変わります。
- スマホでの見え方を必ずチェックし、縦長と横長の画像を混ぜすぎないことを意識すると、崩れにくいギャラリーになります。
- CSSカスタマイズは、まずテーマ標準の設定でどこまで整えられるか試し、必要になった部分だけ少しずつ手を加えるのが安心です。
- レイアウトがおかしい・拡大されない・重いといったトラブルは、「配置幅」「リンク先」「画像サイズ」など基本項目を順番に確認すると原因を見つけやすいです。
今日できる最初の一歩として、テスト用の記事を1つ作り、SWELLのギャラリーブロックだけを使った簡単な写真ギャラリーを作ってみてください。
その中でカラム数や画像の切り抜き、リンク先をいろいろ変えてみると、「自分のブログにはこの見せ方が合いそうだな」という感覚がだんだんつかめてきます。
少しずつ試しながら、自分のサイトらしいギャラリーの使い方を見つけていきましょう。
★初心者さん必見★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
記事を読んだらコチラ
▼ ▼ ▼
