スタイルガイド

スタイル設定では配送日時指定の項目のデザインを設定することができます。入力欄が空白の場合はそれぞれに設定されたデフォルト値が適用されます。

このページではWeb関連の専門用語が使われている箇所がありますが、説明画像を参考にデザイン設定を行ってください。

 

レスポンシブ設定

レスポンシブ設定では配送日時指定の項目の親要素の横幅が768px以下のときの設定をします。

レスポンシブ設定が反映されるケースは、モバイル・タブレット機器や、カートドロワーなどがあります。

 

• 横幅最大オプションを有効化すると、ディスプレイ（親要素）の横幅が768以下のときに配送日時指定の項目やカレンダーが画面幅いっぱいに広がるようになります。
  デフォルト、及び推奨はオンになっています。
• マージンは配送日時指定の項目が横幅最大のときの画面端と配送日時指定の間の余白を設定します。デフォルト値: 10px

 

（比較画像）横幅最大オプション

 

（比較画像）マージン

 

ポジションと余白

• 位置はディスプレイの中で配送日時指定の項目を表示する位置を設定します。
• パディングはカレンダーを開いたときの周りの余白を設定します。20px以下の値で設定してください。デフォルト値: 16px

 

（比較画像）位置

 

（比較画像）パディング

 

テーマの色

色はCSSと同じ形式で指定してください。

指定方法の例

16進数のカラーコード	#12ab34、#fff など
RGB	rgb(255,45,45)、rgba(255,45,45,0.5) など
HSL	hsl(100,50%,50%)、hsla(100,50%,50%,0.5) など
色名	red、blueなど

 

• ヘッダーはカレンダーのヘッダーの色を設定します。デフォルト値: なし
• カレンダーはカレンダーの背景色を設定します。デフォルト値: なし
• セレクターは選択した配送日の色を設定します。デフォルト値: #00d1b2
• 選択欄の背景色は配送日時や置き配指定などの選択欄の背景色を設定します。デフォルト値: #fff

 

（比較画像）テーマの色

 

ボーダー

ボーダーでは配送日時指定の選択欄のボーダーのデザインを設定します。

• 形は角丸の形を設定します。CSSのbordrt-radiusと同じ形式で入力してください。デフォルト値: 0.5em
• 色はボーダーの色を設定します。16進数のカラーコードで入力してください（短縮可）。デフォルト値: #b5b5b5
• 影は選択欄の影を設定します。CSSのbox-shadowと同じ形式で設定してください。デフォルト値: 0 1px 2px 0 rgb(0 0 0 / 5%)

 

（比較画像）ボーダー

 

テキストのスタイル

• サイズは選択欄のヘルプテキストのサイズを指定します。デフォルト値: inherit

 

（比較画像）テキストのスタイル

 

テキストの色

色はCSSと同じ形式で指定してください。

指定方法の例

16進数のカラーコード	#12ab34、#fff など
RGB	rgb(255,45,45)、rgba(255,45,45,0.5) など
HSL	hsl(100,50%,50%)、hsla(100,50%,50%,0.5) など
色名	red、blueなど

• ヘルプテキストは選択欄のヘルプテキストの色を設定します。デフォルト値: #363636
• ヘッダーはカレンダーのヘッダーの色を設定します。デフォルト値: #1F2937
• 曜日はカレンダーの曜日の色を設定します。デフォルト値: #b5b5b5
• 日付はカレンダーの日付の色を設定します。デフォルト値: #4a4a4a

 

（比較画像）テキストの色

 

アイコン

選択欄にあるカレンダーのアイコンや矢印等の色を設定します。デフォルト値: #00d1b2

 

（比較画像）アイコンの色

 

 

テキスト設定

テキスト設定では、配送日時指定のヘルプテキストの文言を設定することができます。

空欄の場合は、デフォルトのテキストが表示されます。

 

プレビューと保存

これらの設定は「プレビュー」ボタンで外観を確認することができます。

次の画像はプレビューの一例です。

設定が完了したらページ下部の「保存」ボタンをクリックしてください。