ウィジェットのデザインをカスタマイズして、自分のウェブサイトの一部にすることはできますか？

デザインパネルで、ウェブサイトのデザインに合わせてライトまたはダークのテーマを選択してください。次に、ボタンやフォームフィールドのアクセントカラーを選びます。

より高度なデザインカスタマイズが必要な場合は、CSSを使ってウィジェットの外観を変更できます。これにより、ウィジェット内のフォント、色、形状などを自由に変更できます。基本的なHTMLとCSSの知識が必要です。

ウィジェットのスタイルはBEM手法に従って構成されています。各要素には独自のクラスが割り当てられています。

特定の要素のデザインをカスタマイズするには、そのCSSクラスを特定してください。ブラウザの開発者ツールを使えば簡単に確認できます。例えばChromeの場合、要素を右クリックしてコードを表示を選択します。

例えば、カレンダーの日付名のクラスはdayです。

では、背景色・文字色・フォントを変更する簡単なCSSルールを書いてみましょう：

.day {
  background: #fdeedb;
  font-weight: 700;
  color: #8a5714;
}

最後に、ウィジェット設定を開き、デザインパネルに移動します。 カスタムCSSスタイルのオプションにチェックを入れ、CSSコードを貼り付けてください。

結果はこのようになります：

CSSの@importディレクティブを使ってカスタムフォントや外部スタイルを追加したい場合は、次の手順に従ってください：

カスタムCSSの先頭に@import文を追加します。例：
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
すべての@import文の下に[bukza_theme_styles]ブロックを挿入します。
必要に応じてテーマスタイルを上書きするCSSを追加します。

[bukza_theme_styles]ブロックは自動的にテーマのスタイルに置き換えられます。このブロックがない場合、テーマスタイルはカスタムCSSの前に適用されます。