商品情報にスキップ
1 1
公開日:2026.04.19

【Horizon】カラムごとの幅比率を指定できる横並びレイアウトブロックの設定例

【Horizon】カラムごとの幅比率を指定できる横並びレイアウトブロックの設定例

用途

  • スタイル(CSS)編集
詳細を表示する

Horizonテーマにカラムごとの幅比率を指定できるカスタムブロック(blocks/column.liquidsnippets/column.liquid)を追加する方法です。標準の group ブロックでは幅比率を直接指定できませんが、このブロックを追加するとテーマエディタで13種類のプリセット+カスタム比率入力でレイアウトを自由に設定できます。既存ファイルへの変更は不要です。

テーマエディタでカラムレイアウトブロックを使用している様子

プリセット一覧

1列〜6列まで13パターン+カスタム比率入力に対応しています。デスクトップとモバイルで独立して設定できるので、PC では横並び・スマホでは縦積みといった表示切り替えも簡単です。

横並びレイアウト — プリセット一覧(13パターン)

横並びレイアウト — バリエーション例(6パターン)

ブロック実装

blocks/column.liquid でスキーマ定義(カラム比率プリセット・gap・外観設定)と子ブロック収集を行い、snippets/column.liquid でCSS Gridの grid-template-columns を生成します。スコープされたスタイルを出力するため、同一ページに複数配置しても干渉しません。

blocks/column.liquid — schema定義(column_pattern_desktop セレクトなど)

snippets/column.liquid — CSS Grid生成ロジック(プリセットを fr 単位に変換)

ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Horizon 3.4.0

blocks/column.liquid(新規作成)