【SWELL】コピペでOK！SNSシェアボタンをメインカラーにするカスタマイズ

2024-10-242024-11-20

こんにちは！SOPHIE DESIGN WORKSのemiです。

SWELLを使い始めて一年以上経ち、カスタマイズもだいぶ慣れてきました。

カスタマイズの技もぼちぼちと溜まってきたので、コピペで簡単に誰でも使えるものから少しずつアウトプットしていこうと思います。

第一弾は、SWELLの記事内にあるSNSシェアボタンの色変更です。

何も手を加えなければ、このようにSWELLのシェアボタンは、それぞれのSNSカラーで表示されます。

でも色数が多くなると、サイトのデザインと合わないと感じることもありますよね。

メインカラーで統一したら、このようになります！（ちなみに当サイトのメインカラーコードは#88a3a9です）

そこで今回は、サイトの統一感を高め、より洗練された印象を与えるために、SNSシェアボタンの色をメインカラーで統一する方法と、お好きな色で統一する方法の2つのCSSをご紹介します。

【準備】メインカラーとSNSシェアボタン表示設定

では下準備として「メインカラーの設定」と「SNSシェアボタンの表示設定」を行いましょう。

メインカラー設定

SWELLメインカラーの設定変更場所

カスタマイズ＞サイト全体設定＞基本カラー＞メインカラー

まずはこちらで基本カラーの変更と確認を行っておいてください。

SWELLでは、サイト全体の基調となる色を「メインカラー」と呼びます。

このメインカラーは、見出しやボタンなど、サイトの重要な要素に反映されます。

SNSシェアボタンの表示設定

カスタマイズ＞投稿・固定ページ＞SNSシェアボタン

お好みの表示設定を行ってください。

SNSシェアボタンをメインカラーで統一するCSS

STEP

カスタマイズから追加CSSを開く

STEP

下記のCSSをコピペする

/* SNSシェアボタンをメインカラーで統一*/
.c-shareBtns__item.-facebook,
.c-shareBtns__item.-twitter-x,
.c-shareBtns__item.-hatebu,
.c-shareBtns__item.-pocket,
.c-shareBtns__item.-pinterest,
.c-shareBtns__item.-line,
.c-shareBtns__item.-copy{
    color: var(--color_main)
}

STEP

SNSシェアボタンがメインカラーに変更されました

SNSシェアボタンを好きなカラーに個別で指定するCSS

STEP

あらかじめ設定するカラーを決めておく

6桁のカラーコードが必要になります。

STEP

カスタマイズから追加CSSを開く

STEP

下記のCSSをコピペする

/* SNSシェアボタン（個別にカラーコード）*/
.c-shareBtns__item.-facebook {
color:#000;
}
.c-shareBtns__item.-twitter-x {
color:#000;
}
.c-shareBtns__item.-hatebu {
color:#000;
}
.c-shareBtns__item.-pocket {
color:#000;
}
.c-shareBtns__item.-pinterest {
color:#000;
}
.c-shareBtns__item.-line {
color:#000
}
.c-shareBtns__item.-copy {
color:#000;
}

STEP

個別にカラーコードを入力する

このCSS内の「color:#000」の「#000」部分にお好みのカラーコードをそれぞれ入力すればOKです。