[{"id":"471bd01d-2c55-4895-b46f-811c4eed7571","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"da208fce-85ad-4c35-a5e3-87ff194b17ed","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"ac6cc2b2-6ddb-42d4-8bfa-95509e6448e2","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"99c67dff-427d-41b4-a4b0-144ec624500b","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"21d10235-4abe-486e-8859-6aa2f7edc442","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"361f2cdd-a34a-446b-8f53-16b7c82fb69a","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"2a3cece3-ed23-4e9f-a71f-226657337d2c","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"d8001871-044e-4afc-899d-e4104efcfbde","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"feb1cbab-9f1e-4233-b9db-11b2b9156c6d","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"a7942aeb-844b-42a6-83df-1c0aa8da3d0e","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"318074f6-ca29-4ed9-adb6-af319ab87121","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"3c29b05e-ef44-48c3-b836-6743680fa52a","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"5b86275f-ec58-4d09-b5c9-f0047fc3d2f3","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"55a78d7c-a608-4ff6-bb3c-f5993afc8631","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"64e9c9e5-dc70-4dcc-b101-824c175010f9","tags":[{"product":null,"links":null,"id":"7b9720d8-a3f2-4aed-b5d1-ecdd9c83fd98","name":"New","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]},{"id":"e7dd5528-b482-4399-9d5d-38d10a9b0ddb","tags":[{"product":null,"links":null,"id":"eb6fd2e9-402e-4d9d-941f-2f1d8e8d94a4","name":"Upd","color":"#4f3b88","productId":"615f7894-45c6-4170-bf0f-737df4b95179"}]}]
本製品のコメントコンポーネントに適用できる CSS の一覧をこちらに記載します。
これらの CSS は以下のコントロールに適用されます。
コメントコンポーネント(GcComment)
コメントコンポーネントの各に以下の部分のスタイルが適用されます。
コンポーネント全体
コメントエディタ
コメント
リアクション
並べ替え
検索ボックス
コメント数・リアクション数
CSSクラス | 適用箇所 | CSSプロパティ |
---|---|---|
.gcim__gccomment (コメントコンポーネントの基本スタイル) | フォントファミリー | font-family |
フォントサイズ | font-size | |
カーソルの形状 | cursor | |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
左右のパディング | --gcim__gccomment-left-right-padding | |
ヘッダー・フッターの間隔 | --gcim__gccomment-header-footer-row-gap | |
アバターの幅 | --gcim__gccomment-avatar-width | |
アバターの高さ | --gcim__gccomment-avatar-height | |
.comment-container-header (コメントコンポーネントヘッダーのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.gcim__gccomment-commentcontainer (コメントコンポーネントコンテナのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.comment-container-footer (コメントコンポーネントフッターのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.load_more_text (「もっと読み込む」のスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding |
CSSクラス | 適用箇所 | CSSプロパティ |
---|---|---|
.sort-by (並べ替えの基本スタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.combo (並べ替えのコンボのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.gcim__gccomment-sort-items-popup (並べ替えのドロップダウンのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.sort-item (並べ替えのドロップダウン項目のスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding |
CSSクラス | 適用箇所 | CSSプロパティ |
---|---|---|
.search-container (検索ボックスの基本スタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.search-text (検索テキストのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.search-counter (検索結果数のスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.select-box (前/次を検索矢印のスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.search-watermark (検索ボックスのウォーターマークのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding |
CSSクラス | 適用箇所 | CSSプロパティ |
---|---|---|
.gcim__gccomment-addcomment_component (コメントの追加の基本スタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.avatar (アバターのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.add-comment-watermark (コメントの追加のウォーターマークのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding |
CSSクラス | 適用箇所 | CSSプロパティ |
---|---|---|
.comment-count (コメント数の基本スタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.count (コメント数の数値のスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.text (コメント数のテキストのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding |
CSSクラス | 適用箇所 | CSSプロパティ |
---|---|---|
.reaction-count (リアクション数の基本スタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.count (リアクション数の数値のスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.text (リアクション数のテキストのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding |
CSSクラス | 適用箇所 | CSSプロパティ |
---|---|---|
.gcim__gccomment-addcommentwrapper (コメントの追加の基本スタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.avatar (アバターのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.editor (コメントエディタのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.btn_save (送信ボタンのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.btn_cancel (キャンセルボタンのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.anonymous_checkbox (匿名チェックボックスのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding |
CSSクラス | 適用箇所 | CSSプロパティ |
---|---|---|
.comment (コメントの基本スタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.info (コメント情報のスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.commentContent (コメントコンテンツのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.commentAction (コメントの操作のスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.action-btn (コメントの操作項目のスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.avatar (アバターのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.name (名前のスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.time (コメント更新日時のスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding | |
.action-reaction (リアクションのスタイル) | カーソルの形状 | cursor |
アウトライン | outline | |
境界線 | border | |
背景 | background | |
余白 | margin, padding |