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