💡
Wordpressテーマ「Cocoon」のSNSアイコンを“丸”型にする方法
はじめに
Wordpress無料テーマ「Cocoon」のSNSアイコンを“丸”型にする方法をシェアします。
SNSアイコンとは、シェア用やフォロー用に設置されるX(旧Twitter)投稿・フォローリンクなどのことです。
SNSアイコンを“丸”型にする方法
やり方は、『Cocoon便利帳』さんを参考にしました。
設定メニューの部分のWordpressの仕様が変わっていましたので、以下に記載します。
代表的なやり方は以下に引用させていただきますが、詳細は『Cocoon便利帳』さんのページをご覧ください。
変更の4ステップ
-
「外観>カスタマイズ」をクリック。
※「外観>テーマ」で表示されたテーマ一覧から「カスタマイズ」ボタンをクリックでもOKです。
-
左カラムの「追加CSS」をクリック。
-
コードを貼り付け。
-
貼り付けるコードは以下
引用元:『Cocoon便利帳』| Cocoon|SNS(シェア・フォロー)ボタンを丸くする
SNS ボタンをまとめて丸くする
/************************************
** SNS ボタンをまとめて丸くする
************************************/
/*シェア・フォローボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons,
.sns-share.ss-bottom .sns-share-buttons,
.sns-follow.sf-bottom .sns-follow-buttons,
.sns-follow.sf-widget .sns-follow-buttons {
justify-content: center; /*中央に寄せる*/
flex-wrap: wrap; /*折り返す*/
}
/*シェア・フォローボタンのリンク*/
.sns-share.ss-top .sns-buttons a,
.sns-share.ss-bottom .sns-buttons a,
.sns-follow.sf-bottom .sns-buttons a,
.sns-follow.sf-widget .sns-buttons a {
width: 40px; /*横幅*/
height: 40px; /*高さ*/
margin-right: 4px; /*右側の余白*/
margin-left: 4px; /*左側の余白*/
border-radius: 50%; /*丸み*/
}
/*プロフィールウィジェットのリンク*/
.sns-follow.sf-profile .sns-buttons a {
border-radius: 50%; /*丸み*/
}
/*シェアボタンのアイコン*/
.sns-share.ss-top .sns-buttons a .social-icon,
.sns-share.ss-bottom .sns-buttons a .social-icon {
font-size: 18px; /*アイコンの大きさ*/
}
/*フォローボタンのアイコン*/
.sns-follow.sf-bottom .sns-follow-buttons .follow-button,
.sns-follow.sf-widget .sns-follow-buttons .follow-button {
font-size: 24px; /*アイコンの大きさ*/
}
/*シェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption,
.sns-share.ss-bottom .sns-buttons a .button-caption {
display: none; /*非表示*/
}
/*シェア・フォローボタンのシェア数*/
.sns-share.ss-top .sns-buttons a .share-count,
.sns-share.ss-bottom .sns-buttons a .share-count,
.sns-follow.sf-bottom .sns-buttons a .follow-count,
.sns-follow.sf-widget .sns-buttons a .follow-count {
right: -2px; /*右側からの距離*/
bottom: -2px; /*下側からの距離*/
padding: 2px; /*内側の余白*/
font-size: 10px; /*文字の大きさ*/
border: solid 1px; /*線*/
border-radius: 3px; /*丸み*/
background-color: inherit; /*背景色*/
}
/*シェア数の表示が必要ないシェア・フォローボタン*/
.sns-share.ss-top .sns-buttons a .share-count:empty,
.sns-share.ss-bottom .sns-buttons a .share-count:empty,
.sns-follow.sf-bottom .sns-buttons a .follow-count:empty,
.sns-follow.sf-widget .sns-buttons a .follow-count:empty {
padding: 0; /*内側の余白*/
border: 0; /*線*/
}
おわりに
以上になります。
丸型にするとスッキリしました!
Discussion