Cocoonカスタマイズ SNSボタン編

SNSボタンのカスタマイズになります

備忘録として書き残したいと思います。

Cocoon設定 SNSシェアタブ
表示切替の中から4つを選択
ボタンカラー ブランドカラー(白抜き)
カラム数 4列
ロゴ・キャプション配置 ロゴ・キャプション左右

CSS

.sns-buttons a{
	border-radius:0;/*角を直角にする*/
	height:30px;/*ボタンの高さ*/
	margin:0 3px;/*ボタン間*/
}
.sns-share{
	width:60%;/*左に寄せるための幅設定*/
}
.sns-share-buttons {
        flex-wrap: nowrap;/*折り返さない*/
        justify-content:flex-start;/*左詰めで並べる*/
}
.sns-share-buttons a .button-caption{
	font-size:14px;/*文字の大きさ*/
	margin-left:5px/*アイコンと文字の間隔*/
}
.bc-brand-color-white.sns-share .twitter-button,
.bc-brand-color-white.sns-share .facebook-button,
.bc-brand-color-white.sns-share .hatebu-button,
.bc-brand-color-white.sns-share .pocket-button{
	color:#555;/*ボタンのアイコンとフォントの色*/
	border-color:#aaa;/*枠の色*/
}
.sns-share-buttons a{
	font-size:16px;/*アイコンの大きさ*/
}
@media screen and (max-width: 480px){
	.sns-share .sns-buttons a{
		width:25%!important;/*スマホ用の横幅の設定*/
	}
        .sns-share{
	        width:100%!important;/*スマホで見たときは横幅いっぱいに表示する*/
      }
	.sns-share-buttons a .button-caption{
	        display:none;/*スマホで見たときは文字を消す*/
	}
}

以上になります。