「どこで何を直すか」の全体像が見えたら、次はいよいよパーツを組み上げる「大工仕事」に挑戦してみましょう！
🤔 こんな悩み、ありませんか？
- 画像と文字をオシャレに「横並び」にしたいのに、どうしても縦に並んでしまう…
- 背景に色をつけたいのに、なぜか文字の周りだけしか色が変わらない…
- スマホで見ると、レイアウトが崩れて読みづらくなってしまう…
これらの悩みを一発で解決するのが、「グループ」と「カラム」という2つのブロックです。
デザインの基本は「透明な箱」に入れること
ブロックテーマで思い通りのデザインを作るための最大の秘訣。それは、文章や画像をそのまま置くのではなく、「透明な箱」の中にまとめて入れることです。
👜 旅行のパッキングを思い出してみてください
スーツケースの中に、靴下やシャツをバラバラに放り込むと、中身がぐちゃぐちゃになって探しにくいですよね？
でも、「衣類用のポーチ（箱）」にまとめておけば、ポーチごと場所を移動させたり、まとめて取り出したりするのが一瞬で終わります。
WordPressもこれと同じです。ブロックを「箱」に入れることで、以下のようなができます。
まとめてお着替え： 箱に色をつければ、中に入っているブロック全体の背景色を一気に変えられます。
まとめてお引越し： 箱ごとドラッグすれば、中身の順番を崩さずにレイアウトを入れ替えられます。
きれいに整列： 箱に「仕切り」を作ることで、画像と文字を美しく横に並べることができます。
この「透明な箱」の正体こそが、これから解説する「グループ」と「カラム」です！
「グループ」ブロックは、みんなをまとめる「大きな袋」
グループブロックは、バラバラのブロックたちを一つのユニットとしてまとめる「大きな袋」の役割を果たします。
🎨 グループブロックでできること
- 背景を一括で変える： 「ここからここまでは水色の背景にしたい」という時、グループで囲めば一瞬で色を塗れます。
- まとめて移動する： 文章とボタンをセットで袋に入れておけば、場所を入れ替えるのも「袋ごと」動かすだけ。
- 余白を整える： 袋の内側に「クッション（余白）」を入れることで、文字が端に寄りすぎない、読みやすいデザインが作れます。
⚠️ 初心者が一番躓く「袋がつかめない！」問題
「背景色を変えたいのに、設定画面に色の項目が出てこない…」
それは、袋そのものではなく、中に入っている「文字（段落）」を触ってしまっているのが原因です。
解決策：迷ったら「リストビュー」で、一番外側の「グループ」を選択し直しましょう！
「中身」ではなく「袋そのもの」を掴む感覚。これがグループブロック攻略の第一歩です。
迷ったらON！「インナーブロックにコンテンツ幅を使用」の正体
グループブロックの設定にある、この長い名前のスイッチ。一言で言うと「中身のブロックを、サイトの真ん中にきれいに整列させるためのガイド」です。
✅ スイッチONの状態
中身のブロックがサイトの「中央」にシュッと揃います。
また特定の画像だけを「画面いっぱいに広げる（全幅）といった、デザインが可能になります。
❌ スイッチOFFの状態
中身のブロックが、グループの端から端まで（100%）ベタッと広がります。サイドバーのない、シンプルな1ページを作る時などに向いています。
基本的には「常にON」でOK！ これをONにしておくことで、記事が読みやすい幅に保たれ、かつオシャレな「はみ出しデザイン（全幅画像など）」も自由自在になりますよ。
ちなみに全幅を楽しみたいなら、「1カラム（サイドバーなし）」のテンプレートを選ぶのが鉄則で、テーマの設定にもよります！
【応用】グループブロックは「整列」も得意！
中に入れたブロックを「右寄せ・中央寄せ・横並び」に整列させることができます。
今までコードを書いて display: flex; や justify-content: center; と指定していたことが、ボタンをポチポチ押すだけで完結してしまう。
グループブロックには「グループ」「行（Row）」「スタック（Stack）」の3種類がありますが、これ、Flexboxの向き（縦か横か）を切り替えています。
「カラム」ブロックは、横に並べる「仕切り板」
「画像と説明文を横に並べたい」「3つのサービスをきれいに並べたい」
そんな時に登場するのがカラムブロックです。大きなスペースを「仕切り板」で区切って、横並びのレイアウトを作ってくれます。
✨ カラムブロックの得意技
- 黄金比も自由自在： 「50:50」の真っ二つだけでなく、「30:70」のように片方を広くするオシャレな配置も選ぶだけで完成します。
- スマホで見ると自動で縦並びに： ここが最大のメリット！ PCでは横並びでも、画面の狭いスマホでは自動的に「縦」に積み重なって、読みやすさを守ってくれます。
⚠️ 混乱注意！「親」と「子」の役割分担
カラムブロックを使うと、設定画面が2種類出てきて「どっちを触ればいいの？」となりがちです。
- 親（カラム全体）： 「何列に分けるか」や「全体の幅」を決めます。
- 子（各カラム）： 「その列の幅を何％にするか」を個別に決めます。
💡「列を増やしたいのに設定が出てこない！」と思ったら、ここでもリストビュー（左上三本線）の出番です。一番外側の「カラム（複数形）」を選択しているか確認してみてくださいね。
スマホでも見やすく！「モバイルでは縦に並べる」
カラムブロックの素晴らしいところは、「スマホで見るときだけ、自動で並び方を変えてくれる」点にあります。
設定パネルにある「モバイルでは縦に並べる」をONにしておくだけで、WordPressが賢く判断してくれます。 ※これが「レスポンシブ」対応です。
スマホの狭い画面で無理やり横に並べると、文字が読めないほど細くなってしまいます。縦に積み重ねることで、ユーザーは指一本で「スルスル」と快適に読み進めることができます。
「グリッド」ブロックは、縦横をきっちり揃える「魔法の升目」
カラムブロックと似ていますが、「グリッド」はもっとパワフルです。画面を縦と横の「升目（グリッド）」で区切り、その中にブロックを自由にはめ込んでいくことができます。
💡 カラムと何が違うの？
- カラム（横のみ）： 「横に並べる」のが得意。でも、2段目、3段目と増えていくと、高さがバラバラになりがちです。
- グリッド（縦と横）： 複数のブロックを並べても、縦のラインと横のラインがピシッと揃います。 まるでタイルを並べたような美しいレイアウトが作れます。
例えば、4つのサービス紹介を「田の字」型に並べたい時や、写真ギャラリーをきれいに並べたい時に大活躍します。
【実践】「箱」はどうやって作るの？ 2つのアプローチ
グループやカラムを使うには、大きく分けて2つの方法があります。あなたの作業スタイルに合わせて使い分けてみてくださいね。
「あとから包む」：書いた後でグループ化する
すでに書いた文章や画像をドラッグして全部選択し、ツールバーに現れる「グループ化」アイコンをポチッと押すだけ。
✅ こんな時に便利：
一気に書き上げた後に、「あ、ここからここまで背景色を変えたいな」と思った時に最適です。散らばったおもちゃを、一気に箱にまとめる感覚ですね。
「先に箱を用意する」：中身を入れていく
まず「＋」ボタンから「グループ」や「カラム」を追加し、空の箱を作ります。その中にある「＋」を押して、文章や画像を追加していきます。
✅ こんな時に便利：
「ここは3列でサービス紹介にするぞ！」と、最初からデザインが決まっている時に向いています。お弁当箱の仕切り（カラム）を決めてから、おかずを詰めていく感覚です。
「あとから包む」を知っておくと、やり直しがめちゃくちゃ楽になりますよ！
【超重要】迷子にならないコツは「リストビュー」との合わせ技
「グループの中にカラムを入れて、その中に画像を入れて…」と、箱を重ねていく（入れ子にする）と、画面上のクリックだけでは狙った「箱」を掴むのが難しくなってきます。
そんな時に絶対に使ってほしいのが、画面左上にある三本線のアイコン「リストビュー」です。
リストビューを開くと、ブロックがどのような順番で、どの箱に入っているのかが「ツリー形式」で一目でわかります。
- 「親」を確実に掴む： 画面では掴みにくい一番外側の「グループ」も、リストから選べば一発です。
- 順番の入れ替え： ドラッグ＆ドロップで、中身を別の箱へ引っ越させるのも簡単！
- 構造の確認：アウトラインで見出し構成の確認もできます。
「クリックで掴めなければ、リストで選ぶ」
この習慣がつくだけで、ブロックテーマでの制作スピードは劇的にアップします！
NEXT STEP