【SWELL】SNSシェアボタンのカラーを変更する方法

【SWELL】SNSシェアボタンのカラーを変更する方法

SWELLのSNSシェアボタンのカラーを変更する方法をまとめておきます。

目次

CSSでカラーを変更する

CSSを追加すると、下記3箇所のシェアボタンのカラーが変更されます。

CSSでカラーを変更した時に影響を受けるシェアボタン
CSSの影響を受けるシェアボタン
  • 記事上部
  • 記事下部
  • 画面端

一括変更

SNSシェアボタンのカラーを一括変更したい時は、下記CSSを追加します(下記CSSはメインカラーに変更)。

.c-shareBtns__item.-facebook,
.c-shareBtns__item.-twitter,
.c-shareBtns__item.-hatebu,
.c-shareBtns__item.-pocket,
.c-shareBtns__item.-pinterest,
.c-shareBtns__item.-line,
.c-shareBtns__item.-copy {
    color: var(--color_main);
}

var(--color_main)の部分は、お好みで任意のカラーコードに置き換えて使って下さい。

個別変更

カラーを変更したいシェアボタンのCSSを追加して、任意のカラーコードを指定します。

/* Facebook */
.c-shareBtns__item.-facebook {
    color: #000000;
}
/* X(旧Twitter) */
.c-shareBtns__item.-twitter {
    color: #000000;
}
/* はてなブックマーク */
.c-shareBtns__item.-hatebu {
    color: #000000;
}
/* Poket */
.c-shareBtns__item.-pocket {
    color: #000000;
}
/* Pinterest */
.c-shareBtns__item.-pinterest {
    color: #000000;
}
/* LINE */
.c-shareBtns__item.-line {
    color: #000000;
}
/* URLコピー */
.c-shareBtns__item.-copy {
    color: #000000;
}

#000000の部分は、任意でお好みのカラーコードに置き換えて使って下さい。

SNSシェアボタンの設定

SNSシェアボタンの設定は、カスタマイザーから変更できます。

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

SNSシェアボタンの設定

ここでは、SNSシェアボタンの表示有無、デザイン、記事下部シェアボタンのメッセージを変更できます。

「SNSシェアボタン」の設定方法 | WordPressテーマ SWELL

最後に

CSSを追加するだけで、SNSシェアボタンのカラーは簡単に変更できます。

デフォルトのカラーから変更したい時は、この記事の内容を参考にしてみて下さい。

よかったらシェアしてね!

- シンプルなのに、高機能 -

swell_pr_banner

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、SWELLは日々進化しています。

ブロックエディター完全対応のWordPressテーマ。

今日の一言

2023年11月3日にリリースされたコアアップデートが11月29日にロールアウトしました。長かっただけで特に大きな変化はありません。10月で大きく減ったアクセスは少し戻ったかな!?程度です(恐らく季節需要の高い記事のアクセスでそう見えるだけ)。とりあえずやる事は変わらないので、次のコアアップデートに向けてコツコツ記事を書いてリライトするだけです。

コメント

コメントする

目次