EmbedReview-カスタムCSS追加例の一覧

最終更新日 – 2023-03-03

EmbedSocialウィジェットのレイアウトはカスタムCSSを追加することで、要素の色や間隔・配置などをWEBサイトのデザインに合わせて調整することができます。（設定方法はこちら）

本記事はユーザー様からご質問の多い代表的なカスタムCSSの例をご紹介するものです。CSSの追加・調整は、EmbedSocial通常サポートの範囲外となり、万が一表示崩れ等の発生した際に責任は負いかねますので、表示確認は各ユーザー様自身でお願いいたします。本ページに記載のないCSSや細かな調整を希望される場合などには、WEBサイトの管理者様へお問い合わせくださいませ。

レビュー機能

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

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

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

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

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

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

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

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

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

.esu-username {
font-size: 18px;
}

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

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

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

.esu-caption-text {
font-size: 16px;
}