この記事では、EmbedFeedの埋め込みウィジェットに適用できる代表的なCSSコードをご紹介します。
ウィジェットの見た目をより自由にカスタマイズしたい場合に役立ちます。設定画面の左下にある「Custom CSS」タブから、必要なコードを直接追加できます。
各用途ごとに利用できるカスタムCSSコードを以下にまとめました。必要に応じてウィジェットの「Custom CSS」タブに貼り付けてご活用ください。
ヘッダーロゴのサイズ調整
.es-widget-header-image {
border: 3px dashed purple;
height: 100px;
width: 100px;
}
カードの枠線の太さ（削除）・背景色変更
.esu-box {
border-radius: 30px;
border: none;
background-color: whitesmoke;
}
カードのユーザネーム表示サイズ
.esu-username {
font-size: 18px;
text-transform: capitelize;
}
カードの日付表示サイズ・カラー
.esu-date {
font-size: 16px;
color: #696b70;
}
カード画像の角丸サイズ
.esu-media-box {
border-radius: 30px;
}
再生アイコンの透明度
.esu-play-icon circle {
fill-opacity: 1;
}
カード内ロゴの透明度
.esu-logo path {fill-opacity: #000000;}
キャプションのフォントサイズ
.esu-caption-text {
font-size: 16px;
-webkit-line-clamp: 4;
}
カード内「もっと見る」のフォントサイズ・色
.esu-text-toggle {
font-size: 16px;
text-decoration: underline;
color: #0d0def;
}
