SWELLのカラム幅を自在に調整する方法｜リッチカラムブロック完全ガイド

WordPressテーマ「SWELL」でブログやサイトを作っていると、「カラムの幅をもう少し自由に変えたい」「デバイスごとに見え方を変えたい」と感じることはありませんか？実は、SWELLにはカラムブロックとリッチカラムブロックという2種類のカラム機能があり、とくにリッチカラムブロックを使うと、横幅の細かな調整がより柔軟にできる傾向があります。
この記事では、SWELLのカラム幅に関する設定方法を、初めての方でもつまずかないように、順序立てて丁寧にご説明します。

この記事でわかること

• SWELLのカラムブロックとリッチカラムブロックの違いと特徴
• リッチカラムブロックでカラム幅をデバイスごとに設定する具体的な手順
• カラム幅の単位（px・%・em・vwなど）の使い分け方
• サイト全体のコンテンツ横幅を変更する方法とサイドバー幅の調整ポイント

SWELLのカラムブロックとリッチカラムブロック、何が違う？

SWELLには「カラムブロック」と「リッチカラムブロック」という2つのカラム機能が用意されています。
名前が似ているのでどちらを使えばいいか迷う方も多いのですが、それぞれに特徴があり、使い場面が異なります。
まずはこの2つの違いをしっかり理解することが、カラム幅をうまく扱うための第一歩です。

カラムブロックの特徴

カラムブロックは、WordPressの標準ブロックエディター（グーテンベルク）に備わっている機能をベースにしたもので、SWELLでも使えるシンプルなカラム分割の仕組みです。
使い方はとてもわかりやすく、ブロックを追加して「カラム」を選択し、分割数を指定するだけで、すぐに複数列のレイアウトが完成します。

カラムブロックでは、各列の幅をある程度変更することができます。
たとえば「1：2」の比率に変えたり、「均等3分割」にしたりといった調整が可能です。
幅の指定単位も、px・%・em・rem・vw・vhなど複数から選べるので、数値を直接入力して細かく設定したい場合にも対応しています。

ただし、カラムブロックは基本的にPC表示を基準にした設定が中心で、「スマホのときだけ1列にしたい」「タブレットでは2列にしたい」といったデバイスごとの細かな出し分けが苦手です。
シンプルなレイアウトには十分ですが、より細かなレスポンシブデザインを実現したい場合は、次に紹介するリッチカラムブロックが活躍します。

リッチカラムブロックの特徴

リッチカラムブロックはSWELL独自のブロックで、名前の通り「リッチ（豊か）」な設定ができます。
最大の特徴は、PC・タブレット・スマホのそれぞれで表示するカラム幅を個別に設定できるという点です。
同じコンテンツでも、画面サイズに合わせてレイアウトを最適化できるので、デザインのクオリティが一段上がります。

また、列（横）は最大8カラムまで追加でき、行（縦）も増やすことができます。
カラム間の余白も上下左右それぞれ自由に設定でき、統一した余白感を保ちながらデザインを整えることができます。
さらに、クリック1回で縦横の配置を切り替える機能もあり、操作の手軽さも魅力のひとつです。

配置の自由度や表示割合の細かな調整、余白の柔軟なコントロールなど、レイアウトにこだわりたい場面では圧倒的にリッチカラムブロックが便利です。

2つのブロックを比較してみると

どちらを使うか迷ったときは、以下の比較表を参考にしてみてください。
用途によって使い分けることで、デザインの幅がぐっと広がります。

シンプルな2〜3カラムのレイアウトで十分な場合はカラムブロック、デバイス対応や複雑なグリッドレイアウトを作りたい場合はリッチカラムブロック、というのが基本的な使い分けの考え方です。

リッチカラムブロックでカラム幅を設定する基本手順

リッチカラムブロックの魅力は理解できたと思いますが、実際にどうやってカラム幅を設定するのか、操作に不慣れな方には少しハードルに感じるかもしれません。
ここでは、リッチカラムブロックを追加してから幅を調整するまでの手順を、一つひとつ丁寧にご説明します。

リッチカラムブロックを追加する

まず、WordPressの投稿編集画面または固定ページ編集画面を開きます。
ブロックを追加する「＋」ボタンをクリックし、検索欄に「リッチカラム」と入力すると、SWELL独自の「リッチカラム」ブロックが表示されます。
これを選択すると、編集エリアにリッチカラムが挿入されます。

