{"product_id":"2026-04-19","title":"【Horizon】カラムごとの幅比率を指定できる横並びレイアウトブロックの設定例","description":"\u003cp\u003eHorizonテーマにカラムごとの幅比率を指定できるカスタムブロック（\u003ccode\u003eblocks\/column.liquid\u003c\/code\u003e と \u003ccode\u003esnippets\/column.liquid\u003c\/code\u003e）を追加する方法です。標準の \u003ccode\u003egroup\u003c\/code\u003e ブロックでは幅比率を直接指定できませんが、このブロックを追加するとテーマエディタで13種類のプリセット＋カスタム比率入力でレイアウトを自由に設定できます。既存ファイルへの変更は不要です。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"テーマエディタでカラムレイアウトブロックを使用している様子\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-19_1.png?v=1776526184\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003eプリセット一覧\u003c\/h3\u003e\n\u003cp\u003e1列〜6列まで13パターン＋カスタム比率入力に対応しています。デスクトップとモバイルで独立して設定できるので、PC では横並び・スマホでは縦積みといった表示切り替えも簡単です。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"横並びレイアウト — プリセット一覧（13パターン）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-19_2.png?v=1776526184\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"横並びレイアウト — バリエーション例（6パターン）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-19_3.png?v=1776573079\" class=\"zoomable-image\" width=\"800\" height=\"640\" style=\"aspect-ratio: 1.25;\"\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003eブロック実装\u003c\/h3\u003e\n\u003cp\u003e\u003ccode\u003eblocks\/column.liquid\u003c\/code\u003e でスキーマ定義（カラム比率プリセット・gap・外観設定）と子ブロック収集を行い、\u003ccode\u003esnippets\/column.liquid\u003c\/code\u003e でCSS Gridの \u003ccode\u003egrid-template-columns\u003c\/code\u003e を生成します。スコープされたスタイルを出力するため、同一ページに複数配置しても干渉しません。\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"blocks\/column.liquid — schema定義（column_pattern_desktop セレクトなど）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-18_2_4aaf9ac4-997d-4073-b7e1-5ba47db26dff.png?v=1776511985\" class=\"zoomable-image\" width=\"800\" height=\"1491\" style=\"aspect-ratio: 0.536;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"snippets\/column.liquid — CSS Grid生成ロジック（プリセットを fr 単位に変換）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-18_3_7a3246e7-0e15-44f9-b68d-b65a5695ac3c.png?v=1776511989\" class=\"zoomable-image\" width=\"800\" height=\"1214\" style=\"aspect-ratio: 0.659;\"\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48754521211131,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-04-18.png?v=1776575803","url":"https:\/\/store-dojo.com\/products\/2026-04-19","provider":"STORE DOJO","version":"1.0","type":"link"}