最終更新日 2021/02/08 投稿日 2020/10/08

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

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の追加方法・参考例でした!ご参考になれば幸いです。

関連記事

social-media-marketing-campaigns
12月 05, 2022

海外有名企業ソーシャルメディアマーケティ…

多くの企業がSNSを活用している今、様々なソーシャルメディアマーケティングキャンペーンが展開されてい...

social-media-listening
11月 25, 2022

ソーシャルリスニングを始めるためのステッ…

マーケティングに関わる多くの担当者が様々なデータに興味を持っていることはご存知のことと思います。良い...

hashtag-campaign-global-examples
11月 19, 2022

ハッシュタグキャンペーン海外の成功事例1…

InstagramやTwitterの浸透に伴い、ハッシュタグキャンペーンはSNSマーケティング担当者...

11月 14, 2022

福井新聞社とEmbedSocial Ja…

株式会社福井新聞社(本社:福井県福井市大和田2‐801 代表取締役社長・吉田真士)とInstagra...