【ワードプレス】コクーンのSNSボタンがずれていたので、整列させました

ボクは WordPress（ワードプレス）にテーマ「Cocoon（コクーン）」を導入しています。

SNSボタンの配置がずれていて気になったので、直してみました。
なお SNSボタンの機能としては、何も問題がありません。

本文下のSNSボタン

「シェアする」ボタンと「フォローする」ボタンは、同じ SNS に関するものです。
しかしスタイル定義（CSS）は別のものを適用しているようです。

パソコンで表示したときには、「フォローする」ボタンの方が左右にすこしはみ出しています。

モバイルで表示したときには、「フォローする」ボタンの方が横に長くなりすぎています。
もしかすると「フォローする」ボタンが大事なのかも知れません。

ただ見た目が揃（そろ）っていないことには、違和感を覚えます。

ボタン配置を整える

パソコン表示でもモバイル表示でも、SNSのシェアボタンとフォローボタンの並び方が揃（そろ）ってなかったので、スタイル定義（CSS）で調整しておきました。

ボタンカラーに関係なく有効な、SNSボタンのスタイル定義です。

/* SNSボタン */
.sns-share-buttons,
.sns-follow-buttons {
  justify-content: space-around;
}

.sns-share-buttons a,
.sns-follow-buttons a {
  margin-right: 0;
  width: 32.5%;
}
@media screen and (max-width: 834px) {
  .sns-share-buttons a,
  .sns-follow-buttons a {
    width: 32%;
  }
}

修正内容：

• ボタンの周囲のすき間を均等にする。
• パソコンとモバイルでのボタンの幅を調整する。

あとがき

これまでスタイル定義（CSS）のフレックスボックス（display: flex）は、対応していないブラウザのことを考えて、使わないようにしていました。

しかしテーマ「Cocoon」のスタイル定義（CSS）の中で多用していたので、スタイルの修正に必要なところだけ使ってみました。

使ってみると、フレックスボックスはやっぱり便利そうです。
案外良さそうなので、もしかするとこれからは積極的に使っていくかも知れません。