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

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

コメントウィジェットのスタイリングは、次の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 を使用します — 特別なプリプロセッサは不要です

The border around the comment box is made of the text area's own border plus a few thin lines the widget draws around it. To change its color or corner roundness, set these CSS variables instead of styling the textarea directly. The variables restyle every part of the border at once, so the corners and colors always line up.

Add the CSS to the Custom CSS box on the Widget Customization page, or pass it with the customCSS option. You only need to set the variables you want to change.

You can also use the Comment box border helper right under the Custom CSS box, which writes this CSS for you.

Change the Border Color

枠線の色

Copy

1

2:root {

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

4}

5

Change the Border Color While Typing

入力中の枠線の色

Copy

1

2:root {

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

4}

5

Round All Four Corners

By default the top-left corner is square. Set both radius variables to round all four corners the same:

すべての角を丸くする

Copy

1

2:root {

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

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

5}

6

Square Corners

角を四角くする

Copy

1

2:root {

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

4}

5

Match Your Brand

ブランドの色と角

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

Different Colors in Dark Mode

When the widget is in dark mode it has the dark class, so you can set different values for dark mode:

ダークモードの枠線の色

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

Why Not Style the Text Area Directly?

The widget draws part of the comment box border itself, around the text area. If you set border-color or border-radius only on the textarea, those lines keep the default style and the border looks mismatched, for example a square line running through a rounded corner. The variables above change both at once.