Simplicityでは、ヘッダー（画面右上）や記事下に各SNSのフォローボタンを表示することができます。
これらのボタンはデフォルトでは角が丸い四角形です。
今回はこのフォローボタンを丸型に変更する方法を紹介します。
CSSのコピー＆ペーストだけで、簡単に変更することができます。
SNSシェアボタンのカスタマイズはこちら→SimplicityのSNSシェアボタンを、よりシンプルにカスタマイズする方法
→Simplicity2の子テーマ
SimplicityのSNSフォローボタンを丸くする方法
子テーマ（Simplicity2 child）のスタイルシート (style.css）を開き、以下のコードを貼り付けて下さい。
スタイルシートはwordpress管理画面左側にある「外観」→「テーマの編集」、またはFTPソフトでサーバからダウンロードして編集することができます。
僕はこれくらいの軽い編集なら、wordpressの管理画面内でやってしまいます。
ul.snsp li a span{
border-radius: 17px;
}
border-radiusは、width,heightの半分以上の値を設定することで円形になります。
Simplicityのフォローボタンはwidth:33px、height:33pxになっているので、17px以上にすれば円になります。
逆に、16px以下にすると角丸の四角になります。
このborder-radiusは上下左右のそれぞれに指定することができるので、応用すれば様々な図形を作ることができます。
フォローボタンの色を変更する方法
同じようにスタイルシートを編集することで、フォローボタンの色を変更することもできます。
そしてスタイルシートにコードを追記すればOKです。
ul.snsp li a span{
background-color: #c8c8c8;
}#c8c8c8を指定するとこのような色になります。
僕は色を探したり決めたりするときに、よくColor Hex を使っています。
また、フォローボタンの形と色を両方変更する場合は、以下のようにまとめて記述して下さい。
ul.snsp li a span{
border-radius: 17px;
background-color: #c8c8c8;
}CSSが反映されているか確認する
Google Chromeで説明します（windows）。
スタイルシートを編集した後、普通にページを表示しても変更がされていない場合があります。
Google Chrome（ブラウザ）の「キャッシュ」が残っているからです。
その場合は、キャッシュを削除してページをリロードします。
キーボードのCtrl+F5を押すとリロードすることができます。
Ctrl+F5でも反映されない場合はデベロッパーツールを開きます。
Google Chromeの画面上で右クリック→「検証」をクリックしてください（またはF12キーを押す）。
続いて、デベロッパーツールを開いた状態で、Google Chromeの画面上部にあるリロードボタンを右クリック。
「キャッシュの消去とハード再読み込み」をクリックすれば、完了です。
これで最新の変更が反映されるはずです。
Comments