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

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

より複雑なデザインカスタマイズが必要な場合は、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より前に適用されます。