【Horizon】カラム幅の比率を自由に設定する

【Horizon】カラムレイアウトブロックで幅比率を自由に設定する独自ブロック

Horizonテーマでページを作り込んでいると、「ここに2カラムのサイドバー付きレイアウトが欲しい」「3カラムで商品を並べたい」という場面に必ず出くわします。

Horizonには group ブロックがあり横並びレイアウト自体は可能ですが、各カラムの幅比率を直接指定する手段がありません。たとえば「左にメインコンテンツ、右にサイドバー（2:1）」を作ろうとすると、間接的な方法で調整するしかなく、思い通りの比率を出すのに苦労します。

この記事では、この課題を解決するカスタムカラムレイアウトブロックを紹介します。テーマエディタでプリセットを選ぶだけで柔軟なカラムレイアウトが実現でき、既存ファイルへの変更も不要です。

groupブロックの限界

Horizonの group ブロックは汎用的なコンテナで、子ブロックを横並びや縦並びに配置できます。しかし、カラムレイアウトとして使おうとすると以下の壁にぶつかります。

  • 幅比率を指定できない ― 「左2:右1」のように明示的な比率指定ができない。子ブロックの幅設定を個別に調整して近似する必要がある
  • デスクトップ/モバイルの独立制御が難しい ― デスクトップでは3列、モバイルでは1列に積む、といったレスポンシブ制御が直接はできない
  • カラム間の余白調整が限定的 ― 横方向・縦方向のgapを個別にpx単位で指定する仕組みがない

こうした制限を回避するために、PageFlyなどの外部ページビルダーアプリを使うケースもあります。ただ、アプリを追加するとJavaScriptの読み込みが増えて表示速度に影響が出たり、テーマのカラースキームやデザインシステムとの一貫性が崩れやすくなります。

カラムレイアウトブロックでできること

今回紹介するカラムレイアウトブロックは、CSS Gridをベースにしたテーマネイティブのカスタムブロックです。テーマエディタからノーコードで操作でき、以下のことが可能です。

14パターンのプリセット + カスタム自由入力

テーマエディタのドロップダウンから、よく使うカラムパターンをワンクリックで選べます。

カラムレイアウトブロックのプリセット一覧。1カラム、均等2〜4分割、2:1や1:2などの非均等比、3列の中央強調など13種に加え、カスタム比率指定が可能
プリセットで選べるカラム比率の一覧。デスクトップ/モバイルを個別に設定できる
パターン 用途例
2列均等（1:1） テキスト＋画像の並列配置
2列（2:1）/ 2列（1:2） メインコンテンツ＋サイドバー
2列（3:1）/ 2列（1:3） コンテンツ＋狭いサイドバー（ナビやCTAなど）
3列均等（1:1:1） 特徴紹介、3つの柱
3列（1:2:1） 中央にメインコンテンツ、左右にサイド
4列 / 5列 / 6列（均等） ロゴ一覧、アイコングリッド
カスタム（自由入力） 1 2 1 や 30 40 30 のように数値を入力

プリセットでカバーできない比率が必要な場合は「カスタム」を選択し、スペース区切りで数値を入力するだけです。入力した数値はそのままCSS Gridの fr 単位に変換されます。

デスクトップとモバイルを独立制御

レイアウトパターンはデスクトップ用とモバイル用を別々に設定できます。たとえば：

  • デスクトップ: 3列均等 → モバイル: 1列（縦積み）
  • デスクトップ: 2:1サイドバー → モバイル: 1列（サイドバーが下に回り込む）
  • デスクトップ: 4列 → モバイル: 2列均等

カラム間のgap（余白）もデスクトップとモバイルで個別にpx単位で調整可能です。

Horizonの既存ブロックをそのまま配置

カラムの中には、Horizonが持つ既存ブロック（テキスト、画像、group、ボタンなど）をそのまま子ブロックとして配置できます。新しい操作を覚える必要はなく、テーマエディタの通常のドラッグ&ドロップで使えます。

外観設定もフル装備

