SNSボタンを丸くする（失敗あり）ワードプレス

自分のブログへの集客やフォロワーを増やすために効果がある「SNSシェア・フォローボタン」

たまに、丸くカスタマイズされてるのを見かけますね。

僕自身はデフォルトの四角くて大きいボタンを使っていて、特に気にしていませんでしたが、何回も丸いボタンを目にするうちに、ふと思いました。

まずは、確認

まずは、自分の現在のボタン表示がどうなってるのか確認しましょう。

テーマ「Cocoon」の場合では、

を確認すると、現時点の表示場所（トップ・ボトム）、ボタンのカラー、列の数、SNSの種類などが分かります。



僕は、ボトム部分のみ表示させてます。

チャレンジ開始

【追加CSS】部分に、コードを入力してカスタマイズします。

まで行き、下の空欄にコピペなどでコードを記入しましょう。



下のコードは「ボトムのフォローボタン」用です。

/************************************
** フォローボタン 丸くする
************************************/

/*フォローボタンの枠組み*/
.sns-follow.sf-bottom .sns-follow-buttons {
	justify-content: center; /*中央に寄せる*/
}

/*フォローボタンのリンク*/
#main .sns-follow.sf-bottom .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 6px; /*右の間隔*/
	margin-left: 6px; /*左の間隔*/
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンサイズ*/
}

記入したら、上にある〔公開ボタン〕を「ポチッ」と押すと保存、反映されます。

これで、無事にボタンが丸くなったら

失敗の連続

原因その１：サーバーの【WAF設定】 　「ON ⇔ OFF」の切替え が必要だった

原因その２：記入した「CSSコード」が間違っていた


その他、想定される原因については下の記事にもまとめてあります。

解決方法を探す

サーバーの【WAF設定】については「ON ⇔ OFF」の切替えで解決。

僕自身の環境は【コノハウイング】のサーバーで【コクーン】を使っていますので、以下の操作をしました。

【WAF設定】の「ON ⇔ OFF」切替えについてのやり方が分かったので、早速コードを記入して保存、反映させました。

「コレで、いよいよ丸くなる！」



しかし、コードが間違っていたために、現れたのは「正方形！」

その後、色々と調べながら修正していたら「#main」という部分が抜けていたことに気づきました。

そこで「#main」を追加して〔公開ボタン〕を押すと、やっと丸ボタンになりました～。

シェアボタン（トップ・ボトム）については、下のコードを参考にしてください。

/************************************
** トップシェアボタン 丸くする
************************************/

/*トップシェアボタンの枠組み*/
.sns-share.ss-top .sns-share-buttons {
	justify-content: center; /*中央に寄せる*/
}

/*トップシェアボタンのリンク*/
#main .sns-share.ss-top .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 6px; /*右の間隔*/
	margin-left: 6px; /*左の間隔*/
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンサイズ*/
}

/*トップシェアボタンのキャプション*/
.sns-share.ss-top .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

/************************************
** ボトムシェアボタン 丸くする
************************************/

/*ボトムシェアボタンの枠組み*/
.sns-share.ss-bottom .sns-share-buttons {
	justify-content: center; /*中央に寄せる*/
}

/*ボトムシェアボタンのリンク*/
#main .sns-share.ss-bottom .sns-buttons a {
	width: 40px; /*横幅*/
	height: 40px; /*高さ*/
	margin-right: 6px; /*右の間隔*/
	margin-left: 6px; /*左の間隔*/
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンサイズ*/
}

/*ボトムシェアボタンのキャプション*/
.sns-share.ss-bottom .sns-buttons a .button-caption {
	display: none; /*非表示*/
}

アイコンサイズや左右の間隔は、数字を変えると見た目が変わりますので、お好みで調整してください。

まとめ

時間がかかってしまいましたが、なんとか丸ボタンになりました。

見た目がスッキリして、記事が読みやすくなったような気がします。