最初は2カラムの状態で表示されることが多いです。
カラム数を増やしたい場合は、ブロックを選択した状態で右側のサイドバー（ブロック設定パネル）から「カラムを追加」ボタンを使うか、エディター画面内の「＋」ボタンでカラムを追加できます。

カラム幅を設定する手順（親ブロック選択がポイント）

カラム幅を設定するときに、最初に多くの方がつまずくポイントがあります。
それは「どのブロックを選択した状態で設定するか」です。

カラム幅の設定は、子ブロック（各カラムの中身）ではなく、親ブロック（リッチカラム全体）を選択した状態で行います。子ブロックを選んだままだと、右サイドバーに「カラム横幅」の設定項目が表示されないので注意してください。

具体的な手順は以下の通りです。

• 幅を設定したいカラムの中にあるブロック（画像やテキストなど）をクリックして選択する
• エディター上部に表示されるツールバーの左端にある「親ブロックを選択」アイコンをクリックする
• 選択が「カラム（子ブロック）」に切り替わったことを確認する
• 右サイドバーに「カラム横幅」の入力欄が表示されていることを確認する
• 数値を入力して幅を設定する

この「親ブロックを選択」という操作が、カラム幅設定の核心部分です。
うまく表示されない場合は、一度クリックしてから再度ツールバーを確認してみてください。

幅の数値を入力する

「カラム横幅」の入力欄が表示されたら、ここに幅の数値を入力します。
入力できる単位はpx・%・em・rem・vw・vhなど複数あり、プルダウンメニューで切り替えることができます。

たとえば、2カラムで左を細め・右を広めにしたい場合は、左カラムを「30%」、右カラムを「70%」のように%で指定するのが直感的でわかりやすいです。
固定幅のサイドバー的なカラムを作りたい場合は「250px」のようにpxで指定する方法もあります。

なお、全カラムの幅の合計が100%を超えると表示が崩れることがあります。
余白（ガター）も考慮しながら、合計が100%以内に収まるように調整しましょう。

デバイスごとにカラム幅を変える方法｜レスポンシブ対応の設定

リッチカラムブロックの最大の強みのひとつが、PC・タブレット・スマホそれぞれで異なるカラム幅を設定できるレスポンシブ対応機能です。
スマートフォンでの閲覧が多い現代のブログ運営においては、この設定がとても重要になります。
ここでは、デバイスごとの幅設定の具体的な操作方法を解説します。

なぜデバイスごとの設定が必要なのか

たとえば、PCで3カラムのギャラリーを作ったとします。
そのままスマホで表示すると、3つの列が横に並んだまま表示されてしまい、文字や画像がとても小さく読みにくい状態になることがあります。

スマホでは1カラム（縦積み）、タブレットでは2カラム、PCでは3カラム、というように画面サイズに合わせたレイアウトを出し分けることで、どのデバイスで読んでもストレスのない表示が実現できます。
これがレスポンシブデザインの基本的な考え方で、SWELLのリッチカラムブロックはこれを直感的に設定できる仕組みを持っています。

デバイスごとの設定場所を確認する

リッチカラムブロックを選択した状態で右サイドバーを見ると、設定項目の中にPC・タブレット・スマホのアイコン（デバイスアイコン）が表示されています。
このアイコンを切り替えることで、それぞれのデバイス用の設定画面に切り替わります。

各デバイスの設定では、以下のような項目を個別に調整できます。

• 表示するカラム数（例：PCは3列、スマホは1列）
• 各カラムの横幅の割合や数値
• カラム間の余白（ガター）サイズ
• 縦方向・横方向の配置（上揃え・中央揃えなど）

デバイスごとの設定は独立しているため、PC用の設定を変えてもスマホ用の設定には影響しません。それぞれで最適な表示になるよう、個別に確認しながら調整することをおすすめします。

実際の設定例：3カラムメニューをスマホで1列にする

具体的な例として、お店の商品メニューを3カラムで表示したい場合を考えてみましょう。

PC設定では、「カラム数：3」に設定し、各カラムの幅を均等（約33%ずつ）に設定します。
タブレット設定では、「カラム数：2」にして、1行に2つ並ぶレイアウトにします。
スマホ設定では、「カラム数：1」にして縦積みにすることで、小さな画面でも各商品の情報がしっかり読めるようになります。

この設定を行うと、訪問者がどのデバイスから見ても、それぞれの画面サイズに最適化されたきれいなレイアウトで表示されます。
設定後は必ずWordPressのプレビュー機能でデバイスごとの表示を確認する習慣をつけると、公開後の「崩れていた！」というトラブルを防げます。

タブレット表示はどのサイズが対象？

