FastComments.com
Menu Icon

言語 🇯🇵 日本語
🇺🇸 English 🇧🇬 Български 🇨🇳 简体中文 🇹🇼 繁體中文 🇭🇷 Hrvatski 🇩🇰 Dansk 🇳🇱 Nederlands 🇫🇷 Français (France) 🇩🇪 Deutsch 🇬🇷 Ελληνικά 🇮🇱 עברית 🇮🇹 Italiano 🇯🇵 日本語 🇰🇷 한국어 🇵🇱 Polski 🇧🇷 Português (Brasil) 🇷🇺 Русский 🇷🇸 Srpski (Latinica) 🇷🇸 Српски 🇸🇮 Slovenščina 🇪🇸 Español 🇺🇦 Українська 🇹🇷 Türkçe

はじめに

スタイルのカスタマイズ方法

ウィジェットのスタイリング

コメントウィジェット カスタムCSSリファレンス（v2、最新）
最近のコメントウィジェットのスタイリング
最も議論されたページウィジェットのスタイリング
最近のディスカッションウィジェットのスタイリング

その他のフロントエンドライブラリ

その他のフロントエンドライブラリ

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

このガイドは、FastComments コメントウィジェット (v2) で使用される完全なデフォルト CSS と、スタイルを上書きするためのいくつかの手順を提供します。

デフォルトの CSS を理解することで、次のことが可能になります:

  • 特定のスタイルを上書きして外観をカスタマイズする
  • 使用可能なクラスやセレクタを確認してスタイリングの問題をトラブルシュートする
  • ウィジェットの構造に合ったカスタムテーマを作成する
  • AI アシスタントと組み合わせてカスタム CSS の変更を生成する

How to Override Styles

スタイルの上書き方法はウィジェットによって異なります。コメントウィジェットの場合、CSS を iframe に渡すには customCSS 設定パラメータを使用するか、管理ダッシュボードのカスタマイズページに CSS を指定して当社の CDN から CSS を配信する必要があります。

スタイルのカスタマイズ方法 Internal Link

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

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

コメントウィジェット カスタムCSSリファレンス（v2、最新） Internal Link

