基本操作
- テンプレート切替: テーマエディタ上部で「ページ > 既定のページ」を選択し、対象ページをプレビューに指定。
- コンテンツ編集: Shopify管理画面の「オンラインストア > ページ」で本文（Rich text）を編集すると、
page-contentブロックに反映されます。 - ブロック構成: 既定の
main-pageはタイトル（text）と本文（page-content）の2ブロック構成です。 - パンくずリスト: テンプレート側で自動出力される場合があります。不要な場合は
snippets/breadcrumbsやテーマ設定を確認してください。
セクション共通の見た目調整
- ここを触る: main-pageセクション全体の設定。
- よく使う項目: セクション幅、配色、上下余白、ブロック間調整。
- ヒント: 企業情報やFAQなど文章中心のページは
section_width = page-widthで中央揃え、隙間32px程度。写真を大きく見せたい場合はfull-width＋余白0でHero用途にも使えます。
テンプレート
- 固定ページテンプレートで利用する専用セクションとブロックに絞って解説します。
main-page
- 目的: シンプルなページタイトルと本文（記事コンテンツ）を表示。
- 含まれるブロック:
text（タイトル）とpage-content（本文）。
設定詳細
| 設定 | 種別 | 説明 |
|---|---|---|
| 隙間 | Range(px) | ブロック同士の間隔。タイトルと本文の距離、本文下の余白もここで制御。 |
| 配色 | Color scheme | 背景/テキスト/リンク色。本文内の段落もここで指定した前景色を継承する。 |
| セクション幅 | Select |
page-widthで左右に余白を取り、full-widthで背景を端まで広げる。 |
| 上下余白 | Range(px) | セクション外周の余白。デフォルトは上40px/下80px。 |
タイトル
| 設定 | 種別 | 説明 |
|---|---|---|
| 本文 | Text | 説明文や補足情報などを入力できます。 |
| 見出しプリセット | Select | 見出しプリセットを選択し、ページごとのアクセントを付ける。 |
| 整列/幅 | Select | 中央揃え/左揃えなどを選択。速やかに複数行にならないようmax_widthをnormalのままにするのがおすすめ。 |
コンテンツ
| 設定 | 種別 | 説明 |
|---|---|---|
| 幅 | Select |
fixed（本文幅を制限）/fluid（左右いっぱいまで）。長文はfixedで可読性を確保。 |
本文の出力はShopifyのリッチテキストエディタで管理し、段落/見出し/画像/埋め込みがページレコードからそのまま挿入されます。
追加ブロック
- 追加可能なブロック種別はセクション設定に従います。CTAや画像を差し込みたい場合はアプリブロックや別セクション（例: セクション（汎用））で補完してください。
連携・注意事項
- ページ本文はマルチ言語対応済み。
{{ page.content }}に含まれるリッチテキストが翻訳リソースに基づいて切り替わるか確認しましょう。 - ページ内でフォームを使う場合は、本文にLiquidを記述するのではなく、
セクション（汎用）やカスタムLiquidセクションを追加して管理するのがおすすめです。 - main-pageセクション自体はヘッダーグループでは無効化されないので、Heroやギャラリーなど別セクションを追加する場合はこのセクションの上/下に追加してレイアウトを構成します。
Tips（運用のコツ）
- 長文ページでは本文中にアンカーリンクを設定し、冒頭に目次（通常のリスト）を設けるとUX向上。CSSで
.layout-panel-flexを活用し、目次と本文を2カラム化することもできます。 - 企業情報ページなどでヘッダー背景色を変えたい場合は、main-pageとは別のセクションを上部に追加してビジュアル要素を作り、main-pageではタイポグラフィに集中。
- 画像を多用するエッセイページでは、本文中の画像サイズを100%にしつつ、
section_width = full-widthで背景だけ広げ、page-content width_mode = fixedにするなどメリハリを付けると読みやすいです。
公開前チェックリスト
- ページ選択: プレビュー対象ページが正しいか。翻訳やドラフト状態のページを誤って参照していないか。
- タイトル: H1が重複していないか、SEOキーワードが含まれているか。
- 本文: 画像の代替テキスト、リンク先、テーブル等が崩れていないか。
- 余白: セクション上下と本文幅がデバイス別に適切か。モバイルで余白が広すぎないか確認。
- 追加ブロック: Dividerやアプリブロックを追加した場合、背景色や配色が本文と整合しているか。