表示設定画面で、ホームページの表示を「最新の投稿」に設定した場合の表示になります。
トップページウィジェットエリア
テーマインストール時に、初期ウィジェットが自動的に登録されます。
その後、順番を自由に入れ替えたり、任意のウィジェットを追加することも可能です。
初期ウィジェット
一番最初のテーマインストール時に、以下のウィジェットが自動で設定されます。
新着情報(カラムブロック)

構成は以下のとおりです。

カラムブロック
ブロック設定
| カラム数 | 2(30% / 70%) |
| モバイルでは縦に並べる | OFF(チェックされていない状態) |
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| フォント | 明朝(見出し用) |
横並びブロック
ブロック設定
| 配置 | 左揃え |
| 方向 | 横 |
ブロックスタイル
サイズ
| ブロックの間隔 | 0 px |
見出しブロック
初期状態では「新着情報」という文言が設定されています。任意の文言に変更できます。
見出しレベルは H2 です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
段落ブロック
「News」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
| サイズ | S |
最新の投稿ブロック
ブロック設定
| 投稿メタ | 投稿日を表示 |
| 並び順 | 投稿順(最新から) |
| カテゴリー | 全投稿が対象に設定されています。 |
| 項目数 | 4 |
※ 注意 ※
商品も一覧に表示されます。インフォメーション記事のみ表示したい場合は、専用カテゴリーを作成して設定してください。
和音の想い(カラムブロック)

構成は以下のとおりです。

カラムブロック
ブロック設定
| カラム数 | 2(50% / 50%) |
| モバイルでは縦に並べる | ON(チェックされた状態) |
| 表示領域(幅) | 幅広(1350px) |
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| フォント | 明朝(見出し用) |
サイズ
| ブロックの間隔 | (左右)100px |
横並びブロック
ブロック設定
| 配置 | 右揃え(左右)・上揃え(上下) |
ブロックスタイル
サイズ
| ブロックの間隔 | 0px |
見出しブロック
「和音の想い」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
段落ブロック ①
「About」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
| サイズ | S |
段落ブロック ②
「心に響く和の美しさを日々の暮らしに」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
| サイズ | L |
サイズ
| パディング | 上50px・右40px |
段落ブロック ③
「和音のデザインは、ひとつひとつの素材と、日本ならではの美意識を大切にしています。商品は、単なるモノとしての価値を超え、そこに込められた物語や季節の移ろい、作り手の想いを映し出します。使う人の心に静かに響き、長く愛される存在となることを願っています。」という文言が設定されています。任意の文言に変更可能です。
ボタンブロック(リンクグループ)
ブロック設定
| 配置 | 左揃え |
| 方向 | 横 |
| 複数行に折り返す | ON |
ボタンブロック(リンク)
| ボタンテキスト | 詳しく見る |
| リンク先 | 「/」![]() 「編集」をクリックして任意のURLに差し替えることが可能です。 |
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
サイズ
| パディング | 上50px・右40px |
画像ブロック
ノーイメージ画像が設定された状態です。

「置換」をクリックして任意の画像に差し替えることが可能です。
ブロック設定
| 表示領域(幅) | 全幅 |
ギャラリー(横並びブロック)

構成は以下のとおりです。

横並びブロック
「全幅」が選択された状態です。

ブロック設定
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
横並びブロック
ブロック設定
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | reveal-group |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
縦積みブロック
ブロック設定
| 配置 | 左揃え |
| 方向 | 縦 |
| 複数行に折り返す | ON |
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
画像ブロック
ノーイメージ画像が設定された状態です。

「置換」をクリックして任意の画像に差し替えることが可能です。
画像ブロック
ノーイメージ画像が設定された状態です。

「置換」をクリックして任意の画像に差し替えることが可能です。
ブロック設定
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
画像ブロック ⑤
ノーイメージ画像が設定された状態です。

「置換」をクリックして任意の画像に差し替えることが可能です。
ブロック設定
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal anim-reveal–slow |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
カテゴリー一覧(グリッドブロック)
カテゴリーとは連動していませんが、画像とテキストをグリッド状に並べ、カテゴリー一覧への誘導エリアとして活用されています。

構成は以下のとおりです。

グリッドブロック
「全幅」が選択された状態です。

ブロック設定
| カラム数 | 3 |
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | reveal-group |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
ブロックスタイル
サイズ
| ブロックの間隔 | 0px |
カバーブロック
合計6つのカバーブロックが挿入されます。
カバーの背景にはノーイメージ画像が設定された状態です。

