SANGOのSNSボタンをカスタマイズでシンプルな丸にする

SANGOのSNSボタンを丸くしてよりシンプルに、スタイリッシュにしたい！

というわけで、カスタマイズしてみました。

カスタマイズ前とカスタマイズ後の比較

元のSNSボタンと比較するとこんな感じ。

カスタマイズ前は、角丸の四角いボタンですね。

ボタンの背景が白く、ボックスの影もついています。SNSボタンエリアの背景は薄いブルーグレー。

今回のカスタマイズではとことんシンプルにしました。ボタンの背景色を各SNSボタンの色にし、アイコン自体の色を白に。ボックスの影を消し、SNSボタンエリアの背景も白くしました。

ついでに色違いも作ってみました。SANGO感を弱めて色を濃くしてます。

では、詳しい手順を見ていきましょう。

SNSボタンをシンプルな丸にする

手順1: CSSを記述

子テーマのstyle.cssに以下のCSSを記述します。

コード

/*記事下のSNSボタン*/
/*背景を白くする*/
.footer-contents .sns-dif ul {
	background-color: #fff;
}
/*ボタンを丸くする*/
.footer-contents .sns-btn__item a {
	border-radius: 50%;
}
/*ボタンの影を消す*/
.sns-dif ul li a {
	box-shadow: none;
}
/*各ボタンの色を変える*/
/*twitter*/
.footer-contents .tw a {
	color: #fff; /*アイコンの色を白くする*/
	background-color: #3ab4ff; /*アイコンの背景に色をつける*/
}
/*Facebook*/
.footer-contents .fb a {
	color: #fff;
	background-color: #3b8df7;
}
/*はてなブログ*/
.footer-contents .hatebu a {
	color: #fff;
	background-color: #45b5f7;
}
/*LINE*/
.footer-contents .line a {
	color: #fff;
	background-color: #59d869;
}
/*POCKET*/
.footer-contents .pkt a {
	color: #fff;
	background-color: #ff7b7b;
}

手順2: 保存してキャッシュを消去

CSSを保存した後、ブラウザのキャッシュを消去してください。

ブラウザのキャッシュ消去についてはサルワカさんの以下の記事が参考になります。

ChromeでCSSが反映されない？キャッシュ消去で対処

手順3: デザインが無事反映！

キャッシュ消去後、リロードすると無事に反映されているのが確認できます。

お疲れ様でした！

ボタンの色を濃くしたバージョン

色を濃くしたバージョンのCSSも載せておきますね。

コード

/*twitter*/
.footer-contents .tw a {
	color: #fff; /*アイコンの色を白くする*/
	background-color: #55ACEE; /*アイコンの背景に色をつける*/
}
/*Facebook*/
.footer-contents .fb a {
	color: #fff;
	background-color: #3C5A99;
}
/*はてなブログ*/
.footer-contents .hatebu a {
	color: #fff;
	background-color: #3C7DD1;
}
/*LINE*/
.footer-contents .line a {
	color: #fff;
	background-color: #00B901;
}
/*POCKET*/
.footer-contents .pkt a {
	color: #fff;
	background-color: #EE4257;
}