こちらの記事に使用されいてる管理画面の画像は、英語の管理画面を撮影したものです。実際にご利用いただくEmbedSocialの管理画面は日本語仕様です。
EmbedReviewsプラットフォームでレビューウィジェットをカスタマイズするには、カスタムCSSフィールドを使用し、その属性を変更したクラスを適用できます。
ウィジェットにカスタムCSSを適用する方法は次のとおりです。
たとえば、タイトルを24pxより大きくする必要がある場合、カスタムCSSフィールドにクラス .es-title を追加し、font-size:30px と入力します。
以下は手順の概要です。
設定パネルでカスタムCSSボックスに移動します。
次に、カスタムCSSフィールドに .es-title {font-size:30px;} と入力します。
右上の「保存」ボタンをクリックします。
以上です。
以下は、すべてのレビューウィジェットで使用されるクラスのリストです。これらのクラスをカスタムCSSフィールドに追加し、スタイル属性を変更できます。
すべてのレビューウィジェットの共通クラス
ウィジェットタイトル
.es-title クラスを使用して、ウィジェットタイトルのフォントサイズや色を編集します：
.es-title {color: #000000; font-size: 24px;}
ウィジェットヘッダー
ID #es-header を使用して、ヘッダーテキストの配置と下部マージンを編集します：
#es-header{text-align: center; margin-bottom: 50px;}
レビューボックス（背景と境界）
es-box クラスを使用して、レビューエリアの背景と境界の色を編集します：
.es-box { background-color: #FFFFFF; padding: 25px; width: 100%; border-radius: 8px; border: 1px solid #D6DAE4; overflow: hidden; position: relative; }
レビュワーの名前
es-username クラスを使用して、レビュワーの名前のフォントサイズや色を編集します：
.es-username {color: #000000; font-size: 18px; line-height: 25px; word-break: break-word; font-weight: 600; margin-bottom: 15px;}
レビュワーの写真
es-avatar クラスを使用して、レビュワーの写真の角丸や位置を編集します。以下の例は写真を円形に調整するものです。四角にする場合は、border-radius属性を9%に設定します。
.es-avatar {border-radius: 50%;}
.avatar-75 クラスを使用して、レビュワーの写真のサイズを編集します：
.avatar-75 {width: 75px; height: 75px; }
スター
es-stars クラスを使用して、スターのマージンや位置を編集します：
.es-stars {margin-bottom:15px;}
es-stars svg クラスを使用して、スターのサイズを編集します。たとえば、
.es-stars svg {height:30px; width:30px;}
レビューテキスト
es-text クラスを使用して、レビューテキストのサイズや色を編集します。テキストサイズを変更する場合は、font-size属性を追加します。例：font-size:12px（より小さいフォントサイズ用）またはfont-size:20（より大きいフォントサイズ用）
.es-text {line-height: 1.5; word-break: break-word; margin-bottom: 20px; color: #000000;font-size:15px;}
レビュー日付
es-date クラスを使用して、レビュー日付のフォントサイズと色を編集します：
.es-date {font-size: 12px; color: #9CA0AC; display: inline-block;}
ソースのロゴ
es-logo クラスを使用して、ソースのロゴ/アイコンの位置を編集します：
.es-logo { display: inline-block; margin-right: 4px; position: relative; top: 6px; background-repeat: no-repeat; width: 20px; height: 20px; background-size: contain; border-radius: 50%;}
es-logo svg クラスを使用して、アイコンのサイズを編集します：
.es-logo svg {width: 20px; height: 20px;}
ライトボックスCSSクラス スライダーライトボックス
注意：スライダーライトボックスでウィジェットと同じクラスを持つ要素を編集するには、id #es-slider を使用し、ウィジェットと異なるものにしたいクラスを追加する必要があります。たとえば、レビュワーの写真を編集する場合、スライダーライトボックス内で写真の位置のみを変更するために、クラス #es-lightbox-slider .es-avatar を使用できます。
#es-lightbox-slider .es-avatar {margin-bottom: -30px; top: -40px; position: relative; overflow: visible; margin-left: 0; }
スライダーポップアップの色、角丸、余白を編集するには .es-lightbox-box クラスを使用します：
.es-lightbox-box { position: relative; padding: 0 40px 40px; background-color: #FFFFFF; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: visible; margin-top: 80px; }
詳細やご不明点は、このページの右下のチャットサポートかCSチームにお問い合わせくださいませ。