表示設定画面で、ホームページの表示を「最新の投稿」に設定した場合の表示になります。
キービジュアル
スマホとパソコンで、それぞれ別のビジュアルを設定することが可能です。
また、最大5件まで登録でき、動画（.mp4、.webm）をキービジュアルとして使用することもできます。
表示の優先順位
1. キービジュアル設定で設定した画像または動画
2. ヘッダー画像で設定した画像
トップページウィジェットエリア
テーマインストール時に、初期ウィジェットが自動的に登録されます。
その後、順番を自由に入れ替えたり、任意のウィジェットを追加することも可能です。
初期ウィジェット
一番最初のテーマインストール時に、以下のウィジェットが自動で設定されます。
商品一覧（グループブロック）
構成は以下のとおりです。
グループブロック
表示領域
「幅広（1350px）」が選択された状態です。
レイアウト
「グループ」が選択された状態です。
サイズ
列のスパン「1」、行のスパン「1」が設定された状態です。
商品一覧ウィジェット
タイトル
「新着＆再入荷商品」が入力された状態です。任意の文言に変更可能です。
表示する商品カテゴリー
「商品」カテゴリーが選択された状態です。任意のカテゴリーに変更可能です。
レイアウト
8件表示です。任意の件数に変更可能です。
サイト説明（カバーブロック）
構成は以下のとおりです。
カバーブロック
画像
ノーイメージ画像が設定された状態です。
「置換」をクリックして任意の画像に差し替えることが可能です。
オーバーレイ
黒背景色の不透明度30%が画像にオーバーレイされています。
見出しブロック
「いつものアイテムをもっと手軽に［ブランド名］の定期便」という文言が設定されています。任意の文言に変更可能です。
段落ブロック
「お気に入りの商品をご希望のサイクルで自動お届け。量もタイミングも変更はいつでもOK。」という文言が設定されています。任意の文言に変更可能です。
ボタンブロック
ボタンテキスト
「もっと見る」という文言が設定されています。任意の文言に変更可能です。
リンク先
「/」が設定されています。任意のリンク先に変更可能です。
ボタン色
背景色が「#278ebc」、文字色が白で設定されています。任意の色に変更可能です。
※ 注意 ※
ブランドカラーを変更しても連動しません。
カテゴリー一覧タイトル（見出しブロック）
中央配置で「CATEGORY」という文言が設定されています。任意の文言に変更可能です。
カテゴリー一覧（グリッドブロック）
カテゴリーとは連動していませんが、画像とテキストをグリッド状に並べ、カテゴリー一覧への誘導エリアとして活用されています。
構成は以下のとおりです。
グリッドブロック
表示領域
「幅広（1350px）」が選択された状態です。
レイアウト
「グリッド」が選択された状態です。
カラム
「手動」で「3」が選択された状態です。
グループブロック
合計6つのグループブロックが挿入されます。
レイアウト
「グループ」が選択された状態です。
サイズ
列のスパン「1」、行のスパン「1」が選択された状態です。
画像ブロック
画像
ノーイメージ画像が設定された状態です。
「置換」をクリックして任意の画像に差し替えることが可能です。
リンク先
「/」が設定されています。任意のリンク先に変更可能です。
段落ブロック
テキスト
中央配置で「カテゴリー」という文言が設定されています。任意の文言に変更可能です。
リンク先
「/」が設定されています。任意のリンク先に変更可能です。
ブランドストーリー（グループブロック）
ブランドの紹介を表示するのに適しています。
構成は以下のとおりです。
グループブロック
表示領域
「全幅」が選択された状態です。
レイアウト
「グループ」が選択された状態です。
背景色
「#f2f2f2」が設定された状態です。任意の背景色に変更可能です。
カラムブロック
表示領域
「幅広（1350px）」が選択された状態です。
カラム
「2」が選択され、「モバイルでは縦に並べる」にチェックがされた状態です。
カラムブロック（カラムブロック内のカラム）
幅「50%」設定された状態です。
見出しブロック
「BRAND STORY」という文言が設定されています。任意の文言に変更可能です。
段落ブロック
「ブランドに宿る、変わらぬ理念。創業の原点から続く手しごとと挑戦、未来へつなぐ物語。」という文言が設定されています。任意の文言に変更可能です。
ボタンブロック
ボタンテキスト
「もっと見る」という文言が設定されています。任意の文言に変更可能です。
リンク先
「/」が設定されています。任意のリンク先に変更可能です。
ボタン色
背景色が「#278ebc」、文字色が白で設定されています。任意の色に変更可能です。
※ 注意 ※
ブランドカラーを変更しても連動しません。
カラムブロック（カラムブロック内のカラム）
幅「50%」設定された状態です。
画像ブロック
ノーイメージ画像が設定された状態です。
「置換」をクリックして任意の画像に差し替えることが可能です。
インフォメーションタイトル（見出しブロック）
中央配置で「INFORMATION」という文言が設定されています。任意の文言に変更可能です。
インフォメーション一覧（最新の投稿ブロック）
最新の投稿ブロック
投稿メタ
「投稿日」を「表示」に設定されています。
並び順
「投稿順（最新から）」に設定されています。
カテゴリー
全投稿が対象に設定されています。
※ 注意 ※
商品も一覧に表示されます。インフォメーション記事のみ表示したい場合は、専用カテゴリーを作成して設定してください。
初期ウィジェットを戻す方法
テーマインストール時の初期ウィジェットの状態に戻す場合
テーマインストール時の初期ウィジェットの状態に戻すには、下記のURLをブラウザのアドレスバーに入力して直接アクセスしてください。
https://[サイトURL]/wp-admin/?welcart_duo_reset_widgets=1
アクセスすると、「トップページウィジェットエリア」に設定されていたすべてのウィジェットが削除され、テーマインストール時の初期ウィジェットに上書きされます。
※ 注意 ※
リセット操作によって、現在設定中のウィジェットはすべて削除されます。
残しておきたいウィジェットがある場合は、事前に「使用停止中のウィジェット」に移動してください。
一部の初期ウィジェットだけを挿入したい場合
ウィジェット全体をリセットせず、一部の初期ウィジェットだけを手動で追加することも可能です。
以下の手順で操作してください。
1. 「カスタムHTML」ブロックを追加する
2. 下記から該当ブロックのコードをコピーして貼り付ける
追加したいブロック名をクリックすると、コードが展開されます。
※ 商品一覧は対応していないため、手動で追加してください。
サイト説明（カバーブロック）
「任意の画像URL」の部分には、設定したい背景画像のURLを入力してください。
<!-- wp:cover {"url":"【任意の画像URL】","id":0,"dimRatio":30,"overlayColor":"black","isUserOverlayColor":true,"isDark":false,"align":"full","layout":{"type":"default"}} -->
<div class="wp-block-cover alignfull is-light"><img class="wp-block-cover__image-background" alt="" src="【任意の画像URL】" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-30 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:heading {"metadata":{},"className":"wp-block-heading has-text-align-center","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<h2 class="wp-block-heading has-text-align-center has-white-color has-text-color has-link-color"><strong><strong>いつものアイテムをもっと手軽に<br>［ブランド名］の定期便</strong></strong></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white"} -->
<p class="has-text-align-center has-white-color has-text-color has-link-color">お気に入りの商品をご希望のサイクルで自動お届け。<br>量もタイミングも変更はいつでもOK。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"white","className":"is-style-fill","style":{"border":{"radius":"0px"},"color":{"background":"#278ebc"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}}}} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-white-color has-text-color has-background has-link-color wp-element-button" href="/" style="border-radius:0px;background-color:#278ebc">もっと見る</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:cover -->
カテゴリー一覧タイトル（見出しブロック）
<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">CATEGORY</h2>
<!-- /wp:heading -->
カテゴリー一覧（グリッドブロック）
「任意の画像URL」の部分には、設定したい画像のURLを入力してください。
<!-- wp:group {"align":"wide","layout":{"type":"grid","columnCount":3,"minimumColumnWidth":null}} -->
<div class="wp-block-group alignwide"><!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:image {"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="/"><img src="【任意の画像URL】" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"#454545"}}},"color":{"text":"#454545"}},"fontSize":"large"} -->
<p class="has-text-align-center has-text-color has-link-color has-large-font-size" style="color:#454545"><a href="/">カテゴリー名</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:image {"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="/"><img src="【任意の画像URL】" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"#454545"}}},"color":{"text":"#454545"}},"fontSize":"large"} -->
<p class="has-text-align-center has-text-color has-link-color has-large-font-size" style="color:#454545"><a href="/">カテゴリー名</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:image {"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="/"><img src="【任意の画像URL】" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"#454545"}}},"color":{"text":"#454545"}},"fontSize":"large"} -->
<p class="has-text-align-center has-text-color has-link-color has-large-font-size" style="color:#454545"><a href="/">カテゴリー名</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:image {"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="/"><img src="【任意の画像URL】" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"#454545"}}},"color":{"text":"#454545"}},"fontSize":"large"} -->
<p class="has-text-align-center has-text-color has-link-color has-large-font-size" style="color:#454545"><a href="/">カテゴリー名</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:image {"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="/"><img src="【任意の画像URL】" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"#454545"}}},"color":{"text":"#454545"}},"fontSize":"large"} -->
<p class="has-text-align-center has-text-color has-link-color has-large-font-size" style="color:#454545"><a href="/">カテゴリー名</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:image {"sizeSlug":"large","linkDestination":"custom"} -->
<figure class="wp-block-image size-large"><a href="/"><img src="【任意の画像URL】" alt=""/></a></figure>
<!-- /wp:image -->
<!-- wp:paragraph {"align":"center","style":{"elements":{"link":{"color":{"text":"#454545"}}},"color":{"text":"#454545"}},"fontSize":"large"} -->
<p class="has-text-align-center has-text-color has-link-color has-large-font-size" style="color:#454545"><a href="/">カテゴリー名</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
ブランドストーリー（グループブロック）
「任意の画像URL」の部分には、設定したい画像のURLを入力してください。
<!-- wp:group {"align":"full","style":{"color":{"background":"#f2f2f2"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#f2f2f2"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center"><strong>BRAND STORY</strong></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">ブランドに宿る、変わらぬ理念。<br>創業の原点から続く手しごとと挑戦、<br>未来へつなぐ物語。</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"white","style":{"color":{"background":"#278ebc"},"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"border":{"radius":"0px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background has-link-color wp-element-button" href="/" style="border-radius:0px;background-color:#278ebc">もっと見る</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="【任意の画像URL】" alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
インフォメーションタイトル（見出しブロック）
<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">INFORMATION</h2>
<!-- /wp:heading -->
インフォメーション一覧（最新の投稿ブロック）
<!-- wp:latest-posts {"postsToShow":3,"displayPostDate":true} /-->
3.「ブロックへ変換」をクリックする
「カスタムHTML」ブロックを選択した時に表示されるメニュー内の「 ⋮ 」をクリックするとメニューが表示されます。その中の「ブロックへ変換」をクリックしてください。
PAGE TOP