ベースデザイン設定について

このセクションではサイト全体の共通色となる、①メインカラー　②サブカラー　③アクセントカラーの選択を行うことができます。
また、交互に背景色を表示させる際の2色をここから設定できます。

このセクションではサイト全体のテキストのサイズ（字間や行間も含む）の設定を行います。
PC時のフォントサイズ、SP時のフォントサイズをそれぞれ指定することができます。

「編集する」をクリックすると、テキストカラーやリンクのカラーを設定するタブが開きます。
フォントの種類も選ぶことができます。

「編集する」をクリックすると、テキストカラーやフォントの種類を設定するタブが開きます。

このセクションでは3種類のボタンを設定し、作成することができます。
適切なアイコンを選択したり、大・中・小それぞれのフォントサイズ、またボタン自体のサイズも指定することもできます。

「編集する」をクリックすると、ボタンの形状だけでなく、ボタンの色やホバー時の挙動を設定できます。

このセクションではページ全体で共通となるセクションの余白、タグのデザイン、シャドウを設定することができます。

ディベロッパーツールを開くと、styleの一番下でベースデザイン設定から出力されている全変数を確認できます。
デザインパーツの中のカラーやフォントサイズなどは、この設定に紐づいています。
CSSを記述する際には、ベースデザイン設定を変更した際に連動させる必要がある設定（特にメインカラー、サブカラー、アクセントカラー、シャドウを紐づけることが多いです）については、こちらの変数を使用してください。