groupブロックと同等の外観設定を備えています：

  • カラースキーム（テーマの配色を継承 or 個別指定）
  • 背景画像・背景動画
  • オーバーレイ（ソリッド / グラデーション）
  • ボーダー（太さ、透明度、角丸）
  • パディング（上下左右を個別指定）
  • 縦方向の揃え（上寄せ / 中央 / 下寄せ / 高さを揃える）

ライブデモ：実際の配置例

デモストアにこのブロックを組み込み、代表的な比率パターンをそのままテーマエディタから配置してみた例です。いずれもプリセット選択のみで実現しており、Liquid や CSS は一切書いていません。

カラムレイアウトブロックの5列レイアウト実例。OUR PROMISE セクションで3枚の商品画像、中央にNew In、右端にDISCOVER YOUR STYLEの説明テキストを横並び配置
5列レイアウトに複数種類のブロック（画像・大見出し・説明テキスト）を混在させた配置例。カテゴリ紹介と新着コンテンツを一段で見せる定番構成
1:2:1 比率プリセットのライブ表示。左右に1fr幅のテキストカラム、中央に2fr幅の画像を配置した対称レイアウト
プリセット「3列（1:2:1）」。中央を画像、左右を説明テキストにした対称レイアウト。groupブロックでは近似しかできない比率
1:1:2 比率プリセットのライブ表示。左2列にテキストカード、右側に2fr幅の大きな画像を配置し視線誘導を作る非対称レイアウト
プリセット「1:1:2」。左に2つのテキストカード、右にヒーロー画像を広く取る非対称パターン。視線を右に送る構成
3列均等プリセットのライブ表示。Horizon Store のトップページで3枚の写真を1:1:1で横並び配置した商品紹介レイアウト
プリセット「3列均等（1:1:1）」。コーディネート提案やおすすめ商品の3枚並びに最適
5列レイアウトのライブ表示。TODAY'S PICKSセクションで Light Layers 見出し、2枚のモデル写真、MEMBERS ONLY 30% OFFセール訴求を横並びに構成した複雑なLPレイアウト
5列構成で大見出し＋商品写真×2＋セール訴求を一段に収めたLP構成。カラム間の配色・パディングは列ごとに独立指定している

いずれもデスクトップ表示の例です。モバイルでは別のプリセット（1列や2列均等）を指定することで、同じコンテンツがレスポンシブに縦積みされます。

技術的な設計のポイント

なぜCSS Gridなのか

カラムレイアウトの実装方法として、Flexbox + nth-child という選択肢もあります。しかし、この方式はモバイル向けに列数を変更する際にCSSの詳細度が競合しやすく、他のスタイルとの干渉が起きがちです。

CSS Gridであれば、grid-template-columns の値を変えるだけでレイアウトが切り替わります。メディアクエリでの上書きもシンプルで、予期しないCSS競合が起きにくい設計になっています。

snippets/column.liquidの実装コード。プリセットごとに grid-template-columns の値（1fr 1fr、2fr 1fr、1fr 2fr 1fr など）を組み立て、メディアクエリでモバイル用に上書きする
snippets/column.liquidの核心部分。プリセット→grid-template-columnsの変換ロジック

既存ファイルへの変更なし

このブロックは新規ファイルの追加だけで構成されています。

  • blocks/column.liquid ― ブロック定義（schema + render呼び出し）
  • snippets/column.liquid ― レンダリングロジック（CSS Gridの生成）
  • ロケールファイル（en.default.schema.json, ja.schema.json）への翻訳キー追加

Horizonの既存ファイルは一切変更していません。これは以前の記事で解説した「ベンダーファイルを触らない」原則に沿った設計であり、テーマのアップデート時にコンフリクトが発生しません。v3.5.0のようなCSS大規模リファクタリングが来ても、このカスタムブロックは影響を受けません。

blocks/column.liquidのschema定義。column_pattern_desktop/mobile、column_custom_ratio、column_gap_horizontal/vertical などの設定項目をプリセット選択肢と一緒に定義
blocks/column.liquidのschema定義。テーマエディタに出る設定項目をここで宣言する