「置換」をクリックして任意の画像に差し替えることが可能です。
ブロック設定
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
ブロックスタイル
色
| オーバーレイ | 黒色(#000) |
| オーバーレイの不透明度 | 60 |
見出しブロック
「カテゴリー名」という文言が設定されています。任意の文言に変更可能です。
| リンク先 | 「/」![]() 「編集」をクリックして任意のURLに差し替えることが可能です。 |
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
商品一覧(横並びブロック)

構成は以下のとおりです。

横並びブロック ①
「全幅」が選択された状態です。

ブロック設定
| 配置 | 左揃え(左右)・上揃え(上下) |
| 方向 | 横 |
縦積みブロック
ブロック設定
| 配置 | 中央揃え(左右)・上揃え(上下) |
| 方向 | 横 |
横並びブロック ②
ブロック設定
| 配置 | 左揃え(左右)・上揃え(上下) |
| 方向 | 横 |
ブロックスタイル
サイズ
| ブロックの間隔 | 0px |
見出しブロック
「看板商品」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
段落ブロック
「Products」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| フォント | 明朝(見出し用) |
| サイズ | S |
| 方向 | 縦 |
ボタンブロック(リンクグループ)
ブロック設定
| 配置 | 左揃え |
| 方向 | 横 |
| 複数行に折り返す | ON |
ボタンブロック(リンク)
| ボタンテキスト | 詳しく見る |
| リンク先 | 「/」![]() 「編集」をクリックして任意のURLに差し替えることが可能です。 |
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
Welcart 商品一覧 ウィジェット
| タイトル | 空白 |
| 表示するカテゴリー | 商品(任意のカテゴリーに変更できます) |
| 表示する投稿数 | 8 |
贈りもの(カバーブロック)

構成は以下のとおりです。

カバーブロック
「全幅」が選択された状態です。

カバーの背景にはノーイメージ画像が設定された状態です。

「置換」をクリックして任意の画像に差し替えることが可能です。
ブロック設定
ブロックスタイル
色
| オーバーレイ | なし |
| オーバーレイの不透明度 | 0 |
カラムブロック
ブロック設定
| カラム数 | 2(60px / auto) |
| モバイルでは縦に並べる | OFF |
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal anim-reveal–up |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
ブロックスタイル
色
| テキスト | #000000 |
| 背景 | #ffffff |
| リンク | #000000 |
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| フォント | 明朝(見出し用) |
サイズ
| ブロックの間隔 | 30px(左右) |
横並びブロック
ブロック設定
| 配置 | 左揃え(左右)・上揃え(上下) |
ブロックスタイル
サイズ
| ブロックの間隔 | 0px |
見出しブロック
「贈りもの」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
段落ブロック ①
「Gifts」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
| サイズ | S |
段落ブロック ②
「贈りものは、気持ちを形に変える大切なひととき。悠月堂のお菓子は、ひとつひとつに季節の彩りとやさしさを宿し、贈る人の想いをそっと包み込みます。ご挨拶や慶事、法要など、人生の節目に寄り添い、上質な余韻を届ける贈答菓。心を結ぶ一品として、どうぞお選びください。」という文言が設定されています。任意の文言に変更可能です。
ボタンブロック(リンクグループ)
ブロック設定
| 配置 | 左揃え |
| 方向 | 横 |
| 複数行に折り返す | ON |
ボタンブロック(リンク)
| ボタンテキスト | 詳しく見る |
| リンク先 | 「/」![]() 「編集」をクリックして任意のURLに差し替えることが可能です。 |
ブロックスタイル
用途・シーンで選ぶ(カバーブロック)
カテゴリーとは連動していませんが、画像とテキストをグリッド状に並べ、カテゴリー一覧への誘導エリアとして活用されています。

構成は以下のとおりです。

カバーブロック
「全幅」が選択された状態です。

カバーの背景にはノーイメージ画像が設定された状態です。

「置換」をクリックして任意の画像に差し替えることが可能です。
ブロックスタイル
色
| オーバーレイ | なし |
| オーバーレイの不透明度 | 0 |
カラムブロック
「全幅」が選択された状態です。

ブロック設定
| カラム数 | 2 |
| モバイルでは縦に並べる | OFF |
横並びブロック
ブロック設定
| 配置 | 左揃え(左右)・上揃え(上下) |
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
ブロックスタイル
サイズ
| ブロックの間隔 | 0px |
見出しブロック ①
「用途・シーンで選ぶ」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
段落ブロック
「Shop by Occasion & Scene」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| フォント | 明朝(見出し用) |
| サイズ | S |
| 方向 | 縦 |
見出しブロック(h3) ①
「用途から選ぶ」という文言が設定されています。任意の文言に変更可能です。
ブロック設定
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
グリッドブロック
ブロック設定
| カラム数 | 4 |
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | reveal-group |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
ブロックスタイル
カバーブロック
合計4つのカバーブロックが挿入されます。
カバーの背景にはノーイメージ画像が設定された状態です。

「置換」をクリックして任意の画像に差し替えることが可能です。
ブロック設定
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
ブロックスタイル
色
| オーバーレイ | 黒色(#000) |
| オーバーレイの不透明度 | 60 |
見出しブロック
「カテゴリー名」という文言が設定されています。任意の文言に変更可能です。
| リンク先 | 「/」![]() 「編集」をクリックして任意のURLに差し替えることが可能です。 |
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
区切りブロック
ブロックスタイル
色
| 背景 | #cccccc |
見出しブロック(h3) ②
「シーンから選ぶ」という文言が設定されています。任意の文言に変更可能です。
ブロック設定
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
ボタンブロック(リンクグループ)
5つのボタンが挿入されます。
ブロック設定
| 配置 | 左揃え |
| 方向 | 横 |
| 複数行に折り返す | ON |
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | reveal-group |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| フォント | 明朝(見出し用) |
ボタンブロック(リンク)
| ボタンテキスト | カテゴリー名 |
| リンク先 | 「/」![]() 「編集」をクリックして任意のURLに差し替えることが可能です。 |
| 幅 | 100% |
ブロックスタイル
色
| テキスト | #000000 |
| 背景 | #ffffff |
枠線と影
| 枠線の色 | #000000 |
| 枠線のサイズ | 1px |
| 角丸 | 0px |
実店舗のご案内(カラムブロック)

構成は以下のとおりです。

カラムブロック
「幅広(最大幅 1350px)」が選択された状態です。

ブロック設定
| カラム数 | 2(33.33% / 66.66%) |
| モバイルでは縦に並べる | ON |
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| フォント | 明朝(見出し用) |
サイズ
| ブロックの間隔 | 0px(上下) |
横並びブロック
ブロック設定
| 配置 | 右揃え(左右)・上揃え(上下) |
ブロックスタイル
サイズ
| ブロックの間隔 | 0 |
見出しブロック
「実店舗のご案内」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| 方向 | 縦 |
段落ブロック ①
「About」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| サイズ | S |
| 方向 | 縦 |
段落ブロック ②
「四季とともに歩む私たちの店日々の暮らしに寄り添う場所」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
タイポグラフィ
「サイズ」以外は、通常表示されていません。「︙(三点リーダー)」をクリックすると設定項目を表示してください。

| サイズ | L |
| 方向 | 縦 |
サイズ
| パディング | 50px(上)・40px(右) |
段落ブロック ③
「私たちの店舗は、地域に根ざし、四季の移ろいとともに歩んできた空間です。
店内には、世代を越えて愛される定番の商品や、その時々の彩りを映す季節の品々が並びます。ひとつひとつに込められた想いは、訪れる人の心を静かに潤し、やさしい余韻を残します。お近くにお越しの際は、ぜひ足をお運びいただき、その雰囲気とともに商品をお楽しみください。」という文言が設定されています。任意の文言に変更可能です。
ブロックスタイル
サイズ
| パディング | 3.5em(上) |
ボタンブロック(リンクグループ)
5つのボタンが挿入されます。
ブロック設定
| 配置 | 左揃え |
| 方向 | 横 |
| 複数行に折り返す | ON |
ボタンブロック(リンク)
| ボタンテキスト | 詳しく見る |
| リンク先 | 「/」![]() 「編集」をクリックして任意のURLに差し替えることが可能です。 |
ブロックスタイル
画像ブロック

画像ブロック
ノーイメージ画像が設定された状態です。

「置換」をクリックして任意の画像に差し替えることが可能です。
ブロック設定
高度な設定
通常は折りたたまれた状態です。クリックして展開すると、各種の設定項目が表示されます。
| 追加 CSS クラス | anim-reveal |
※ 追加 CSS クラスを指定することで、アニメーションを適用できます。
詳細は「アニメーション追加」をご参照ください。
ブロックスタイル
サイズ
| ブロックの間隔 | 0px(下) |

PAGE TOP