Comment Widget Default CSS
Copy Copy
1
2body { margin: 0; padding: 0; }
3 d { display: block }
4 @keyframes pop-in { 0% { transform: scale(0.3); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
5 @keyframes placeHolderShimmer { 0% { background-position: 0 0 } 100% { background-position: 100% 0 } }
6 /* shimmer skeleton for in-flight saves and lazy avatar loads. To restyle the loading state, target .animated-background. */
7 .comment-reply .comment-input.animated-background, .comment-reply input.animated-background, .animated-background { animation-duration: 1s; animation-iteration-count: infinite; animation-name: placeHolderShimmer; background: #f6f7f8; background: linear-gradient(to right, #eee 8%, #dddddd 18%, #eee 33%); background-size: 50% 50%; }
8 .comment-reply .tos-checkbox { display: flex; align-items: center; gap: 8px; margin: 8px 0; cursor: pointer }
9 .comment-reply .tos-checkbox a { color: inherit }
10 .comment-reply > .tos-checkbox { margin: 8px }
11 .comment-reply .tos-checkbox input[type=checkbox] { margin: 0; width: auto; box-shadow: none }
12 @keyframes backgroundToNormal { from { background: lightblue } to { background: inherit } }
13 /* widget root. Scope custom rules under .fast-comments. Config-driven modifier classes also land here: .readonly, .hide-avatars, .disable-image-redirect, .single-line-comment-input, .vote-style-1, .new-to-bottom -- use them as conditional ancestors. */
14 /* flow-root: establishes a block formatting context so child margins (e.g. .pagination's margin-top) cannot collapse out through the root. Escaped margins are excluded from offset/client/scrollHeight, which makes broadcastHeight() under-report and the embedding iframe clip the bottom of the widget. */
15 .fast-comments { position: relative; display: flow-root; width: 100%; font-size: 13px }
16 .hidden { display: none }
17 /* user-written text takes its direction from its own content, while margins and padding keep following the widget's direction */
18 .comment-text, .commenter-name .username, [name="fastcomments-comment"], .comment-text-edit { unicode-bidi: plaintext; }
19 /* unicode-bidi is not inherited, so blocks inside user text need it too; pre is left alone so code stays LTR */
20 .comment-text :is(p, div, blockquote, li, h1, h2, h3, h4, h5, h6), [name="fastcomments-comment"] :is(p, div, blockquote, li) { unicode-bidi: plaintext; }
21 .comment-text :is(pre, code), [name="fastcomments-comment"] :is(pre, code) { direction: ltr; unicode-bidi: isolate; }
22 /* isolates each tag with its own direction so a Latin tag keeps its leading "#" inside Arabic text */
23 .hash-tag { unicode-bidi: plaintext; }
24 .invisible { visibility: hidden }
25 .inline-block { display: inline-block }
26 .icon { display: inline-block; width: 24px; height: 24px; vertical-align: middle; image-rendering: -webkit-optimize-contrast; }
27 .icon.bubble { background: url("${FC_CDN}/images/svg/v2/text_bubble_dark.svg") no-repeat center; background-size: 22px 22px; }
28 .icon.bubble-white { background: url("${FC_CDN}/images/svg/v2/text_bubble_white.svg") no-repeat center; background-size: 22px 22px; }
29 .icon.cross { background: url("${FC_CDN}/images/svg/v2/close.svg") no-repeat center; background-size: 9px 9px; }
30 .icon.reply-arrow-inactive { background: url("${FC_CDN}/images/svg/v2/reply_inactive.svg") no-repeat center; background-size: 15px 15px; }
31 .icon.reply-arrow-active { background: url("${FC_CDN}/images/svg/v2/reply.svg") no-repeat center; background-size: 15px 15px; }
32 .icon.up { background: url("${FC_CDN}/images/svg/v2/thumbs_up_light.svg") no-repeat center; background-size: 12px 12px; }
33 .icon.up.active, .icon.up:hover { background: url("${FC_CDN}/images/svg/v2/thumbs_up_dark.svg") no-repeat center; background-size: 12px 12px; }
34 .icon.down { background: url("${FC_CDN}/images/svg/v2/thumbs_down_light.svg") no-repeat center; background-size: 12px 12px; }
35 .icon.down.active, .icon.down:hover { background: url("${FC_CDN}/images/svg/v2/thumbs_down_dark.svg") no-repeat center; background-size: 12px 12px; }
36 .icon.pin-small { background: url("${FC_CDN}/images/svg/v2/pin.svg") no-repeat center; background-size: 15px 15px; }
37 .icon.lock-small { background: url("${FC_CDN}/images/padlock.svg") no-repeat center; background-size: 15px 15px; }
38 .icon.logo { width: 27px; height: 33px; background: url("${FC_CDN}/images/svg/v2/logo.svg") no-repeat center; background-size: 22px; }
39 .icon.edit-small { background: url("${FC_CDN}/images/svg/menu.svg") no-repeat center; background-size: 17px 17px; }
40 .icon.edit-big { background: url("${FC_CDN}/images/svg/v2/edit.svg") no-repeat center; background-size: 22px 22px; }
41 .icon.trash { background: url("${FC_CDN}/images/svg/v2/trash_thin.svg") no-repeat center; background-size: 22px 22px; }
42 .icon.eye { background: url("${FC_CDN}/images/svg/v2/view.svg") no-repeat center; background-size: 22px 22px; }
43 .icon.eye-slash { background: url("${FC_CDN}/images/svg/v2/view_hide.svg") no-repeat center; background-size: 22px 22px; }
44 .icon.replied { background: url("${FC_CDN}/images/svg/v2/replied.svg") no-repeat center; background-size: 22px 22px; }
45 :where([dir="rtl"]) .icon.reply-arrow-inactive, :where([dir="rtl"]) .icon.reply-arrow-active, :where([dir="rtl"]) .icon.replied, :where([dir="rtl"]) .icon.return { transform: scaleX(-1); }
46 .icon.bold { background: url("${FC_CDN}/images/svg/v2/editor_bold.svg") no-repeat center; background-size: 9px; }
47 .icon.ul { position: relative; top: 1px; background: url("${FC_CDN}/images/svg/v2/editor_underline.svg") no-repeat center; background-size: 10px; }
48 .icon.it { background: url("${FC_CDN}/images/svg/v2/editor_itallic.svg") no-repeat center; background-size: 7px; }
49 .icon.s { background: url("${FC_CDN}/images/svg/v2/editor_strike.svg") no-repeat center; background-size: 10px; }
50 .icon.code { background: url("${FC_CDN}/images/svg/v2/editor_embed.svg") no-repeat center; background-size: 16px; }
51 .icon.link { position: relative; top: -1px; background: url("${FC_CDN}/images/svg/v2/editor_link.svg") no-repeat center; background-size: 14px; }
52 .icon.img-up { background: url("${FC_CDN}/images/svg/v2/editor_image.svg") no-repeat center; background-size: 16px; }
53 .icon.img-btn-wrap { position: relative; }
54 .icon.return { background: url("${FC_CDN}/images/svg/return.svg") no-repeat center; background-size: 22px; margin-inline-start: 6px; }
55 .icon.gif { width: auto; height: auto; font-size: 0; }
56 .icon.gif::before { content: "GIF"; font-size: 12px; }
57 .icon.spoiler { font-size: 12px; }
58 .icon.gif::before, .t-btn.txt { display: inline-block; width: auto; height: auto; margin-inline-end: 3px; text-align: center; vertical-align: middle; font-weight: 500; }
59 .icon.bell { background: url("${FC_CDN}/images/svg/v2/bell.svg") no-repeat center; background-size: 22px; }
60 .icon.bell-red { background: url("${FC_CDN}/images/svg/v2/bell-red.svg") no-repeat center; background-size: 22px; }
61 .divider { display: inline-block; height: 25px; margin: 0 10px; vertical-align: middle; border-inline-end: 1px solid #c2c2c2; }
62 .icon.block { background: url("${FC_CDN}/images/svg/v2/ban.svg") no-repeat; background-size: 22px 22px; }
63 .icon.flag { background: url("${FC_CDN}/images/svg/flag.svg") no-repeat; background-size: 22px 22px; }
64 .icon.flag-small { background: url("${FC_CDN}/images/svg/flag.svg") no-repeat center; background-size: 15px 15px; }
65 .select-dir-wrapper { clear: both; text-align: end; border-bottom: 1px solid #afafaf; }
66 .select-dir-wrapper .comment-count { /* physical-ok */ float: left; float: inline-start; font-weight: 500; }
67 .select-dir-wrapper > * { margin: 9px; height: 16px }
68 .select-dir { display: inline-block }
69 .dropdown { position: relative; z-index: 3; text-align: end }
70 .dropdown .drop-label { padding: 0 0 7px 0; cursor: pointer; font-weight: 500 }
71 .dropdown .drop-label i { position: relative; display: inline-block; top: -2px; font-size: 7px }
72 .dropdown .items { position: absolute; display: none; top: 20px; inset-inline-end: 0; width: 150px; overflow: hidden; border-radius: 0 0 4px 4px; background: #fff; }
73 .dropdown:hover .items { position: absolute; display: block }
74 .dropdown .items > * { padding: 5px 9px; cursor: pointer; font-weight: 500; text-align: start; font-size: 13px }
75 .no-comments { clear: both; text-align: center; font-weight: 500; font-size: 16px; }
76 .new-comments-message { width: fit-content; margin: 20px auto 0; padding: 5px 10px; text-align: center; cursor: pointer; font-weight: 500 }
77 .new-comments-message .new-comments-count { pointer-events: none; position: relative; top: 1px; display: inline-block; min-width: 12px; padding: 2px 5px 4px 5px; margin-inline-end: 3px; border: 1px solid #a2a2a2; border-radius: 4px; border-start-end-radius: 0; }
78 .new-comments-message span { pointer-events: none; padding-bottom: 2px; border-bottom: 1px solid #a3a3a3; }
79 .comment .new-comments-message { margin: 10px auto 0; }
80 .sso-login-wrapper, .fastcomments-message-wrapper { display: flex; height: fit-content; min-height: 130px; padding: 30px 0; box-sizing: border-box; align-items: center; justify-content: center; border: 1px solid #bfbfbf; border-radius: 11px; border-start-start-radius: 0; }
81 .sso-login-wrapper .message-text, .fastcomments-message-wrapper .message-text { display: inline; pointer-events: none; }
82 .fastcomments-message-wrapper .message-text a { color: #fff; pointer-events: all; }
83 .sso-login-wrapper .sso-login, .fastcomments-message-wrapper .fastcomments-message { display: inline-block; animation: pop-in 0.5s; animation-timing-function: ease; padding-block: 10px; padding-inline: 27px 17px; border-radius: 7px; border-start-start-radius: 0; background: #333; color: #fff; text-decoration: none; font-size: 17px; font-weight: 500; }
84 .fastcomments-message-wrapper .fastcomments-message { margin: 0 5%; cursor: default; }
85 .sso-login-wrapper .sso-login[href] { cursor: pointer; }
86 .sso-login-wrapper .sso-login .message-text, .fastcomments-message-wrapper .fastcomments-message .message-text { margin-inline-end: 10px; }
87 .sso-login-wrapper .sso-login .icon, .fastcomments-message-wrapper .fastcomments-message .icon { pointer-events: none; }
88 .sso-login-wrapper .sso-login.clickable { cursor: pointer; }
89 .comment .sso-login-wrapper { padding: 7px 0; text-align: start }
90 .comment .sso-login-wrapper .sso-login { font-size: 16px }
91 /* Toolbar, auth fields, and cancel button carry .default-hidden -- they're collapsed (height:0, opacity:0) until the user focuses the input, which adds .show-default-hidden to the .comment-reply form. When styling these elements, account for the collapsed state. */
92 .default-hidden { transition-duration: 300ms }
93 .comment-input:not(.show-default-hidden) .default-hidden { height: 0; margin: 0 !important; opacity: 0; pointer-events: none; transition-duration: 200ms }
94 .loading .pagination { opacity: 0.5; pointer-events: none; }
95 .card { border: 1px solid #d0d0d0; background: #fdfdfd; border-radius: 3px; box-shadow: 5px 5px 7px rgba(0,0,0,.1) }
96 button, .button { display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 7px; border-start-start-radius: 0; font-size: 15px; background: #fbfbfb; color: #333; text-decoration: none; border: 1px solid #a2a2a2; cursor: pointer }
97 .fast-comments, textarea { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif }
98 textarea::placeholder { font-size: 13px; font-weight: 500; transition-duration: 150ms }
99 textarea:focus::placeholder { color: transparent }
100 .fc-red { display: inline-block; margin: 5px; color: #ff0000 }
101 .comment-error { padding: 10px }
102 /* Brand shape: square top-left, rounded other 3 corners (border-radius: 0 N N N). Match this when adding new buttons/inputs/cards to stay on-theme. */
103 input, textarea { padding: 12px 20px; border: 1px solid #bfbfbf; border-radius: 11px; border-start-start-radius: 0; box-sizing: border-box; outline: none; background: transparent; }
104 input { padding: 9px 12px; border-radius: 6px; border-start-start-radius: 0; }
105 /* Focus state must be applied to BOTH the textarea border and the sibling .horizontal-border-wrapper (faux border around .comment-input -- see below). Override both selectors when changing focus color. */
106 input:focus, textarea:focus, textarea:focus + .horizontal-border-wrapper, .comment-input textarea:focus { border-color: #555 } /* .comment-reply textarea:focus for ssr */
107 /* Focus anywhere inside the box (the textarea or content an extension rendered below it) colours the whole frame. */
108 .comment-input:focus-within > textarea, .comment-input:focus-within > [contenteditable].comment-input, .comment-input:focus-within .horizontal-border-wrapper { border-color: #555 }
109 .pagination { margin-top: 50px; line-height: 19px; text-align: center; user-select: none; }
110 .pagination > * { display: inline-block; cursor: pointer; font-weight: 700; }
111 .pagination > * > span { font-weight: normal; pointer-events: none; }
112 .pagination > * > span::before { content: "("; }
113 .pagination > * > span::after { content: ")"; }
114 .pagination .load-next-page { padding-inline-end: 25px; }
115 .pagination .load-all { padding-inline-start: 25px; border-inline-start: 2px solid #555; } /* important that border is on the one to the right, as it doesn't always show */
116 .comments-toggle { display: block; width: fit-content; margin: 20px auto; cursor: pointer; padding-block: 10px; padding-inline: 27px 17px; border-radius: 7px; background: #333; color: #fff; text-decoration: none; font-size: 17px; font-weight: 500; user-select: none; }
117 .replying-to { margin-bottom: 5px }
118 .comment-reply { position: relative; width: 100%; margin: 10px 0 15px 0; }
119 .comment-reply.root { padding: 15px; box-sizing: border-box; }
120 @media(max-width: 500px) { .comment-reply.root { padding: 15px 5px 15px 5px; } }
121 .comment-reply .fast-comments-waiting { display: block; margin: 5px 0 }
122 .comment-reply .comment-reply-top-bar { position: relative; min-height: 25px; margin: 0 26px 15px 26px; line-height: 25px; } /* relative positioned for things like notifications list */
123 .comment-reply .comment-reply-top-bar .logged-in-info { display: inline-block; width: calc(100% - 60px); min-width: 150px; }
124 .comment-reply .comment-reply-top-bar .logged-in-info .avatar { display: inline-block; height: 25px; vertical-align: middle; margin-inline-end: 5px; border-radius: 25px; overflow: hidden; box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.07); font-size: 0; }
125 .comment-reply .comment-reply-top-bar .logged-in-info .avatar .open-profile { cursor: pointer; }
126 .comment-reply .comment-reply-top-bar .logged-in-info .avatar.animated-background img { opacity: 0.1; }
127 .comment-reply .comment-reply-top-bar .logged-in-info .avatar img { width: 25px; height: 25px; object-fit: cover; }
128 .comment-reply .comment-reply-top-bar .logged-in-info .username { display: inline-block; max-width: calc(50% - 25px); overflow: hidden; vertical-align: middle; text-overflow: ellipsis; font-weight: 700; white-space: nowrap; }
129 .comment-reply .comment-reply-top-bar .logged-in-info .username.open-profile { cursor: pointer; }
130 .comment-reply .comment-reply-top-bar .logged-in-info .badges { display: inline-block; margin-inline-start: 5px; }
131 .comment-reply .comment-reply-top-bar .right { /* physical-ok */ float: right; float: inline-end; }
132 .comment-reply .comment-reply-top-bar .right > * { display: inline-block; }
133 .comment-reply .comment-reply-top-bar .right .menu { font-weight: 500; font-size: 11px; }
134 .comment-reply .comment-reply-top-bar .right .menu:hover { z-index: 9002; }
135 .comment-reply .comment-reply-top-bar .right .menu .drop-label i { display: inline-block; width: 4px; height: 4px; background: #333; border-radius: 4px; margin: 0 2px; }
136 .comment-reply .comment-reply-top-bar .right .menu .items { top: 25px; padding: 20px; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.1); border-radius: 10px; border-start-end-radius: 0; }
137 .comment-reply .comment-reply-top-bar .right .menu .items > * { font-weight: 700; }
138 .comment-reply .comment-reply-top-bar .right .notification-bell { position: relative; margin-inline-start: 5px; cursor: pointer; }
139 .comment-reply .comment-reply-top-bar .right .notification-bell .count { position: absolute; top: -3px; inset-inline-start: 19px; min-width: 15px; height: 15px; text-align: center; font-size: 11px; pointer-events: none; color: red; display: none; }
140 .comment-reply .comment-reply-top-bar .right .notification-bell .icon.bell-red { display: none; }
141 .comment-reply .comment-reply-top-bar .right .notification-bell > * { pointer-events: none; }
142 .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .icon.bell { display: none; }
143 .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .icon.bell-red { display: inline-block; }
144 .comment-reply .comment-reply-top-bar .right .notification-bell.has-notifications .count { display: block; }
145 .toolbar { position: relative; display: inline-block; margin: 5px 0 0 0; font-size: 13px }
146 .toolbar .t-btn { display: inline-block; margin: 0 1px; vertical-align: middle; cursor: pointer; transition-duration: 200ms; user-select: none; }
147 .toolbar .t-btn:hover { opacity: 0.7; }
148 .toolbar .img-btn-wrap { display: inline-block; overflow: hidden }
149 .toolbar .t-btn input[type=file] { position: absolute; padding: 40px; font-size: 100px; top: 0; inset-inline-start: 0; opacity: 0; cursor: pointer }
150 .commenty-input:not(.show-default-hidden) .toolbar { width: 100%; margin-top: -50px; }
151 @media(max-width: 500px) { .toolbar { display: flex; width: 100%; padding-bottom: 12px; justify-content: space-evenly; align-items: center; } }
152 @media(max-width: 500px) { .comment-input .toolbar { margin-top: 50px; border-bottom: 1px solid #bfbfbf; } }
153 .comment-reply .auth-input, .comment-vote-auth.auth-input { margin: 10px 0; font-size: 13px }
154 .comment-reply .auth-input .fc-login { margin: 10px 0 0; }
155 .comment-reply .auth-input .reasoning, .comment-vote-auth.auth-input .reasoning { font-weight: 600; }
156 .comment-reply .auth-input .fc-red, .comment-vote-auth.auth-input .fc-red { display: block }
157 .comment-reply .auth-input input, .comment-vote-auth.auth-input input { width: 100%; margin-top: 10px; padding: 9px 12px; border-radius: 6px; border-start-start-radius: 0; font-size: 14px; border: 1px solid #a2a2a2; }
158 .comment-reply .auth-input .solicitation-info, .comment-vote-auth.auth-input .solicitation-info { margin-top: 10px; }
159 .comment-reply .auth-input .fast-comments-reply { margin-top: 10px; padding: 10px 45px; border-radius: 5px; border-start-end-radius: 0; background: #333; color: #fff; border: none; }
160 /* padding-bottom reserves space for the absolute toolbar/submit button. Don't remove it without also repositioning those elements. */
161 .comment-input, .comment-edit { position: relative; padding-bottom: 30px; border-radius: 11px; border-start-start-radius: 0; }
162 /* The textarea has no bottom border or bottom radius -- the bottom edge is drawn by .horizontal-border-bottom-* divs. To restyle the bottom of the input, target those, not the textarea. */
163 .comment-input textarea { display: block; width: 100%; height: 130px; padding-block: 15px; padding-inline: 15px 25px; resize: none; font-size: 16px; border-bottom: none; border-radius: 0; border-start-end-radius: 11px; }
164 .comment-input textarea::placeholder { font-size: 16px; font-weight: 400; }
165 .comment-input input { display: block; width: 100%; font-size: 14px; }
166 .comment-input .fastcomments-message-wrapper { border: 1px solid #bfbfbf; border-bottom: none; border-radius: 0; border-start-end-radius: 11px; }
167 .comment-input input[name=fastcomments-link] { display: block; width: 100%; margin: 10px 0; }
168 /*
169 * COMMENT INPUT BORDER: drawn by 6 absolutely-positioned divs inside .horizontal-border-wrapper (top-left, top-right, left, right, bottom-left, bottom-right), NOT by the textarea's border. To change the input's border color, width, or radius, target .horizontal-border-wrapper (sets border-color, inherited by all 6 pieces) and the individual .horizontal-border-* rules. The bottom-center is intentionally open so the submit button can overlap it. Top pieces are display:none on the root reply box and re-shown only for nested reply boxes (rule near end of block).
170 */
171 .comment-input .horizontal-border-wrapper { pointer-events: none; border-color: #bfbfbf; }
172 .comment-input .horizontal-border { position: absolute; height: 20px; border-bottom: 1px solid; border-color: inherit; }
173 .comment-input .horizontal-border-left { bottom: 0; inset-inline-start: 0; border-radius: 0; border-end-start-radius: 11px; }
174 .comment-input .horizontal-border-right { bottom: 0; inset-inline-end: 0; width: 20px; border-radius: 0; border-end-end-radius: 11px; }
175 .comment-input .horizontal-border-top-left, .comment-input .horizontal-border-top-right { display: none; position: absolute; top: 20px; border-bottom: 0; border-top: 1px solid; border-color: inherit; }
176 .comment-input .horizontal-border-top-right { top: 0; inset-inline-end: 0; border-radius: 0; border-start-end-radius: 11px; width: 20px; }
177 .comment-input .horizontal-border-top-left { top: 0; inset-inline-start: 0; }
178 /* Side pieces span the whole box (top to bottom), so anything an extension renders below the textarea sits inside the frame with no borders of its own. Over the textarea they overlap its own side border pixel for pixel; the right piece rounds its top corner to match the textarea's. */
179 .comment-input .horizontal-border-bottom-left { position: absolute; top: 0; bottom: 0; height: auto; width: 15px; inset-inline-start: 0; border-color: inherit; border-bottom: 0; border-inline-start-width: 1px; border-inline-start-style: solid; border-radius: 0; border-end-start-radius: 11px; }
180 .comment-input .horizontal-border-bottom-right { position: absolute; top: 0; bottom: 0; height: auto; width: 15px; inset-inline-end: 0; border-color: inherit; border-bottom: 0; border-inline-end-width: 1px; border-inline-end-style: solid; border-radius: 0; border-start-end-radius: 11px; border-end-end-radius: 11px; }
181 /* Re-shows top border pieces for nested reply boxes (input rendered inside a .comment) so the input gets a full frame. */
182 .comment .comment-input .horizontal-border-top-left, .comment .comment-input .horizontal-border-top-right { display: block }
183 @media(max-width: 500px) { .comment-input textarea, .comment-input .fastcomments-message-wrapper { height: 130px; } }
184 /* Submit button. Sits in the gap between the .horizontal-border-bottom-left/right pieces -- if you change the input's bottom border layout, retune top/right here too. */
185 .comment .reply-button-wrapper { position: relative; /* physical-ok */ float: right; float: inline-end; top: -19px; inset-inline-end: 26px; border-radius: 7px; border-start-start-radius: 0; }
186 .comment .fast-comments-reply, .comment .edit-save { padding: 10px 27px; border-radius: 7px; border-start-start-radius: 0; background: #333; color: #fff; text-decoration: none; }
187 /* X cancel button. Only rendered for nested replies, not the root reply box. */
188 .comment .cancel-button-wrapper { position: absolute; top: 9px; inset-inline-end: 25px; border-radius: 4px; }
189 .comment .comment-edit .cancel-button-wrapper { top: -13px }
190 .comment .fast-comments-reply-cancel { margin-bottom: 0; padding: 1px 1px; border-radius: 4px; }
191 .comment .fast-comments-reply-cancel .cross { pointer-events: none; }
192 .comment-reply.root .reply-button-wrapper { position: relative; /* physical-ok */ float: right; float: inline-end; top: -20px; inset-inline-end: 27px; margin-bottom: 10px; border-radius: 7px; border-start-start-radius: 0; }
193 .comment-reply.root button { margin-bottom: 0; padding: 7px 20px; font-weight: 600; }
194 .comment-reply.root button .bubble { margin-inline-start: 10px; pointer-events: none; }
195 .comments { clear: both; padding: 15px 0; }
196 @media(max-width: 500px) { .comments { padding: 15px 5px; } }
197 .comment { position: relative; margin-top: 15px }
198 @media(max-width: 500px) { .comment { margin-top: 5px; } }
199 .comment .comment-text spoiler:not(:hover) { background: #eee; color: #eee; border: 1px dotted #a2a2a2; }
200 .comment .comment-text spoiler:has(div, p) { display: block; }
201 .comment .comment-text .inline-image { display: block; max-width: 500px; margin: 3px 0 3px 0 } /* must not select inline-image in wysiwyg */
202 .comment .comment-text .inline-image img { max-width: 100%; max-height: 400px } /* must not select inline-image in wysiwyg */
203 .disable-image-redirect .comment .inline-image { cursor: default; }
204 /*
205 * Comment state classes on .comment -- target these to restyle moderation/state visuals:
206 * .is-live newly streamed-in comment (flash animation)
207 * .is-unread not yet seen by current user (avatar glow)
208 * .unverified commenter hasn't clicked email confirmation (dimmed)
209 * .is-spam flagged as spam (red border)
210 * .is-unapproved awaiting moderation (orange border)
211 * .is-blocked from a blocked user (text truncated to 40px)
212 * .is-deleted, .is-admin, .is-own, .24hr, .readonly are also added but not styled by default.
213 */
214 .comment.is-live > .inner { animation: backgroundToNormal 1.5s }
215 .comment.is-unread > .inner .avatar-wrapper { box-shadow: 0 0 20px #89f796; }
216 .comment.unverified > .commenter-name, .comment.unverified > .comment-content .commenter-name { opacity: 0.7 }
217 .comment.unverified > .comment-content > .comment-text { opacity: 0.7 }
218 .comment.is-spam > .comment-content { border: 1px solid red; } /* can be set when saving comment initially */
219 .comment.is-unapproved > .comment-content { border: 1px solid #ffa700; } /* can be set when saving comment initially */
220 .comment.is-blocked > .inner > .comment-content > .comment-text { max-height: 40px; overflow: hidden; }
221 .comment > .requires-verification-approval { margin: 3px 0 6px }
222 .comment > .inner > .spam-notice { margin: 0 0 10px 0; font-size: 12px; color: red }
223 @media(max-width: 500px) { .comment > .inner > .spam-notice { margin-top: 18px; } }
224 .comment .avatar-wrapper { position: relative; display: inline-block; width: 56px; height: 56px; overflow: hidden; box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.10); border-radius: 15px; border-start-end-radius: 0; vertical-align: top; }
225 /* .anon = placeholder avatar (no custom default configured + anonymous user). Style this to change how unidentified commenters appear. */
226 .comment .avatar-wrapper.anon { border: 1px solid #3f3f3f; }
227 .comment .avatar-wrapper .open-profile { cursor: pointer; }
228 .comment .avatar-wrapper.animated-background img { opacity: 0.1; }
229 @media(max-width: 500px) { .comment .avatar-wrapper { width: 36px; height: 36px; } }
230 .comment .avatar { width: 100%; height: 100%; object-fit: cover; }
231 @media(max-width: 500px) { .comment .avatar { vertical-align: middle } }
232 .comment .commenter-name .badges { margin-bottom: 5px; }
233 .badges .badge { display: inline-block; vertical-align: middle; line-height: initial; margin-block: 3px; margin-inline: 0 5px; padding: 5px 7px; cursor: default; font-size: 12px; white-space: nowrap; border-radius: 4px; color: #000; }
234 .badges .badge img { max-width: 22px; }
235 .badges .badge.ib { padding: 0; }
236 .comment .commenter-name { font-size: 14px }
237 .comment > .commenter-name { display: none; vertical-align: middle; color: #000 }
238 @media(max-width: 500px) { .comment > .commenter-name { display: inline-block; margin-inline-start: 5px; vertical-align: middle } }
239 .comment > .commenter-name a { display: block; color: #000; text-decoration: none }
240 .comment .commenter-name .website-url { color: #000; text-decoration: underline }
241 .comment .commenter-name .label { font-size: 10px; text-transform: uppercase; font-weight: 500; color: #666666; } /* common label styling (unverified label, admin label, custom labels, etc) */
242 .comment > .inner { position: relative; padding: 8px 8px 10px 8px; } /* relative is required for blocked message */
243 @media(max-width: 500px) { .comment > .inner { padding: 5px 5px 5px 5px; } }
244 .comment > .inner > .comment-content { position: relative; display: inline-block; width: calc(99% - 101px); margin-inline-start: 15px; }
245 .hide-avatars .comment > .inner > .comment-content { margin-inline-start: 0; }
246 .hide-avatars .comments > .comment > .inner > .comment-content > .commenter-name, .hide-avatars .comments > .comment > .inner > .comment-content > .comment-text { padding-inline-start: 0; }
247 @media(max-width: 500px) { .comment > .inner > .comment-content { display: inline; margin-inline-start: 3px; background: transparent } }
248 .comment > .inner > .comment-content .commenter-name { display: inline-block; max-width: 50%; vertical-align: middle; padding-block: 5px 0; padding-inline: 2px 0; color: #171717 }
249 .comment > .inner > .comment-content .commenter-name > .username { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
250 @media(max-width: 500px) { .comment > .inner > .comment-content .commenter-name { padding-block: 5px 0; padding-inline: 4px 0; } }
251 .comment > .inner > .comment-content .comment-text { padding: 5px 2px; color: #000; line-height: 22px; font-size: 14px; word-break: break-word; white-space: pre-line; overflow-y: auto }
252 .comment > .inner > .comment-content .comment-text ol, .comment > .inner > .comment-content .comment-text ul { white-space: normal; }
253 .comment > .inner > .comment-content .comment-text .react { display: inline; max-height: 20px; margin: 0 3px; vertical-align: text-top; }
254 .comment > .inner > .comment-content > .comment-text b > a { color: #000; text-decoration: none; }
255 .comment > .inner > .comment-content > .comment-text blockquote { margin: 15px 0; padding: 0 20px; border-inline-start: 1px solid #e5e5e5; }
256 .comment > .inner > .comment-content .comment-text-edit { width: 100%; margin-top: 15px; }
257 @media(max-width: 500px) { .comment > .children .comment-text { margin-inline-start: 27px; } }
258 .comment > .inner > .comment-content .comment-text br { line-height: 0.5em }
259 .comment > .inner > .comment-content textarea.comment-text, .comment > .inner > .comment-content input.comment-text { display: block; width: calc(100% - 20px); height: fit-content; margin: 10px 10px 0 10px; padding: 5px 11px; resize: vertical }
260 .comment > .inner > .comment-content .edit-failure { display: block; margin: 10px 0; text-align: center }
261 .comment > .inner > .comment-content .comment-toolbar-vote { position: relative; margin-inline-start: 8px }
262 @media(max-width: 500px) { .comment > .inner > .comment-content .comment-toolbar-vote { margin-inline-start: 0 } }
263 .comment > .inner > .comment-content .comment-toolbar-vote .vote-awaiting-verification { padding: 5px 0; font-weight: 500 }
264 .comment > .inner > .comment-bottom { margin-top: 25px; border-bottom: 1px solid #e5e5e5; }
265 @media(max-width: 500px) { .comment > .inner > .comment-bottom { margin-top: 10px; } }
266 .children .comment > .inner > .comment-bottom { margin-inline-start: 28px; }
267 @media(max-width: 500px) { .children .comment > .inner > .comment-bottom { margin-inline-start: 21px; } }
268 @media(min-width: 500px) { .hide-avatars .children .comment > .inner > .comment-bottom { margin-inline-start: 33px; } }
269 /* min-height reserves space for the absolutely-positioned reply button (.comment-toolbar-reply, top:-4px below). */
270 .comment > .inner > .comment-bottom > .comment-bottom-toolbar { position: relative; min-height: 36px; }
271 .comment > .inner > .comment-bottom .comment-vote-options .votes-up, .comment > .inner > .comment-bottom .comment-vote-options .votes-down { position: relative; top: 1px; vertical-align: middle; font-size: 12px; font-weight: 500; }
272 .comment > .inner > .comment-bottom .comment-vote-options .votes-up { margin-inline-end: 5px; }
273 .comment > .inner > .comment-bottom .comment-vote-options .votes-down { margin-inline-start: 5px; }
274 .comment > .inner > .comment-bottom .comment-toolbar-vote .comment-votes .divider { height: 20px; }
275 .comment > .inner > .comment-bottom .comment-vote-options { display: inline-block; margin-block: 0; margin-inline: 2px 7px; font-size: 12px; }
276 .comment > .inner > .comment-bottom .comment-vote-options > span { cursor: pointer }
277 .comment > .inner > .comment-bottom .comment-votes, .comment > .inner > .comment-bottom .comment-reply-start { display: inline-block; margin: 5px 2px; font-size: 12px }
278 .comment > .inner > .comment-bottom .comment-vote-options button { margin: 0 3px }
279 .comment > .inner > .comment-bottom .comment-vote-options .view-count { display: inline-flex; align-items: center; vertical-align: middle; gap: 3px; margin-inline-start: 3px; color: #828282; }
280 .comment > .inner > .comment-bottom .comment-vote-options .view-count .icon { opacity: 0.7; }
281 .comment > .inner > .comment-bottom .comment-toolbar-reply { position: absolute; inset-inline-end: 0; top: -4px; }
282 .comment > .inner > .comment-bottom .comment-reply-start { border: none; background: none; font-weight: 600; }
283 .comment > .inner > .comment-bottom .comment-reply-start i { position: relative; top: -2px; pointer-events: none; }
284 .comment > .inner > .comment-bottom .comment-vote-auth { width: 100%; max-width: 400px }
285 .comment > .inner > .comment-bottom .comment-vote-auth .fast-comments-waiting { /* physical-ok */ float: left; float: inline-start }
286 .comment > .inner > .comment-bottom .comment-vote-auth .buttons { text-align: end }
287 .comment > .inner > .comment-bottom .comment-vote-auth button { margin-block: 5px 0; margin-inline: 5px 0; padding: 10px 35px; background: #333; color: #fff; border: none; }
288 .comment > .inner > .comment-bottom .reply-form-wrapper { padding: 5px }
289 .comment > .toggle-replies { margin-block: 0; margin-inline: 15px 0; line-height: 24px; font-weight: 500; font-size: 11px; color: #666; cursor: pointer; user-select: none; }
290 .children .comment > .toggle-replies { margin-inline-start: 41px; }
291 @media(max-width: 500px) { .children .comment > .toggle-replies { margin-inline-start: 12px; } }
292 .comment > .toggle-replies > * { vertical-align: middle; pointer-events: none; }
293 .comment > .toggle-replies > i { margin-inline-end: 5px; }
294 .comment > .toggle-replies > span > .count { color: #1f1f1f; }
295 .comment > .toggle-replies > span > .count:before { content: "("; }
296 .comment > .toggle-replies > span > .count:after { content: ")"; }
297 .comment .prompt { position: absolute; top: -2px; inset-inline-start: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background: rgba(255, 255, 255, 0.9); text-align: center } /* -2px to ensure covers up arrow */
298 .comment .prompt p { font-weight: 500; }
299 .comment .prompt button { user-select: none; }
300 .comment .prompt button:not(:last-child) { margin-inline-end: 10px }
301 .comment .comment-error p:before { padding-inline-end: 5px; content: "❗" }
302 @media(max-width: 500px) { .comment .prompt { padding: 5px } }
303 @media(max-width: 500px) { .comment .prompt p { margin: 0 0 .4em 0 } }
304 .comment > .inner > .requires-verification-approval, .comment > .inner > .awaiting-approval-notice { margin: 15px 0; }
305 /* Date + flag/pin/lock icons + menu (3-dot/edit). On hover, z-index jumps so the open menu can overlap sibling comments. Match this when styling custom menu overlays. */
306 .comment .top-right { position: absolute; top: 0; inset-inline-end: 0; z-index: 2; }
307 .comment .top-right:hover { z-index: 9001; }
308 .comment .jump-link { padding-inline-end: 5px; vertical-align: baseline; font-size: 12px; text-decoration: none; color: #4f4f4f }
309 .comment .jump-link .abs-date { margin-inline-start: 5px; }
310 @media(max-width: 500px) { .comment > .inner > .top-right { top: -10px; } } /* if top is too low, will go above highlighting for admin actions */
311 .comment .top-right > * { display: inline-block; vertical-align: middle }
312 .comment > .inner > .replied { display: inline-block; margin-block: -7px 0; margin-inline: 0 5px; vertical-align: top; }
313 .hide-avatars .comment > .inner > .replied { margin-block: 0; margin-inline: 0 5px; }
314 .children > .comment:not(:first-child) > .replied { opacity: 0.5; }
315 .comment .menu { position: relative; padding-block: 10px; padding-inline: 0 10px; user-select: none }
316 .comment .menu .menu-btn { cursor: pointer }
317 .comment .menu .menu-btn i { display: inline-block; width: 4px; height: 4px; margin: 2px; background: #333; border-radius: 10px }
318 /* .menu.empty rendered when no actions are available -- kept in DOM to preserve layout, dimmed and non-clickable. */
319 .comment .menu.empty .menu-btn { cursor: default; opacity: 0.5; }
320 .menu-content { position: absolute; width: 130px; min-width: max-content; padding: 20px; background-color: #fff; box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.10); border-radius: 10px; border-start-end-radius: 0; z-index: 9001; }
321 .menu-content div { padding: 3px; font-weight: 700; cursor: pointer; font-size: 13px }
322 .menu-content div > * { vertical-align: middle; pointer-events: none; }
323 .menu-content div > i { margin-block: 0; margin-inline: 0 5px; }
324 .menu-content div > span { display: inline-block; width: calc(100% - 29px); padding: 7px 10px; box-sizing: border-box; }
325 .menu-content div:not(:last-child) > span { border-bottom: 1px solid #dcdcdc; }
326 .menu-content.corner-bottom-right { border-radius: 10px; border-end-end-radius: 0; }
327 @media(max-width: 500px) { .comment .menu { padding-block: 10px; padding-inline: 0 5px; } } /* if top is too low, will go above highlighting for admin actions */
328 .comment > .children { margin-block: 15px 0; margin-inline: 15px 0 }
329 /* "Powered by FastComments" footer. White-labeled tenants get .empty (no content) - hidden entirely, like the live chat widget does. Custom tenant CSS can still restore it via .footer.empty. */
330 .footer { height: 65px; margin-top: 25px; padding-top: 20px; text-align: center; font-size: 12px; }
331 .footer:not(.empty) { border-top: 1px solid #ccc }
332 .footer.empty { display: none; }
333 .footer a, .footer .logo { vertical-align: top; text-decoration: none; color: #201600; font-weight: bold; font-size: 14px }
334 .footer .logo { margin-top: -2px; padding-inline-end: 2px; }
335 .comment.readonly .comment-vote-options { display: none }
336 /* Autocomplete dropdown for @mentions and #hashtags inside the comment input. Anchored relative to .comment-input. */
337 .search-list { position: absolute; z-index: 4; width: 100%; margin-top: -9px; box-sizing: border-box; border-radius: 0 0 11px 11px; background: #fff; border: 1px solid #bfbfbf; }
338 .search-list .cross { position: absolute; top: -11px; inset-inline-end: 0; width: 20px; height: 20px; background-color: #fff; border: 1px solid #bfbfbf; border-inline-end: 0; border-radius: 16px; border-start-end-radius: 0; border-end-end-radius: 0; cursor: pointer; }
339 .search-list .search-entry { padding: 5px 10px; cursor: pointer; }
340 .search-list .search-entry.last { border-radius: 0 0 11px 11px }
341 .search-list .search-entry img { width: 20px; height: 20px; margin-inline-end: 3px; vertical-align: middle; border-radius: 20px; }
342 .search-list .search-entry > * { pointer-events: none; }
343 .search-list .search-entry:hover, .search-list .search-entry.kb-select, .search-list .cross:hover { background-color: #eee; }
344 .search-list .search-section-header { padding: 4px 10px; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; pointer-events: none; user-select: none; }
345 .search-list .search-section-loading { padding: 4px 10px; font-size: 11px; color: #888; font-style: italic; pointer-events: none; user-select: none; }
346 /* .search-list-open is added to .comment-input while the @/# autocomplete is showing -- hides the submit button so it doesn't collide with the dropdown. */
347 .comment-input.search-list-open .reply-button-wrapper { display: none; }
348 .avatar-wrapper .activity-icon { position: absolute; top: 4px; inset-inline-end: 4px; }
349 .activity-icon { width: 8px; height: 8px; border-radius: 10px; }
350 .username .activity-icon { position: relative; top: 2px; display: none; margin-inline-end: 5px; }
351 .activity-icon.online { display: inline-block; background: lime; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); }
352 .hide-avatars .activity-icon.online { top: -1px; }
353 @media(max-width: 500px) { .activity-icon { width: 5px; height: 5px; } }
354

最近のコメントウィジェットのスタイリング Internal Link

Recent Comments ウィジェットは、サイト全体または特定のページの最新コメントを一覧表示します。見出し、丸いアバター、コメントプレビュー、コメントへのディープリンクとなるクリック可能な日付、自動的なダークモード検出が含まれます。

Basic Installation

最近のコメントウィジェットのインストール
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/widget-recent-comments-v2.min.js"></script>
3<div id="fastcomments-widget-recent-comments"></div>
4<script>
5 FastCommentsRecentCommentsV2(document.getElementById('fastcomments-widget-recent-comments'), {
6 tenantId: 'demo'
7 });
8</script>
9

Configuration Options

  • tenantId (required): Your FastComments tenant ID
  • urlId (optional): Filter to a single page. Leave null for all pages
  • count (optional): Number of comments to show. Default is 10
  • hasDarkBackground (optional): Force dark mode styling. Auto-detected from the page background if not set

Widget Structure

The widget renders with the following HTML structure:

最近のコメントウィジェットのHTML構造
Copy Copy
1
2<div class="fc-rc2">
3 <div class="fc-rc2-heading">Recent Comments</div>
4 <div class="fc-rc2-list">
5 <div class="fc-rc2-card">
6 <div class="fc-rc2-header">
7 <img class="fc-rc2-avatar" src="..." alt="Avatar" />
8 <div class="fc-rc2-meta">
9 <span class="fc-rc2-name">Username</span>
10 <a class="fc-rc2-date" href="...">2 hours ago</a>
11 </div>
12 </div>
13 <div class="fc-rc2-body">Comment preview...</div>
14 <a class="fc-rc2-page-link" href="...">Page Title</a>
15 </div>
16 </div>
17</div>
18

Default CSS Reference

最近のコメントウィジェットのデフォルトCSS
Copy Copy
1
2.fc-rc2 {
3 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4 text-align: left;
5 line-height: 1.5;
6 color: #1a1a1a;
7 border: 1px solid #e0e0e0;
8 border-radius: 12px;
9 padding: 20px;
10 background: #fff;
11}
12.fc-rc2-heading { font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
13.fc-rc2-card { padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
14.fc-rc2-card:last-child { border-bottom: none; }
15.fc-rc2-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
16.fc-rc2-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
17.fc-rc2-name { font-size: 13px; font-weight: 600; }
18.fc-rc2-date { font-size: 11.5px; color: #999; text-decoration: none; }
19.fc-rc2-body { font-size: 14px; line-height: 1.55; color: #444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
20.fc-rc2-page-link { display: inline-block; margin-top: 6px; font-size: 12px; color: #777; text-decoration: none; }
21.fc-rc2-page-link:hover { color: #0066cc; text-decoration: underline; }
22

Customization Examples

Change Avatar Size

カスタムアバターサイズ
Copy Copy
1
2.fc-rc2-avatar {
3 width: 40px !important;
4 height: 40px !important;
5}
6

Show More Lines of Comment Text

コメントテキストの行数を増やす
Copy Copy
1
2.fc-rc2-body {
3 -webkit-line-clamp: 5 !important;
4}
5

Remove the Container Border

コンテナの境界線を削除
Copy Copy
1
2.fc-rc2 {
3 border: none !important;
4 box-shadow: none !important;
5}
6

最も議論されたページウィジェットのスタイリング Internal Link

最も議論されたページ ウィジェットは、コメント数の多いページをランク付きリストで表示します。見出し、番号付きランク、アイコン付きのコメント数、最終アクティビティの日付、および自動ダークモード検出が含まれます。

基本的なインストール

最も議論されたページ ウィジェットのインストール
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/widget-top-pages-v2.min.js"></script>
3<div id="fastcomments-widget-top-pages"></div>
4<script>
5 FastCommentsTopPagesV2(document.getElementById('fastcomments-widget-top-pages'), {
6 tenantId: 'demo'
7 });
8</script>
9

設定オプション

  • tenantId (必須): あなたの FastComments テナント ID
  • hasDarkBackground (任意): ダークモードのスタイリングを強制します。未設定の場合はページの背景から自動検出されます

ウィジェット構造

ウィジェットは次のHTML構造でレンダリングされます:

最も議論されたページ ウィジェットのHTML構造
Copy Copy
1
2<div class="fc-tp2">
3 <div class="fc-tp2-heading">Most Discussed Pages</div>
4 <div class="fc-tp2-list">
5 <div class="fc-tp2-item">
6 <div class="fc-tp2-rank">1</div>
7 <div class="fc-tp2-detail">
8 <a class="fc-tp2-title" href="...">Page Title</a>
9 <span class="fc-tp2-activity">Last activity Mar 21, 2026</span>
10 </div>
11 <div class="fc-tp2-count">42</div>
12 </div>
13 </div>
14</div>
15

デフォルトのCSS参照

最も議論されたページ ウィジェットのデフォルトのCSS
Copy Copy
1
2.fc-tp2 {
3 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4 text-align: left;
5 line-height: 1.5;
6 color: #1a1a1a;
7 border: 1px solid #e0e0e0;
8 border-radius: 12px;
9 padding: 20px;
10 background: #fff;
11}
12.fc-tp2-heading { font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
13.fc-tp2-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
14.fc-tp2-item:last-child { border-bottom: none; }
15.fc-tp2-rank { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; font-weight: 700; background: #f0f0f0; color: #888; }
16.fc-tp2-title { font-size: 13px; font-weight: 500; color: #1a1a1a; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
17.fc-tp2-activity { font-size: 11px; color: #999; }
18.fc-tp2-count { font-size: 12px; font-weight: 600; color: #666; }
19

カスタマイズ例

ランクバッジを削除

ランクバッジを削除
Copy Copy
1
2.fc-tp2-rank {
3 display: none !important;
4}
5

コンテナのボーダーを削除

コンテナのボーダーを削除
Copy Copy
1
2.fc-tp2 {
3 border: none !important;
4 box-shadow: none !important;
5}
6

最近のディスカッションウィジェットのスタイリング Internal Link

The Recent Discussions ウィジェットは、最新のコメント活動でソートされたページのリストを表示します。見出し、最終活動日時、アイコン付きのコメント数、そして自動ダークモード検出が含まれます。

基本インストール

Recent Discussions ウィジェット スタイリング設定
Copy CopyRun External Link
1
2<script src="https://cdn.fastcomments.com/js/widget-recent-discussions-v2.min.js"></script>
3<div id="fastcomments-widget-recent-discussions"></div>
4<script>
5 FastCommentsRecentDiscussionsV2(document.getElementById('fastcomments-widget-recent-discussions'), {
6 tenantId: 'demo'
7 });
8</script>
9

設定オプション

  • tenantId (required): あなたの FastComments テナント ID
  • count (optional): 表示するページ数。デフォルトは 20、最大 100
  • hasDarkBackground (optional): ダークモードのスタイリングを強制します。設定されていない場合はページの背景から自動検出されます

ウィジェット構造

ウィジェットは以下の HTML 構造でレンダリングされます:

Recent Discussions ウィジェット HTML 構造
Copy Copy
1
2<div class="fc-rd2">
3 <div class="fc-rd2-heading">Recent Discussions</div>
4 <div class="fc-rd2-list">
5 <div class="fc-rd2-item">
6 <div class="fc-rd2-detail">
7 <a class="fc-rd2-title" href="...">Page Title</a>
8 <span class="fc-rd2-activity">Last activity Mar 21, 2026</span>
9 </div>
10 <div class="fc-rd2-count">42</div>
11 </div>
12 </div>
13</div>
14

デフォルト CSS リファレンス

Recent Discussions ウィジェット デフォルト CSS
Copy Copy
1
2.fc-rd2 {
3 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
4 text-align: left;
5 line-height: 1.5;
6 color: #1a1a1a;
7 border: 1px solid #e0e0e0;
8 border-radius: 12px;
9 padding: 20px;
10 background: #fff;
11}
12.fc-rd2-heading { font-size: 16px; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
13.fc-rd2-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
14.fc-rd2-item:last-child { border-bottom: none; }
15.fc-rd2-title { font-size: 13px; font-weight: 500; color: #1a1a1a; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
16.fc-rd2-activity { font-size: 11px; color: #999; }
17.fc-rd2-count { font-size: 12px; font-weight: 600; color: #666; }
18

カスタマイズ例

コンテナの境界線を削除する

コンテナの境界線を削除
Copy Copy
1
2.fc-rd2 {
3 border: none !important;
4 box-shadow: none !important;
5}
6

カスタムリンクカラー

カスタムリンクカラー
Copy Copy
1
2a.fc-rd2-title:hover {
3 color: #e63946 !important;
4}
5

その他のフロントエンドライブラリ Internal Link

React、Angular、Vue などの FastComments 公式フロントエンドライブラリはすべて、customCSS 設定 パラメーターを受け取り、同じ HTML 構造を持つバニラ js ライブラリのラッパーになっています。

このガイドに貢献する