写真と文章のストーリー
画像と文章を組み合わせて、ブランドや商品の背景・選び方のストーリーを伝えるセクションです。本文の下に番号付きのステップを並べられ、最後に引用文で締められます。
分類: Hellostore オリジナル
同梱のトップページのテンプレートに最初から置かれています。 ほかのページに置くときは、テーマエディタ（管理画面の「オンラインストア → テーマ → カスタマイズ」）で追加したいページの「セクションを追加」から 「写真と文章のストーリー」 を選択します。どのページ種別にも追加できます（ヘッダー・フッターエリアを除く）。
写真は枠を付けずに角丸で表示し、パソコンでは写真と文章を上でそろえます。スマートフォンでは写真が先、文章が後に並びます。
- テキストの配置: 左（初期値）・中央・右から選びます。小さな見出し・見出し・本文・ステップ・リンクがそろって動きます。
- 画像: メインの画像です。
- 画像の代替テキスト: 主にスクリーンリーダーが読み上げる画像の説明です。入力しても通常の画面の見た目は変わりません。空欄の場合は画像に保存された代替テキストを使います。画像を設定したときだけ表示されます。
- 2枚目の画像: 入れると画像を2つ並べます。空欄なら1枚で表示します。
- 画像比: 画像に合わせる（初期値）は写真の形のまま表示します。縦長（4:5）・正方形 は枠に合わせて写真を切り抜きます。
- 幅: パソコン（750px以上）で画像が占める幅です。中（初期値）は画像と文章が半分ずつ、小 は画像が約3分の1、大 は約3分の2になります。画像が2枚のときは、小 だと画像が細くなります。スマートフォンでは変わりません。
- 画像の位置: 左（初期値）は画像が左、文章が右。右 は画像が右、文章が左になります。パソコンのみです。
- 小さな見出し: 見出しの上に小さく表示するラベルです。
- 見出し: ストーリーの見出しです。
- 見出しのサイズ: （初期値: 中）小・中・大・特大・4L から選びます。
- 本文: ストーリーの本文です。
- ステップの見せ方: 画像の横に並べる（初期値）か カードで並べる（画像と本文の下にカードで横に並べる。パソコンでは最大3列）。
- ステップの番号: 各ステップで入力（初期値）は各ステップの「番号」を表示します。漢数字（一・二・三）なども、ここで入力します。自動（01, 02…） と 表示しない も選べます。
- セクションの配色: セクション全体の配色です。
- 上: セクションの上に空ける余白です（既定 36px）。
- 下: セクションの下に空ける余白です（既定 36px）。
本文の下に並ぶ番号付きのステップです。商品の選び方・お手入れの手順などを順番に説明できます。
- ステップの画像: ステップに添える画像です。入れたステップだけ画像を表示します。
- 番号: 「ステップの番号」が「各ステップで入力」のときだけ表示する番号です（例: 1、一）。
- テキスト: ステップの短い説明文です。ステップ見出しかステップ本文を入れた場合は、そちらを表示し、この欄は表示されなくなります。
- ステップ見出し: ステップの見出しです。
- リンク先: ステップ見出しに付けるリンクです。ステップ見出しを入れたときだけ表示されます。
- ステップ本文: ステップの詳しい説明です（リッチテキスト）。
セクションの最後に引用として表示する言葉です。本文と違う配色にすると、締めの部分が引き立ちます。1つだけ置けます。
- 小さな見出し: 引用の上に小さく表示するラベルです。
- 締めの言葉: 引用として表示する言葉です。
- 配色: 締めの部分の配色です（初期値: scheme-2）。
本文の下に置くリンクです。1つだけ置けます。どちらかが空欄だと表示されません。
- リンクラベル: リンクの文言です。
- リンク先: リンクの URL です。