カスタムスタイリングガイド

コメントウィジェットのスタイルをカスタマイズする方法

コメントウィジェットのスタイリングは、次の2つの方法でカスタマイズできます:

オプション 1: customCSS パラメータで

ウィジェットを初期化するときに、カスタムCSSを文字列として customCSS パラメータに渡します:

window.fcConfigs = [{
    target: '#fastcomments-widget',
    tenantId: 'your-tenant-id',
    customCSS: `
        .fast-comments .comment {
            background-color: #f0f0f0 !important;
            border-radius: 8px !important;
        }
    `
}];

オプション 2: 管理ダッシュボードから

1. 管理ダッシュボードのウィジェットのカスタマイズページに移動
2. 「詳細」内の「カスタム CSS」セクションまでスクロール
3. カスタム CSS を入力
4. 「保存」をクリック

入力したカスタム CSS は、サイト上のすべてのコメントウィジェットに適用されます。

ヒント

• 必要に応じてデフォルトのスタイルを上書きするために !important を使用してください
• サイトの他の部分に影響を与えないよう、特定のセレクタを指定してください
• 互換性のために、異なるブラウザで CSS をテストしてください
• ウィジェットは標準の CSS を使用します — 特別なプリプロセッサは不要です

コメントボックスの周囲の枠線は、テキストエリア自体の枠線と、ウィジェットがその周囲に描画する数本の細い線で構成されています。色や角の丸みを変更するには、textarea を直接スタイルするのではなく、以下の CSS 変数を設定してください。これらの変数は枠線のすべての部分を一度に再スタイルするため、角と色は常に一致します。

CSS を Widget Customization ページ の Custom CSS ボックスに追加するか、customCSS オプションで渡してください。変更したい変数だけを設定すれば十分です。

また、Custom CSS ボックスのすぐ下にある Comment box border ヘルパーを使用することもできます。これはこの CSS を自動的に記述してくれます。

枠線の色を変更する

枠線の色

Copy

1

2:root {

3 --fc-input-border-color: #d1d5db;

4}

5

入力中の枠線の色を変更する

入力中の枠線の色

Copy

1

2:root {

3 --fc-input-border-color-focus: #2563eb;

4}

5

4つの角すべてを丸くする

デフォルトでは左上の角は角ばっています。4つの角すべてを同じように丸くするには、両方の radius 変数を設定してください:

4つの角すべてを丸くする

Copy

1

2:root {

3 --fc-input-border-radius: 12px;

4 --fc-input-border-start-start-radius: 12px;

5}

6

角を角ばったままにする

角ばった角

Copy

1

2:root {

3 --fc-input-border-radius: 0;

4}

5

ブランドに合わせる

ブランドの色と角

Copy

1

2:root {

3 --fc-input-border-color: #c7d2fe;

4 --fc-input-border-color-focus: #4f46e5;

5 --fc-input-border-radius: 8px;

6 --fc-input-border-start-start-radius: 8px;

7}

8

ダークモードで異なる色を使う

ウィジェットがダークモードのときは dark クラスが付くため、ダークモード用に異なる値を設定できます:

ダークモードの枠線の色

Copy

1

2:root {

3 --fc-input-border-color: #d1d5db;

4}

5.dark {

6 --fc-input-border-color: #444;

7 --fc-input-border-color-focus: #aaa;

8}

9

テキストエリアを直接スタイルしないのはなぜ?

ウィジェットは、テキストエリアの周囲のコメントボックスの枠線の一部を自ら描画しています。textarea にのみ border-color や border-radius を設定すると、それらの線はデフォルトのスタイルのままになり、枠線が不揃いに見えます。例えば、丸い角の中に角ばった線が走るような状態です。上記の変数は両方を一度に変更します。