EmbedSocialウィジェットのレイアウトはカスタムCSSを追加することで、要素の色や間隔・配置などをWEBサイトのデザインに合わせて調整することができます。
カスタムCSSの追加方法
ここでは、元々用意されていた「Three column（3カラム）」というレイアウトを、4カラムのレイアウトに変更します。
1. ウィジェットの編集画面より「CSS」のタブを開きます。
2. 右クリックをして「検証」をクリックします。
3. 矢印ボタンをクリックし、レイアウトを変更したい項目にカーソルを合わせます。
4. ここでは、カラム数を4つに変更させるために、”col-xs-8″というクラスのwidthを、「検証」で開いた画面の中で直接33%から25%へと変更します。
5. 先ほど変更した値をクラス名ごと、コピー＆ペーストで最初に確認した「カスタムCSS」という項目の中に貼り付け「CSSを保存」をクリックします。
6. 以上で設定完了です。
代表的なカスタム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;
}
SNSロゴの透過度合い
.esu-logo path {
fill-opacity: #000000;
}
キャプションのフォントサイズ変更
.esu-caption-text {
font-size: 16px;
-webkit-line-clamp: 4;
}
“See more” のカラー変更
.esu-text-toggle {
font-size: 16px;
text-decoration:underline;
color: #0d0def;
}