EmbedSocialで使えるカスタムCSS20選！

• ＃EmbedSocial活用

EmbedSocialのウィジェットは、管理画面から設定を変更することができるのに加えて、カスタムCSSを追加して自身でレイアウトをカスタマイズすることができます。その中からよく使うカスタムCSS一覧を、コピペで使えるコードとともにご紹介いたします。

目次

1. カスタムCSSを追加してレイアウトを変更する方法
2. フィード機能で使えるカスタムCSS一覧

カスタムCSSを追加してレイアウトを変更する方法

カスタムCSSを追加することで、予め用意されたレイアウトをサイトのデザインに合わせてカスタマイズすることができます。ここでは、元々用意されていた「Three column（3カラム）」というレイアウトを、4カラムのレイアウトに変更します。

1. ウィジェットの編集画面より「デザイン」のタブを開き、「カスタムCSS」を確認します。

2. 検証ツールを使って該当のクラス名を調べ、widthを33%から25%へと変更してみます。

3. 先ほど変更した値をクラス名ごと、コピー＆ペーストで最初に確認した「カスタムCSS」という項目の中に貼り付け「保存」をクリックすれば設定完了です。

詳細な手順は、こちらをご確認くださいませ。

フィード機能で使えるカスタムCSS一覧

ここからは、カスタムCSSの使用例を実際のコードともにご紹介いたします。

※設定中のレイアウトによってクラス名などが一部異なり、下記のコードをコピー＆ペーストしても変更が反映されない場合があります。その場合、上記手順を参考にクラス名を適宜お調べくださいませ。

ヘッダーを全て非表示にする

「フォローする」ボタンのサイズを変更する

サイズは適宜ご変更ください。

「フォローする」ボタンの色を変更する

カラーコードは、こちらの外部サイトなどを参考に適宜ご変更ください。

「フォローする」ボタンを白抜きに変更する

「フォローする」ボタンのテキストサイズを変更する

「もっと読み込む」ボタンを非表示にする

「もっと読み込む」ボタンのサイズを変更する

サイズは適宜ご変更ください。

「もっと読み込む」ボタンの色を変更する

カラーコードは、こちらの外部サイトなどを参考に適宜ご変更ください。

「もっと読み込む」ボタンを白抜きに変更する

カラーコードは、こちらの外部サイトなどを参考に適宜ご変更ください。

各投稿の枠の色を変更する

カラーコードは、こちらの外部サイトなどを参考に適宜ご変更ください。

各投稿の枠を破線で表示させる

各投稿の枠を点線で表示させる

各投稿の余白の幅を変更する

各投稿のレイアウトの角を丸くする（Grid レイアウト）

一列に表示させるカラム数を変更する（Grid レイアウト）

ブラウザのサイズに応じてカラム数を変更する（Grid レイアウト）

以上、カスタムCSSの追加方法・参考例でした！ご参考になれば幸いです。