価格表ブロックでは、説明文と価格を添えた視覚的に魅力的なアイテム一覧を作成できます。レストランのメニュー、サービスパッケージ、製品ラインナップなど、あらゆるアイテムを柔軟かつ洗練された方法で提示できます。
リストの各項目には、タイトル、説明、価格、任意の割引価格、画像、リンクを含めることができます。全体のレイアウト、画像の位置、価格の配置を制御でき、あらかじめデザインされたテンプレートから選択してすぐに開始できます。
ページに価格表ブロックを追加する
SeedProdページに価格表ブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン > ブロック の下にある「価格表」ブロックを、ページの希望するセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、価格表ブロックをクリックして設定を開きます。コンテンツタブは3つのセクションに分かれています：価格表項目、レイアウト、画像領域。
価格表項目：
- アイテム一覧:各価格表項目はドラッグ可能な行として表示されます。アイテムをドラッグして並べ替えが可能です。アイテムにカーソルを合わせると複製ボタンと削除ボタンが表示されます。アイテムのタイトルをクリックすると個別の設定を展開できます。
- タイトル：リストに表示されるアイテム名を入力してください。
- 説明:アイテムの説明を入力してください。太字、斜体、下線、リンクを含む基本的なリッチテキスト書式設定をサポートしています。
- 価格：商品の表示価格を入力してください（例：20ドル）。
- 割引を提供しますか？：オンにすると、元の価格の横に割引価格を表示します。有効にした場合、「実際の価格」フィールドに入力してください。これが取り消し線で表示される元の価格となり、「価格」フィールドには割引後の金額が表示されます。
- 画像：このアイテムと一緒に表示する画像をアップロードまたは選択するか、画像ソース欄に直接画像URLを入力してください。
- 代替テキスト：アクセシビリティとSEOのために、アイテムの画像の説明的な代替テキストを入力してください。
- リンク:この項目をクリック可能にするURLを入力してください。レイアウトセクションの「リンク完了ボックス」設定と連携して動作します。
- 新規アイテム追加:アイテムリストの下部にあるボタンをクリックして、新しい価格リスト項目を追加します。
レイアウト
- 画像位置:アイテム画像がテキストコンテンツに対して表示される位置を設定します — 上部、左側、右側、またはなし（画像を表示しない）。
- 価格位置：価格の表示位置を選択します —見出しの右側（価格がタイトルと同じ行に表示され、タイトルと価格の区切り線で分離されます）または見出しと説明文の下（価格が説明文の後に表示されます）。注：画像位置が「上部」に設定されている場合、このオプションは利用できません。
- タイトルと価格の区切り線スタイル:「価格位置」が「見出しの右側」に設定されている場合、項目タイトルと価格の間の区切り線のスタイルを選択します — 実線、点線、破線、またはなし。
- 全体的な配置：すべての項目の水平方向の配置を設定します — 左揃え、中央揃え、または右揃え。
- 垂直方向の位置合わせ：各行内で画像とテキストコンテンツが垂直方向にどのように配置されるかを設定します — 上端、中央、または下端。画像位置が上端に設定されていない場合に利用可能です。
- リンク完全ボックス：オンにすると、各アイテムに設定されたリンクURLを使用して、アイテム行全体をクリック可能にします（アイテムタイトルのみではなく）。
イメージエリア：
- 形状:全てのアイテム画像に適用する形状を選択 — デフォルト（正方形）、角丸（わずかに丸み）、円形（完全な円形）、またはカスタム（各コーナーごとに独自の境界線の半径を設定）。
- 幅:画像領域の幅を1～300ピクセルで設定します。
- 画像の角丸設定：形状がカスタムに設定されている場合、各コーナー（左上、右上、右下、左下）ごとに角丸半径を個別に設定します。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、あらかじめデザインされたレイアウトテンプレートから選択し、価格表の外観を素早く設定できます。
- 利用可能なテンプレート：3種類のテンプレートから選択可能 ―左レイアウトテンプレート（画像左側）、右レイアウトテンプレート（画像右側）、画像なしテンプレート（テキストと価格のみ、画像なし）。テンプレートをクリックすると、そのレイアウトと間隔設定が即座に適用されます。
ステップ3：デザインのカスタマイズ
詳細設定タブでは、価格表ブロックのタイポグラフィ、色、枠線、背景を微調整できます。
スタイル:
- タイトルのタイポグラフィ：すべてのアイテムタイトルのフォントファミリー、サイズ、太さ、スタイルを設定します。
- 説明のタイポグラフィ:全ての商品説明テキストのタイポグラフィを設定します。
- 価格の書体設定：すべての商品価格テキストの書体を設定します。
- タイトル色：アイテムのタイトルテキストの色を設定します。
- 説明文の色：アイテムの説明文のテキストの色を設定します。
- 価格の色:商品価格テキストの色を設定します。
- 割引色：商品の割引が有効な際に表示される、取り消し線で消された元の価格の色を設定します。
- テキストシャドウ：テキストに影効果を追加します — 「なし」、「ヘアライン」、「小」、「中」、「大」、「特大」、「2倍大」から選択してください。
スペース:
- 余白：価格表ブロックの周囲のスペース（上、右、下、左）を制御します。これにより、ブロックとページ上の周囲の要素との間に表示されるスペースが決まります。
- パディング：価格リストブロック内の内側の余白（上、右、下、左）を調整します。これにより、リストの内容とブロックの端の間に余裕が生まれます。
境界線：
- 境界線のスタイル:ブロックの境界線のスタイルを設定します — 実線、点線、または破線。
- 枠線の色:ブロックの枠線の色を設定します。
- 枠線の幅：各辺（上、右、下、左）ごとの枠線の太さを設定します。
- 角丸半径:ブロックの角の丸みを設定します。
背景：
- 背景色：価格表ブロック全体に単色の背景色を設定します。
- 背景画像：ブロックの背景画像をアップロードまたは選択し、位置、サイズ、繰り返し動作を設定できます。
属性：
- CSS ID:価格リストブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス：テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で価格表ブロックを非表示にします。
- タブレットで非表示:タブレット端末では価格表ブロックを非表示にします。
- モバイルで非表示:モバイル端末で価格表ブロックを非表示にします。
ステップ4: 変更を保存する
価格リストブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページに価格表ブロックの追加に成功しました！訪問者が商品一覧を閲覧し、価格を比較し、行動を起こしやすくするための、魅力的で情報豊富なリスト作成にご活用ください。さまざまなレイアウト、画像形状、テンプレートスタイルを試して、ブランドに完璧に合った価格表を作成しましょう。