コンテンツブロック一覧

見出しや画像から、お客様の声、FAQ、フォームまで、エディタにあるすべてのコンテンツブロックについて、用途と主な設定をまとめたガイドです。

ストアのページはすべてブロックで作られています。この記事では、エディタの左側のパネルにあるコンテンツブロックについて、それぞれの用途と主な設定を紹介します。商品の表示やカート、チェックアウトを扱うブロックは、ストアブロック：商品グリッド、商品、カート、チェックアウトで説明しています。

エディタのブロックパネル。ブロックは、基本、メディア、レイアウト、ストア、マーケティング、メニューとフォームのグループに分かれています

すべてのブロックに共通の設定

ページ上のブロックをクリックすると、設定が開きます。ほとんどのブロックでは、設定が全般、外観、タイポグラフィにまとまっています。どのブロックにもサイズと位置があり、グリッド上の位置を決めたり、タブレットやスマートフォンで非表示にしたりできます。また管理には、複製と削除があります。詳しくはブロックの追加、移動、サイズ変更とスマートフォンとタブレットで見やすいサイトにするをご覧ください。

タイポグラフィの設定があるブロックでは、項目はどれも同じです。書体、文字サイズ、太さ、色、イタリック、大文字・小文字、字間、行間です。以下の表では、これらを「タイポグラフィ」としてまとめて記載しています。

基本

ブロック	用途	主な設定
見出し	タイトルやセクションの見出しです。	テキスト、サイズ（見出し1〜見出し6）、配置、タイポグラフィ。
テキスト	本文の段落です。	テキスト、配置、タイポグラフィ。
リスト	含まれるものなど、短い箇条書きです。	項目（1行に1つ）、マーカー（チェックマーク、黒丸、ダッシュ、番号付き、なし）、項目の間隔、タイポグラフィ。
ボタン	ページやアドレスへ移動するボタンです。	表示名、リンク、スタイル（塗りつぶし、アウトライン、控えめ）、配置、色、角の丸み、文字サイズ、余白、幅いっぱい。
絵文字	シンプルな飾りとして使う、大きな絵文字ひとつです。	絵文字（選ぶか、自分で入力します）、文字サイズ、配置。

テキストとボタンについては、テキスト、見出し、ボタンを編集するをご覧ください。ボタンのリンクは、メニューのリンクと同じように設定します。メニューのリンクを編集するをご覧ください。

メディア

ブロック	用途	主な設定
画像	1枚の写真やグラフィックです。	画像、代替テキスト（画像が見えない人のための短い説明）、形状（ワイド 16:9、スタンダード 4:3、正方形、元の比率）、画像の合わせ方（枠いっぱいに埋める、枠内に収める）、角の丸み。
ギャラリー	画像をグリッド状に並べます。クリックすると原寸大で開くようにもできます。	画像、列の数（1〜6）、グリッドの間隔、形状、角の丸み、クリックで拡大表示。
動画	YouTube の動画をページ上で再生します。	YouTube のリンク。Payly が動画ファイルをホスティングすることはありません。
地図	工房、店舗、受け取り場所を示す Google マップです。	住所または場所、ズーム、形状、角の丸み。住所は、検索するときと同じように入力してください。

ギャラリーでは、画像ごとにウェブアドレスを指定し、説明と、必要に応じてリンクを追加します。アップロードした写真を使うには、メディア画面で写真のアドレスをコピーしてください。画像を追加してメディアライブラリを使うをご覧ください。

ギャラリーの画像の設定。画像のアドレス、説明、任意のリンクを入力する欄があります

レイアウト

ブロック	用途	主な設定
コンテナ	ほかのブロックを入れる箱です。ひとまとまりとしてスタイルを整えたり移動したりできます。	内側のレイアウト（自由なグリッド、縦に並べる、横に並べる）、グリッドの間隔、項目の揃え方、背景色、枠線の色、角の丸み、余白、最小の高さ。
グリッド	行と列の表で、各セルにブロックを入れます。スマートフォンでは1列になります。	列の数と行の数（それぞれ1〜8）、グリッドの間隔、項目の揃え方、セルの枠線、色、余白。
区切り線	ページの2つの部分の間に引く細い線です。	色、太さ。
余白	ブロックとブロックの間の空きスペースです。	高さ。

コンテナとグリッドでレイアウトを作るをご覧ください。

マーケティング

ブロック	用途	主な設定
お知らせバー	配送のお得な情報など、短いメッセージを表示する細い色付きのバーです。リンクを付けることもできます。	テキスト、リンクの文言、リンク、配置、背景色、文字色、文字サイズ。
お客様の声	お客様の言葉を、名前、短い説明、写真、星の評価とともに掲載します。	内容、名前、説明、写真、星の数（0〜5）、配置、色、タイポグラフィ。
ロゴ帯	取扱店やメディア掲載など、ロゴを1列に並べます。	ロゴ、列の数、グリッドの間隔、ロゴの高さ、ホバーするまで色を抑える。
カウントダウン	セールや発売に向けて、ある日時までの残り時間を表示するタイマーです。	カウントダウンの対象日時、終了時のメッセージ、日・時間のラベルを表示、配置、数字のサイズ、色。
ソーシャルリンク	SNS アカウントへのリンクになるアイコンです。	アカウント（ネットワークとアドレスを1件ずつ指定）、スタイル（塗りつぶしの円、線のみの円、アイコンのみ）、アイコンのサイズ、グリッドの間隔、配置、円の色、アイコンの色。

お知らせバーをすべてのページに表示するには、ヘッダーにドロップします。カウントダウンは、訪問者それぞれのタイムゾーンで日時を読み取るため、午前0時は訪問者にとっての午前0時になります。ソーシャルリンクでは、Instagram、Facebook、TikTok、X、YouTube、LinkedIn、Pinterest、WhatsApp、メール、ウェブサイトを選べます。

ヘッダーに追加したお知らせバー。メニューの下に表示される暗い色のバーで、「今週はすべてのご注文が送料無料」というテキストが入っています

メニューとフォーム

ブロック	用途	主な設定
フォーム	お問い合わせフォームです。届いたメッセージはメールで受け取れます。	フォームのタイトル、説明、項目、送信ボタンの文言、送信後のメッセージ、色。
FAQ	質問をクリックすると回答が開きます。	見出し、質問（質問と回答を1組ずつ）、最初の回答を開いておく、一度に1つの回答だけ開く、背景色、タイポグラフィ。
ナビゲーション	ロゴとメニューです。ヘッダーにはすでに入っています。	サイトのロゴ、ワードマーク、ロゴの高さ、レイアウト、カートボタンを表示、リンク、色。
リンクリスト	フッターなどで使う、見出し付きのリンクの列です。	列の見出し、リンク、背景色、書体、色、文字サイズ。

お問い合わせフォームを追加する、メニューのリンクを編集する、ヘッダーとフッターをカスタマイズするをご覧ください。