{"product_id":"2026-05-04","title":"【Horizon】テーマで標準ブロックとセクションだけでFAQページを作る設定例","description":"\u003cp\u003eHorizonテーマで、テーマコードを一切編集せずに\u003cstrong\u003e標準のブロックとセクションだけ\u003c\/strong\u003eでカテゴリ別FAQページを作る設定例です。アコーディオン × グルーピング × ページ内アンカーリンク（目次から該当カテゴリへジャンプ）を、\u003ccode\u003etemplates\/page.faq.json\u003c\/code\u003e のブロック構成のみで実現します。\u003c\/p\u003e\n\n\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-04_1.png\" alt=\"カテゴリ別FAQページの完成形\" style=\"max-width:100%;border-radius:8px;\"\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003ch2\u003e仕組み\u003c\/h2\u003e\n\u003cp\u003eページ全体を \u003ccode\u003emain-page\u003c\/code\u003e セクションの中に「目次」「カテゴリ × 5」として並べ、各カテゴリは \u003ccode\u003egroup\u003c\/code\u003e ブロック内に「見出し（\u003ccode\u003etext\u003c\/code\u003e \/ h2）+ \u003ccode\u003eaccordion\u003c\/code\u003e（Q\u0026amp;Aを \u003ccode\u003e_accordion-row\u003c\/code\u003e で4件）」を入れる構成です。目次は先頭の \u003ccode\u003egroup\u003c\/code\u003e ブロックに \u003ccode\u003ebutton\u003c\/code\u003e を5つ並べ、各ボタンの \u003cstrong\u003estyle\u003c\/strong\u003e を「リンク」、リンク先URLを \u003ccode\u003e#faq-xxx\u003c\/code\u003e のアンカー指定にします。アンカーの\u003cstrong\u003e飛び先\u003c\/strong\u003eは、各カテゴリ直前に置いた \u003ccode\u003ecustom-liquid\u003c\/code\u003e ブロックの \u003ccode\u003e\u0026lt;span id=\"faq-xxx\"\u0026gt;\u003c\/code\u003e で受けます。\u003c\/p\u003e\n\n\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-04_4.png\" alt=\"ページ全体のブロック構造マップ\" style=\"max-width:100%;border-radius:8px;\"\u003e\n\n\u003ch3\u003e1. 目次ボタン → アンカーリンクの飛び先\u003c\/h3\u003e\n\u003cp\u003e標準ブロックには「カスタムID入力欄」がないため、\u003ccode\u003ecustom-liquid\u003c\/code\u003e ブロックに \u003ccode\u003e\u0026lt;span id=\"faq-xxx\" class=\"faq-anchor\"\u0026gt;\u0026lt;\/span\u0026gt;\u003c\/code\u003e を1行置くだけで\u003cstrong\u003eアンカーマーカー\u003c\/strong\u003eとして機能させます。目次ボタンの \u003ccode\u003elink\u003c\/code\u003e URL欄には \u003ccode\u003e#faq-xxx\u003c\/code\u003e をそのまま入力すればOK。Horizonは \u003ccode\u003eassets\/base.css\u003c\/code\u003e に \u003ccode\u003ehtml { scroll-behavior: smooth }\u003c\/code\u003e を持っているため、CSS追記なしでスムーススクロールが効きます。\u003c\/p\u003e\n\n\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-04_2.png\" alt=\"テーマエディタ：アンカーリンクの設定\" style=\"max-width:100%;border-radius:8px;\"\u003e\n\n\u003ch3\u003e2. カテゴリ × 5 のグルーピング\u003c\/h3\u003e\n\u003cp\u003e1カテゴリ = 1つの \u003ccode\u003egroup\u003c\/code\u003e ブロック。中に \u003ccode\u003etext\u003c\/code\u003e（h2）でカテゴリ見出しを置き、その下に \u003ccode\u003eaccordion\u003c\/code\u003e ブロックで Q\u0026amp;A を4件ずつ収めています。\u003ccode\u003eaccordion\u003c\/code\u003e 側はアイコンを \u003ccode\u003eplus\u003c\/code\u003e、行間に区切り線（dividers）を有効化し、視認性を確保。\u003c\/p\u003e\n\n\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-04_3.png\" alt=\"テーマエディタ：FAQグループセットの設定\" style=\"max-width:100%;border-radius:8px;\"\u003e\n\n\u003ch2\u003e実装のポイント\u003c\/h2\u003e\n\u003cp\u003e◆ 配色の罠\u003cbr\u003e\nTOC（目次）の \u003ccode\u003egroup\u003c\/code\u003e ブロックに \u003ccode\u003ecolor_scheme: scheme-2\u003c\/code\u003e を指定すると、\u003ccode\u003elink\u003c\/code\u003e スタイルのボタンを置いたとき\u003cstrong\u003eホバー時に文字が白く消えます\u003c\/strong\u003e。Horizon の \u003ccode\u003elink\u003c\/code\u003e スタイルは \u003ccode\u003e:hover\u003c\/code\u003e で \u003ccode\u003ecolor: var(--color-primary-hover)\u003c\/code\u003e を当てており、scheme-2 の \u003ccode\u003eprimary_hover\u003c\/code\u003e が \u003ccode\u003e#ffffff\u003c\/code\u003e（白）に設定されているため。\u003cstrong\u003e\u003ccode\u003escheme-3\u003c\/code\u003e\u003c\/strong\u003e など \u003ccode\u003eprimary_hover\u003c\/code\u003e が黒系のスキームに切り替えれば解決します。\u003c\/p\u003e\n\n\u003cp\u003e◆ ヘッダー固定オフセット\u003cbr\u003e\nヘッダーを固定（sticky）にしている場合、アンカー飛び先がヘッダーの裏に隠れます。共通の \u003ccode\u003ecustom-liquid\u003c\/code\u003e ブロックを1つ先頭に置き、\u003ccode\u003e\u0026lt;style\u0026gt;.faq-anchor { scroll-margin-top: 100px; }\u0026lt;\/style\u0026gt;\u003c\/code\u003e を入れて回避できます（ヘッダーが固定でなければ省略可）。\u003c\/p\u003e\n\n\u003ch2\u003e手順\u003c\/h2\u003e\n\u003cp\u003e◆Step1: ページの作成\u003cbr\u003e\n管理画面の「販売チャネル \u0026gt; オンラインストア \u0026gt; ページ」で「FAQ」「よくある質問と答え」等のページを新規作成します。\u003c\/p\u003e\n\n\u003cp\u003e◆Step2: テンプレート割当\u003cbr\u003e\nテーマエディタで \u003ccode\u003epage.faq\u003c\/code\u003e テンプレートを新規作成し、上記ページに割り当てます。\u003c\/p\u003e\n\n\u003cp\u003e◆Step3: ブロック構成\u003cbr\u003e\nテンプレート上で、上記の構造マップ通りにブロックを配置・設定します。本TIPS購入後にダウンロードできる \u003ccode\u003etemplates\/page.faq.json\u003c\/code\u003e をテーマのコードエディタ（または GitHub 連携テーマ）にそのまま貼り付ければ、即時に同じ構成を再現できます。\u003c\/p\u003e\n\n\u003cp\u003e関連: \u003ca href=\"\/products\/2026-05-03\"\u003e【Horizon】カートにFAQ（よくある質問）アコーディオンを追加する設定例\u003c\/a\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48830231216379,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-04.png?v=1777732183","url":"https:\/\/store-dojo.com\/products\/2026-05-04","provider":"STORE DOJO","version":"1.0","type":"link"}