SNSフォローボタンをシンプルにカスタマイズ【Cocoon】

CocoonのSNSフォローボタンをシンプルにカスタマイズ。

以前SNSシェアボタンのカスタマイズをやった事があるので「まぁ同じ感じだろうな〜」と舐めていましたが、苦戦＆苦戦で結構時間が掛かりました。

デフォルトのデザイン

カスタマイズしたデザイン

カスタマイズコードまとめ

コピペで上手くいかない場合もあるので、以降の解説も参考にしてください。念のためバックアップもお忘れなく。

/*snsフォロー*/
.sns-follow-buttons a {
  background: none !important;
  border-radius: 50%;
  border: gray 1px solid;
  color: gray;
  width: 40px !important;
  height: 40px;
  margin: 0 15px;
  font-size: 30px;
}
.sns-follow-buttons a:last-child{
  margin-right: 3%;
}
.sns-follow-buttons {
  justify-content: center !important;
}
.sns-follow-buttons a:hover{
  color: pink;
}

カスタマイズの進め方

.sns-follow {
  border: red 1px solid;
  background: yellow;
}

最初は何をどうやっても変化が起きなかったので、まずSNSフォロー全体のセレクタ名称を特定して枠線と背景に目立つ色を付けました。

この状態でカスタマイズをすると、変化がより見やすくなります。カスタマイズ終了後にこのコードは削除します。

↓

ボタンを丸くする

.sns-follow-buttons a {
  background: none !important;
  border-radius: 50%;
  border: gray 1px solid;
  color: gray;
  width: 50px !important;
  height: 50px;
  margin: 0 10px;
  font-size: 35px;
}

フォローボタンを円形にして、色は全てグレーに統一しました。

↓

background

デフォルトでは「twitterは水色」「YouTubeは赤」など、それぞれのブランドカラーになっています。その指令を無しにしました。

width と height

それぞれを同じ値にすることで綺麗な円形になります。大きくする場合は「60」小さくする場合は「40」などお好みの大きさを探してみてください。

font-size

ここで言うフォントサイズは丸の中のロゴマークの大きさです。円の大きさに合わせて調整してください。

少し右寄りなので位置調整

.sns-follow-buttons a:last-child{
  margin-right: 3%;
}

前項の画素を見て頂くと分かりやすいですが、よく見ると少し右に寄っていませんか？

marginとかpaddingを色々と試すも思うようにいかず・・ここが一番苦労しました。Cocoonのコードを調べてみると、一番最後のボタンにだけ適用されているmarginがあったので、その部分をカスタマイズしました。

↓

フォローボタンを中央寄せに

.sns-follow-buttons {
  justify-content: center !important;
}

フォローボタンをセンターに集めました。

↓

justify-content

デフォルトは[space-between]になっていて、全体の幅に対してボタンが等間隔に配置されます。今回は中央に寄せました。

マウスホバー時にアイコンが消える

.sns-follow-buttons a:hover{
  color: pink;
}

「よし、完成だ〜」と思ってスマホでボタンをタップしてみたら、ロゴマークが消えてしまいました。。どうやらマウスホバー時にロゴマークの色が白に変わる様でした。

マウスホバー時のアイコンの色も設定してみてください。

ようやく完成