🏗️ テーマ基盤初級

テーマ全体のHTML骨組み

すべてのページの共通HTML構造を定義するマスターレイアウトファイル。メタタグ、CSS・JavaScript の読み込み、ヘッダーセクション、ページ内容の出力を一元管理する。

用途

Shopify テーマ開発の基盤。すべてのページテンプレート（商品ページ、コレクション、トップページなど）はこのファイルを通じて HTML に展開される。

設置場所

layout/theme.liquid に配置する。このファイルはファイルシステムに一度だけ存在し、`{% sections 'header-group' %}` と `{{ content_for_layout }}` プレースホルダーで各ページテンプレートの内容を挿入する。

注意点

`content_for_header` には Shopify 管理画面の「テーマ設定 > その他スクリプト」や Shopify アプリが自動挿入するタグが含まれるため、削除してはいけない。`lang="en"` は `shop.locale` や Shopify Markets の設定に応じて動的に変更するか、多言語対応テーマの場合は条件分岐で各言語コードを指定する。メタビューポートの initial-scale は 1.0 で固定し、ユーザーによるズーム禁止（maximum-scale=1.0）は追加しないこと（アクセシビリティ基準違反）。

タグ:layouthtml-structuretheme-foundationheader-groupcontent-placeholder

コード

15 行 / liquid

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="{{ 'theme.js' | asset_url }}"></script>
    {{ 'theme.css' | asset_url | stylesheet_tag }}
    {{ content_for_header }}
  </head>
  <body>
    {% sections 'header-group' %}
    {{ content_for_layout }}
  </body>
</html>

出典・ライセンス

Source:: Shopify/theme-tools/packages/theme-graph/fixtures/skeleton/layout/theme.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

テーマ全体のHTML骨組み

コード

出典・ライセンス

関連項目

セクションスキーマのカスタムブロック定義

セクション呼び出しのフォーマット

レイアウトテンプレートの指定

Liquid フォーマッター互換のセクション表記

基本的なHTMLレイアウト

layout タグのフォーマット