SNSシェアボタンを丸くして横1列にするカスタマイズ【Cocoon】

CocoonのSNSシェアボタンはデフォルトでもカワイイのですが、何だか丸くして1列に並べたいと思ったので、調べながらカスタマイズにチャレンジしました。

デフォルトのデザイン

カスタマイズ前の表示は2行です。最初はシェアボタン6個でしたが最終的には5個にしました。

カスタマイズの流れ

実際に私が調べた流れでCSSコードを記載します。少しずつ丸くなり、少しずつ1列に並びます。

キャプション非表示

.button-caption{
  display: none;
}

キャプションとはテキストの部分です。以下のコードはCocoonでロゴ・キャプションの配置を左右にした場合に適用されます。

↓

これでも悪くないですが丸くします。

四角 → 丸くする

.sns-share-buttons a {
  border-radius: 50%; /*丸み*/ 
  margin: 2px; /*ボタン同士の間隔*/ 
}

radiusで角を丸くします。サイトに合わせて数値を調整して下さい。

↓

Cocoonでカラム数を変えても2行以上になってしまいます。何か楕円形だし。ラディウスって四隅を丸くするだけだから、カラムなのかボタン自体の幅を指定しないとダメなんですね。

横に並べる

#main .sns-share a {
width: 35px; /*ボタンの幅*/
height: 35px; /*ボタンの高さ*/
margin-bottom: 0.5em; /*ボタンの下の余白*/
}

高さと幅を指定して、ついでにボタンとその下のコンテンツの幅が狭かったので少し調整。

↓

横に並びましたが間隔が・・

中央に寄せる

.sns-share-buttons {
justify-content: center;
}

シェアボタン同士を仲良く中央に寄せます。

↓

いい感じになりました。

アイコンの大きさを変える

.social-icon {
font-size: 17px;
}

各SNSのアイコンの大きさを変える事が出来ます。※円の大きさではなく、その中のマークの大きさ

CSSコードまとめ

上記を纏めたコードです。コピペの際はバックアップなど安全策をお願いします。

/* sns share */
.button-caption{
  display: none;
}
.sns-share-buttons a {
  border-radius: 50%;
  margin: 5px;
}
#main .sns-share a {
  height: 35px;
  width: 35px;
  margin-bottom: 0.5em;
}
.sns-share-buttons {
  justify-content: center;
}
.social-icon {
  font-size: 15px;
}

右寄せにする方法

本当は見た目的に右寄せにしたかったのですが技術的に出来ませんでした。→ 出来ましたが何か変だったので中央に戻しました。

.sns-share-buttons {
  justify-content: flex-end;
}