Horizonのブロックアーキテクチャは、blocks/ ディレクトリにファイルを追加するだけで、テーマエディタに自動的にブロックとして表示される仕組みです。つまり、「ファイルを置くだけ」で新しいブロックが使えるようになります。これはHorizonのブロックベースアーキテクチャならではの強みです。

プリセット + カスタムの2層構造

設定UIは「初心者はプリセットで迷わない、上級者はカスタムで自由に」という2層構造になっています。カスタム入力欄はプリセットで「カスタム」を選んだ場合のみ表示される visible_if 制御が入っており、普段使いではシンプルな画面のままです。

groupブロックとの比較

groupブロック（標準） columnブロック（カスタム）
幅比率の指定 間接的（子ブロックの幅で調整） 直接指定（プリセット or 数値入力）
レスポンシブ制御 限定的 デスクトップ/モバイル独立設定
Gap（余白）制御 限定的 横/縦 × デスクトップ/モバイル（4値）
CSS方式 Flexbox CSS Grid（競合しにくい）
外観設定 あり 同等（背景、オーバーレイ、ボーダー等）
用途 汎用コンテナ カラムレイアウト特化

groupブロックが不要になるわけではありません。groupは汎用コンテナとして引き続き活躍します。columnブロックは「明確なカラム分割が必要な場面」に特化しており、両者は補完的な関係です。

こんな場面で役に立つ

どのページでも「横に並べたい」場面はあります。具体的にはこういったケースです。

  • LPのヒーローセクション ― 左にキャッチコピー＋CTAボタン、右に商品画像（2:1）。テキストが主役の構成に。
  • ブランドストーリーページ ― 左に長文テキスト、右にミニ写真グリッド（3:1）。読ませるページを作りやすい。
  • サービスの強み・特徴紹介 ― アイコン＋テキストのセットを3列均等（1:1:1）で並べる定番レイアウト。
  • ロゴ一覧・パートナー紹介 ― 4〜6列でロゴを横一列に並べる。デスクトップで6列、モバイルで2列、といった切り替えも設定ひとつ。
  • 比較コンテンツ ― 2列（1:1）でビフォーアフターや商品の比較を並べる。

いずれも、テーマエディタのドロップダウンを切り替えるだけで実現できます。コードを触る必要はありません。

導入方法

以下のファイルをテーマに追加するだけです。

  1. blocks/column.liquid を追加
  2. snippets/column.liquid を追加
  3. ロケールファイル（en.default.schema.json, ja.schema.json）に翻訳キーを追記

ファイルを追加してテーマエディタをリロードすると、カスタムセクション内のブロック追加メニューに「カラムレイアウト」が表示されます。

注意：このブロックは 安全カスタマイズ記事で解説したGitブランチ運用を前提としています。upstream/horizon ブランチでオリジナルを追跡し、カスタマイズは main ブランチで管理してください。

コードファイルはSTORE DOJOのTIPSで配布しています。→ 【Horizon】幅比率を指定できるカラムレイアウトブロックを追加する

まとめ

Horizonテーマのカラムレイアウトの課題は、外部アプリに頼ることなく、テーマネイティブのカスタムブロックで解決できます。

  • 14パターンのプリセット＋カスタム自由入力で、思い通りのカラム比率を実現
  • デスクトップとモバイルで独立したレイアウト制御
  • CSS Gridベースで軽量、パフォーマンスへの影響なし
  • 既存ファイルへの変更なし ― テーマアップデートに強い
  • Horizonのブロックアーキテクチャに乗っかるため、ファイルを置くだけで即利用可能

「groupブロックでは幅比率が思い通りにならない」と感じたことがある方は、ぜひ試してみてください。

コードファイル（blocks/column.liquid と snippets/column.liquid）はSTORE DOJOのTIPSで配布しています。
→ 【Horizon】幅比率を指定できるカラムレイアウトブロックを追加する

ブログに戻る