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

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

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

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

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

こちらもお好みの色を設定してみてください。

ようやく完成

Comment

タイトルとURLをコピーしました