{"product_id":"2026-05-02","title":"【Horizon】フッターに「ページのトップに戻る」ボタンを追加するブロック","description":"\u003cp\u003eHorizonテーマのフッターに「ページのトップに戻る」フローティングボタンを、テーマエディタから追加できるブロックとして実装する方法です。プライベートブロックとして実装するためフッター以外のセクションには表示されず、色・サイズ・アイコンの太さ・シャドウ・位置・形状などをエディタから自由に設定できます。\u003c\/p\u003e\n\n\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-02_1.png?v=1777705779\" alt=\"フローティングする「ページのトップに戻る」ボタン\" style=\"max-width:100%;border-radius:8px;\"\u003e\n\n\u003ch2\u003e仕組み\u003c\/h2\u003e\n\u003cp\u003e新規にプライベートブロック \u003ccode\u003eblocks\/_back-to-top.liquid\u003c\/code\u003e を追加し、フッターセクション（\u003ccode\u003esections\/footer.liquid\u003c\/code\u003e）の \u003ccode\u003eblocks\u003c\/code\u003e 配列に登録することでテーマエディタの「ブロックを追加」メニューに表示されるようになります。プライベートブロック（ファイル名先頭の \u003ccode\u003e_\u003c\/code\u003e）はフッター専用となり、他のセクションのブロック追加メニューには現れません。\u003c\/p\u003e\n\n\u003cp\u003eフッターの \u003ccode\u003e.footer-content\u003c\/code\u003e には \u003ccode\u003econtain: content\u003c\/code\u003e が指定されており、その内部の \u003ccode\u003eposition: fixed\u003c\/code\u003e 要素は viewport ではなく \u003ccode\u003e.footer-content\u003c\/code\u003e に固定されてしまいます。これを回避するため、ブロック内のJavaScriptで初期化時にボタンを \u003ccode\u003edocument.body\u003c\/code\u003e 直下に移動させ、本来の意図通り画面の固定位置にフローティングさせています。\u003c\/p\u003e\n\n\u003ch2\u003e追加・修正するファイル\u003c\/h2\u003e\n\u003ctable style=\"width:100%;border-collapse:collapse;font-size:.9em;\"\u003e\n\u003cthead\u003e\n\u003ctr style=\"background:#f6f8fa;\"\u003e\n\u003cth style=\"padding:.5em .75em;text-align:left;border:1px solid #e0e0e0;\"\u003eファイルパス\u003c\/th\u003e\n\u003cth style=\"padding:.5em .75em;text-align:left;border:1px solid #e0e0e0;\"\u003e操作\u003c\/th\u003e\n\u003c\/tr\u003e\n\u003c\/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\u003ccode\u003eblocks\/_back-to-top.liquid\u003c\/code\u003e\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e新規作成（全248行）\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\u003ccode\u003esections\/footer.liquid\u003c\/code\u003e\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eL105〜L107 に追記（schema の \u003ccode\u003eblocks\u003c\/code\u003e 配列）\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\u003ccode\u003elocales\/ja.schema.json\u003c\/code\u003e\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003enames \/ settings \/ content の3セクションにキー追加\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e\u003ccode\u003elocales\/en.default.schema.json\u003c\/code\u003e\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003enames \/ settings \/ content の3セクションにキー追加\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003c\/tbody\u003e\n\u003c\/table\u003e\n\n\u003cp\u003e※ 行数表記は素のHorizonテーマ（v3.5.1）基準です。\u003c\/p\u003e\n\n\u003ch2\u003e手順\u003c\/h2\u003e\n\u003col\u003e\n\u003cli\u003eShopify管理画面 → テーマ → コードを編集\u003c\/li\u003e\n\u003cli\u003e\n\u003ccode\u003eblocks\/\u003c\/code\u003e フォルダに \u003ccode\u003e_back-to-top.liquid\u003c\/code\u003e を新規作成し、購入後のコードを貼り付ける\u003c\/li\u003e\n\u003cli\u003e\n\u003ccode\u003esections\/footer.liquid\u003c\/code\u003e を開き、\u003ccode\u003eschema\u003c\/code\u003e 内の \u003ccode\u003eblocks\u003c\/code\u003e 配列に \u003ccode\u003e{\"type\": \"_back-to-top\"}\u003c\/code\u003e を追記\u003c\/li\u003e\n\u003cli\u003e\n\u003ccode\u003elocales\/ja.schema.json\u003c\/code\u003e と \u003ccode\u003elocales\/en.default.schema.json\u003c\/code\u003e にそれぞれ翻訳キーを追加\u003c\/li\u003e\n\u003cli\u003eテーマエディタを開き、フッターセクションで「ブロックを追加」→「ページのトップに戻る」を選択\u003c\/li\u003e\n\u003cli\u003e色・サイズ・アイコンの太さ・シャドウ・位置・形状を調整\u003c\/li\u003e\n\u003c\/ol\u003e\n\n\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-02_2.png?v=1777705782\" alt=\"テーマエディタで「ページのトップに戻る」ブロックを追加\" style=\"max-width:100%;border-radius:8px;\"\u003e\n\n\u003ch2\u003e追加するファイル: blocks\/_back-to-top.liquid\u003c\/h2\u003e\n\u003cp\u003e新規ファイルとして全コードを貼り付けます。前半がテンプレート・スタイル・スクリプト、後半がschema定義です。\u003c\/p\u003e\n\n\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-02_3.png?v=1777705786\" alt=\"_back-to-top.liquid 前半（テンプレート・スタイル・スクリプト）\" style=\"max-width:100%;border-radius:8px;\"\u003e\n\n\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-02_4.png?v=1777705790\" alt=\"_back-to-top.liquid 後半（schema定義）\" style=\"max-width:100%;border-radius:8px;\"\u003e\n\n\u003ch2\u003e修正するファイル: sections\/footer.liquid\u003c\/h2\u003e\n\u003cp\u003eschema の \u003ccode\u003eblocks\u003c\/code\u003e 配列に \u003ccode\u003e_back-to-top\u003c\/code\u003e を追加します。\u003ccode\u003e@app\u003c\/code\u003e と \u003ccode\u003ebutton\u003c\/code\u003e の間（L105〜L107）に3行を挿入してください。\u003c\/p\u003e\n\n\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-02_5.png?v=1777705793\" alt=\"sections\/footer.liquid の修正箇所\" style=\"max-width:100%;border-radius:8px;\"\u003e\n\n\u003ch2\u003e修正するファイル: locales\/ja.schema.json \/ locales\/en.default.schema.json\u003c\/h2\u003e\n\u003cp\u003eテーマエディタのラベルを翻訳するため、両ロケールファイルに同じキーを追加します。\u003ccode\u003enames\u003c\/code\u003e セクション、\u003ccode\u003esettings\u003c\/code\u003e セクション、\u003ccode\u003econtent\u003c\/code\u003e セクションの3ヶ所への追記が必要です。\u003c\/p\u003e\n\n\u003cimg class=\"zoomable-image\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-05-02_6.png?v=1777705795\" alt=\"ロケールファイルへの追記キー\" style=\"max-width:100%;border-radius:8px;\"\u003e\n\n\u003ch2\u003e設定項目（テーマエディタ）\u003c\/h2\u003e\n\u003ctable style=\"width:100%;border-collapse:collapse;font-size:.9em;\"\u003e\n\u003cthead\u003e\n\u003ctr style=\"background:#f6f8fa;\"\u003e\n\u003cth style=\"padding:.5em .75em;text-align:left;border:1px solid #e0e0e0;\"\u003eセクション\u003c\/th\u003e\n\u003cth style=\"padding:.5em .75em;text-align:left;border:1px solid #e0e0e0;\"\u003e設定項目\u003c\/th\u003e\n\u003cth style=\"padding:.5em .75em;text-align:left;border:1px solid #e0e0e0;\"\u003e範囲・デフォルト\u003c\/th\u003e\n\u003c\/tr\u003e\n\u003c\/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\" rowspan=\"2\"\u003e色\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eボタンの背景色\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e#EEEEEE\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eアイコンの色\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e#000000\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\" rowspan=\"3\"\u003eサイズ\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eボタンのサイズ\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e30〜100px \/ 60\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eアイコンのサイズ\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e10〜50px \/ 30（ボタンサイズと独立）\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eアイコンの太さ\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e1〜10px \/ 6\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\" rowspan=\"4\"\u003eシャドウ\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e影の色\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e#000000\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e影の不透明度\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e0〜100% \/ 15\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e影のぼかし\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e0〜30px \/ 8\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e影の垂直オフセット\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e0〜20px \/ 2\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e動作\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e表示開始のスクロール量\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e0〜1000px \/ 100\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\" rowspan=\"2\"\u003eレイアウト\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e位置\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e右下 \/ 左下\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003ctr\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003eシェイプ\u003c\/td\u003e\n\u003ctd style=\"padding:.5em .75em;border:1px solid #e0e0e0;\"\u003e円 \/ 正方形\u003c\/td\u003e\n\u003c\/tr\u003e\n\u003c\/tbody\u003e\n\u003c\/table\u003e\n\n\u003ch2\u003e注意事項\u003c\/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eプライベートブロック（先頭が \u003ccode\u003e_\u003c\/code\u003e）\u003c\/strong\u003e：ファイル名は \u003ccode\u003e_back-to-top.liquid\u003c\/code\u003e です。先頭のアンダースコアを忘れると \u003ccode\u003esections\/footer.liquid\u003c\/code\u003e の \u003ccode\u003e{\"type\": \"_back-to-top\"}\u003c\/code\u003e と一致せず認識されません。\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003e4ファイルすべての修正が必要\u003c\/strong\u003e：ブロックファイル単体では動作しません。\u003ccode\u003efooter.liquid\u003c\/code\u003e への登録と、ロケールファイルへのキー追加（2言語分）まで完了させてください。\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eテーマアップデートの影響\u003c\/strong\u003e：将来的に \u003ccode\u003esections\/footer.liquid\u003c\/code\u003e や \u003ccode\u003elocales\/*.schema.json\u003c\/code\u003e がアップデートされた場合、追記した行を再適用する必要があります。\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003e\u003ccode\u003evector-effect: non-scaling-stroke\u003c\/code\u003e\u003c\/strong\u003e：アイコンの太さがアイコンサイズに影響されないよう、SVGに \u003ccode\u003evector-effect=\"non-scaling-stroke\"\u003c\/code\u003e を指定しています。これによりアイコンサイズを 20px に縮めても太さ 1px が画面上で 1px として描画されます。\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eJS で \u003ccode\u003edocument.body\u003c\/code\u003e に移動\u003c\/strong\u003e：フッターの \u003ccode\u003e.footer-content\u003c\/code\u003e が \u003ccode\u003econtain: content\u003c\/code\u003e を持つため、\u003ccode\u003eposition: fixed\u003c\/code\u003e が viewport に対してではなくフッターに対して効いてしまいます。これを回避するためボタンをbodyに移動させています。\u003c\/li\u003e\n\u003c\/ul\u003e\n","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":48828577906939,"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-02.png?v=1777706626","url":"https:\/\/store-dojo.com\/products\/2026-05-02","provider":"STORE DOJO","version":"1.0","type":"link"}