SWELLのリッチカラムブロックにおけるデバイス区分の目安は、一般的にPC（デスクトップ）が1025px以上、タブレットが768px〜1024px程度、スマホが767px以下とされています。
ただし、テーマのバージョンアップによって基準値が変わることがありますので、最新の情報はSWELL公式サイトでご確認ください。自分のサイトがどのブレイクポイントを使っているか気になる場合は、ブラウザの開発者ツールで画面幅を変えながら確認するのが確実です。

カラム幅の単位ごとの使い分け方と実践的な設定例

カラム幅を設定する際、「px」「%」「em」「vw」など複数の単位が選べますが、それぞれの特性を理解していないと、意図しない表示になることがあります。
ここでは各単位の特徴と、どんな場面で使うのが適切かを丁寧に解説します。

パーセント（%）：最も使いやすいベーシックな単位

%は親要素の幅に対する割合で指定する単位です。
たとえば、親要素が800pxの場合、「50%」と指定すれば400pxのカラムになります。
画面サイズが変わっても割合が維持されるため、レスポンシブデザインとの相性が非常によいです。

2カラムで「左30%・右70%」「左40%・右60%」のように比率を変えたいときや、3カラムを均等に分けたいときは「33.33%」のように指定します。
直感的でわかりやすく、初心者の方にも最もおすすめできる単位です。

注意点として、カラム間の余白（ガター）が設定されている場合、%の合計が100%でも余白分がオーバーして崩れることがあります。
余白も考慮して、合計を95〜98%程度に抑えると安全です。

ピクセル（px）：固定幅にしたいときに使う

pxは画面上のドット数（ピクセル数）で絶対的な幅を指定する単位です。
「このサイドバーは常に250pxで表示したい」「アイコン列は80pxで固定したい」といった場合に使います。

ただし、pxで指定すると画面サイズが変わっても幅が変わらないため、スマホなどの小さな画面では意図しない表示崩れが起こることがあります。
固定幅はPC表示では安定しますが、スマホ向けの設定は別途%や1カラム表示に切り替えるなど、デバイスごとの調整を必ず行いましょう。

em・rem：フォントサイズ基準の単位

emは親要素のフォントサイズを基準にした相対単位、remはルート要素（html）のフォントサイズを基準にした相対単位です。
たとえば基本フォントが16pxの場合、「1em」または「1rem」は16px相当になります。

テキストと画像の比率をフォントサイズに連動させたい場合や、アクセシビリティを意識したデザインをするときに有効です。
ただし、ブログのレイアウト調整で頻繁に使う単位ではなく、%やpxに慣れてから必要に応じて活用するのがよいでしょう。

vw・vh：ビューポート基準の単位

vwはビューポート（表示領域）の幅に対する割合、vhは高さに対する割合で指定する単位です。
「100vw」はブラウザの表示幅いっぱいを意味します。

フルワイドなデザインや、画面全体に広がるヒーローセクションを作りたいときに役立ちます。
ただし、サイドバーやスクロールバーの幅が考慮されない場合があり、横スクロールが発生することもあります。
使う際は実際のプレビューで必ず確認することを強くおすすめします。

単位の選び方まとめ

サイト全体のコンテンツ横幅・サイドバー幅を変更する方法

個々のカラム幅だけでなく、サイト全体のコンテンツエリアの横幅やサイドバーの幅を変えたいと思う場面もあります。
ここでは、SWELLのカスタマイザーから操作するサイト全体の幅設定と、サイドバー幅の調整方法についてご説明します。

コンテンツ横幅をカスタマイザーから変更する

SWELLでは、サイト全体のコンテンツ幅をWordPressのカスタマイザーから変更できます。
管理画面から「外観」→「カスタマイズ」を開き、「サイト全体設定」または「レイアウト」に関する項目を探すと、コンテンツ幅の設定項目が見つかります。

初期設定では、1カラム時の記事コンテンツの幅は900px程度に設定されていることが一般的です。
これを変更したい場合は、数値を書き換えて「公開」ボタンをクリックすれば、サイト全体に変更が反映されます。

コンテンツ幅を広げると、横に余裕のある画面では文章や画像がより大きく表示されるようになります。
一方で、広げすぎると1行あたりの文字数が増えすぎて読みにくくなることがあります。
一般的に、本文テキストが読みやすいとされる幅は600〜800px程度とされていますので、あまり広げすぎないことをおすすめします。

なお、変更後は実際のページをブラウザでプレビューし、PC・スマホ両方の表示を確認することを忘れないようにしましょう。

