メインコンテンツにスキップ

EmbedReviews カスタムCSS追加例の一覧

ウィジェットにカスタムCSSを追加してレイアウトを細かく調整することができます。

田中理央 Rio avatar
対応者:田中理央 Rio
一週間前以上前にアップデートされました

本記事では、ユーザー様からご質問の多い代表的なカスタムCSSの例を紹介いたします。カスタムCSSを加えることで、自社サイトのデザイントーンに合わせてレビューの埋め込みが可能となります。

タイトル部分 総合星評価の縦横の幅

embedreview-css-stars
.es-widget-rating-container .es-star {height: 36px;width: 36px;}

レビューボックス 枠の角丸と背景の色

embedreview-css-border-radius

.esu-box {border-radius: 30px;border: none;background-color: whitesmoke;}

レビューボックス 星評価の縦横の幅

.es-stars .es-star {
height: 26px;
width: 26px;
}

レビューボックス プロフィール写真/アバターのサイズ

embedreview-css-profile-photo

.esu-avatar {height: 60px;width: 60px;}

レビューボックス レビュアー名のサイズ

embedreview-css-reviwer-name
.esu-username {font-size: 18px;}

レビューボックス レビュ―日のサイズと色

embedreview-css-review-date
.esu-date {font-size: 14px;color: gray;}

レビューボックス テキストのフォント

embedreview-css-text-font
.esu-caption-text {font-size: 16px;}
こちらの回答で解決しましたか?