EmbedSocialのウィジェットは、管理画面から設定を変更することができるのに加えて、カスタムCSSを追加して自身でレイアウトをカスタマイズすることができます。その中からよく使うカスタムCSS一覧を、コピペで使えるコードとともにご紹介いたします。
カスタムCSSを追加することで、予め用意されたレイアウトをサイトのデザインに合わせてカスタマイズすることができます。ここでは、元々用意されていた「Three column(3カラム)」というレイアウトを、4カラムのレイアウトに変更します。
1. ウィジェットの編集画面より「デザイン」のタブを開き、「カスタムCSS」を確認します。
2. 検証ツールを使って該当のクラス名を調べ、widthを33%から25%へと変更してみます。
3. 先ほど変更した値をクラス名ごと、コピー&ペーストで最初に確認した「カスタムCSS」という項目の中に貼り付け「保存」をクリックすれば設定完了です。
詳細な手順は、こちらをご確認くださいませ。
ここからは、カスタムCSSの使用例を実際のコードともにご紹介いたします。
※設定中のレイアウトによってクラス名などが一部異なり、下記のコードをコピー&ペーストしても変更が反映されない場合があります。その場合、上記手順を参考にクラス名を適宜お調べくださいませ。
サイズは適宜ご変更ください。
カラーコードは、こちらの外部サイトなどを参考に適宜ご変更ください。
サイズは適宜ご変更ください。
カラーコードは、こちらの外部サイトなどを参考に適宜ご変更ください。
カラーコードは、こちらの外部サイトなどを参考に適宜ご変更ください。
カラーコードは、こちらの外部サイトなどを参考に適宜ご変更ください。
以上、カスタムCSSの追加方法・参考例でした!ご参考になれば幸いです。
EmbedSocialに、また新たにユニークなレイアウトが追加れました!2021年一月のアップデート…
無料で利用することができることができ、SEOやSNSでの施策と比べて直接的な集客に繋げやすいことから…
いつもEmbedSocialをご利用いただきありがとうございます。 2021年4月からの総額表示の義…
SNSを使った施策の一つに「ハッシュタグキャンペーン」があります。「#(ハッシュタグ)」をつけた投稿…