サイドバーの横幅について

SWELLのサイドバーの幅は、テーマのデフォルト設定で決まっており、カスタマイザーの標準設定だけでは自由に変えることが難しいのが現状です。
しかし、CSSをカスタマイズすることで変更する方法があります。

具体的には、「外観」→「カスタマイズ」→「追加CSS」を開き、サイドバーに対応するCSSセレクターに対して幅の指定を追加します。
SWELLのサイドバーに対応するセレクターは、テーマのバージョンによって異なることがあるため、変更前に必ずバックアップを取り、テスト環境で確認することをおすすめします。

よく使われる方法としては、以下のような形でCSSを記述します（実際のセレクター名はSWELLのバージョンによって異なる場合があります）。

• サイドバーの幅を広げたい：.sidebarに対してwidthやflex-basisを指定する
• メインコンテンツ側の幅を調整：サイドバーとのバランスを見ながらメインエリアのwidthも合わせて変更する

CSSのカスタマイズは少し技術的な知識が必要になる部分ですが、「追加CSS」の欄に記述するだけなのでテーマファイルを直接編集するよりも安全です。
変更の際は少しずつ数値を調整し、プレビューで確認しながら進めるとよいでしょう。

フルワイドブロックとの組み合わせでコンテンツ幅を超えた表現も可能

SWELLには「フルワイドブロック」という機能もあります。
これを使うと、コンテンツ幅の設定に関係なく、画面の端から端まで広がる全幅表示のセクションを作ることができます。

リッチカラムブロックとフルワイドブロックを組み合わせることで、サイト型トップページのような印象的なデザインが実現できます。たとえば、フルワイドブロックの中にリッチカラムブロックを入れ、左右に画像とテキストを並べるレイアウトは、プロのサイトのような見栄えになります。
コンテンツ幅に縛られない自由な表現ができるので、トップページのデザインをこだわりたい方にとくにおすすめの組み合わせです。

カラム幅を変更するときによくある失敗と対策

カラム幅の設定でよくある失敗として、以下のようなケースが挙げられます。
事前に知っておくことで、無駄な手戻りを防ぐことができます。

• 幅の合計が100%を超えてしまう：複数カラムの幅の合計が100%を超えると、レイアウトが崩れます。
  余白（ガター）の分を引いた数値で設定するよう心がけましょう。
• スマホ表示を設定し忘れる：PCの見た目を整えることに集中するあまり、スマホ表示の設定をしないまま公開してしまうケースがあります。
  必ずデバイスごとの設定を確認しましょう。
• 親ブロックではなく子ブロックを選択してしまう：前述の通り、カラム幅の設定は親ブロックを選択した状態で行う必要があります。
  設定項目が見つからない場合は、選択しているブロックの階層を確認してみてください。
• vwを使ったら横スクロールが発生した：vwはスクロールバーの幅を含まないことがあります。
  意図しない横スクロールが発生した場合は、%に切り替えるか、max-widthを設定することで解消できることがあります。

まとめ｜SWELLのカラム幅設定で自由なレイアウトを実現しよう

この記事のポイントをまとめます。

• SWELLには「カラムブロック」と「リッチカラムブロック」の2種類があり、用途によって使い分けることが大切
• リッチカラムブロックはPC・タブレット・スマホそれぞれにカラム幅を個別設定できる高機能なブロック
• カラム幅の設定は「親ブロックを選択」した状態で右サイドバーの「カラム横幅」から行う
• 幅の単位は%・px・em・rem・vw・vhから選べ、通常のカラム幅設定には%が最もおすすめ
• サイト全体のコンテンツ横幅はカスタマイザーから変更でき、サイドバー幅はCSSカスタマイズで対応可能
• フルワイドブロックとリッチカラムブロックを組み合わせると、プロのようなサイト型レイアウトが実現できる
• 設定後は必ずPC・タブレット・スマホの各デバイスでプレビュー確認をすること

SWELLのカラム幅の設定は、最初は少し複雑に感じるかもしれませんが、「どのブロックを選択するか」「どのデバイス向けに設定しているか」という2点を意識するだけで、ぐっとスムーズになります。
とくにリッチカラムブロックは、使いこなすほどデザイン表現の幅が広がる機能といえます。
最初はシンプルな2カラム・%指定から試してみて、慣れてきたら3カラムやデバイス別設定にも挑戦してみてください。
自分のブログやサイトが思い通りのレイアウトになったときの達成感は格別ですよ。
ぜひ今日から少しずつ試してみてくださいね。