メインコンテンツにスキップ
EmbedReview-カスタムCSS追加例の一覧

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

Yuka Isobe avatar
対応者:Yuka Isobe
1年以上前に更新

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

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

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;
}

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

embedreview-css-review-box-star

.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;
}

こちらの回答で解決しましたか?