SNSシェアボタンを丸くカスタマイズする方法をご紹介します。
変更前と変更後のデザイン
変更前はこんなかんじ。
![](https://micholog.com/wp-content/uploads/2023/06/cocoon_snsシェアボタン-1-800x98.png)
そして今回カスタマイズした後のデザインがこちらです。
![](https://micholog.com/wp-content/uploads/2023/06/cocoon_snsシェアボタン_2.png)
キャプションを非表示にしてアイコンのみにし、丸型にしています。
Cocoon設定
Cocoon設定 > SNSシェア では以下のように設定します。
![](https://micholog.com/wp-content/uploads/2023/06/cocoon_snsシェア設定.png)
CSSを追加してカスタマイズ
外観 > テーマファイルエディタ > Cocoon Child: スタイルシート (style.css)
/*必要ならばここにコードを書く*/
の下へコードを追加します。
![](https://micholog.com/wp-content/uploads/2023/06/cocoon_styleシート.png)
/* SNSシェアボタン */
.button-caption {
display: none; /* キャプション非表示 */
}
.sns-share-buttons a {
border-radius: 50%; /* 丸くする */
margin: 10px; /* ボタンの回りに余白をつける */
}
#main .sns-share a {
width: 40px; /* ボタンの幅 */
height: 40px; /* ボタンの高さ */
}
.sns-share-buttons {
justify-content: center; /* 中央寄せ */
}
コードが追加できたら
『ファイルを更新』ボタンを押してカスタマイズ完了です。
コメント