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

関連記事

9月 21, 2021

【Googleマイビジネス】インサイト機…

無料で口コミや店舗写真、最新情報の掲出などにも活用することができ、今ではあらゆる規模のビジネスで欠か…

9月 07, 2021

【2021年9月更新】最新ハッシュタグキ…

全世界15万ユーザー 全国400社以上の導入実績のハッシュタグキャンペーンツール Embedsoci…

9月 06, 2021

UGCツールに『EmbedSocial』…

ソーシャルメディアの普及により、お店を選ぶ際にWEBサイトでの情報だけでなくSNSの口コミを参考にす…

8月 18, 2021

Googleの口コミを増やすアイデアとそ…

国内でも月間4,000万人以上が利用し、目的地を探す地図アプリから行きたいお店のレビューを探す口コミ…