SWELLのシェアボタンの色を変更する
SWELLでは記事上部、記事下部、サイド固定の３箇所でシェアボタンを表示可能です。デフォルトでは各SNSのブランドカラーが使用されています。
これを任意の色に変更します。
TOC
カラーを変更するために追加するCSS
一括指定
一括でサイトで指定しているテーマカラーに変更する場合のCSSはこちらです。
/* SNSアイコンのカラー調整（一括） */
.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);
}個別指定
個別でカラー指定する場合のCSSはこちらです。
/* SNSアイコンのカラー調整（個別） */
.c-shareBtns__item.-facebook{
color: #○○○○○○;
}
.c-shareBtns__item.-twitter{
color: #○○○○○○;
}
.c-shareBtns__item.-hatebu{
color: #○○○○○○;
}
.c-shareBtns__item.-pocket{
color: #○○○○○○;
}
.c-shareBtns__item.-pinterest{
color: #○○○○○○;
}
.c-shareBtns__item.-line{
color: #○○○○○○;
}
.c-shareBtns__item.-copy{
color: #○○○○○○;
}#○○○○○○の部分を任意のカラーにすることで個別指定ができます。
SNSアイコンの枠線の太さ
このサイトではシェアボタンのデザインを「ボックス」にしているので枠線があります。その枠線の太さも調整しています。
/* SNSアイコンの枠線の太さ */
.c-shareBtns__btn{
border:solid 2px;
border-radius:3px;
}
＼ SWELLのカスタマイズ ／
WordPressテーマ「SWELL」を
使用したカスタマイズ事例集
