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

ワードプレス
この記事は約3分で読めます。

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

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

スポンサーリンク

本文下のSNSボタン

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

本文下 パソコン表示(CSS適用前)

本文下 パソコン表示(CSS適用前)

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

本文下 モバイル表示(CSS適用前)

本文下 モバイル表示(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)の中で多用していたので、スタイルの修正に必要なところだけ使ってみました。

ドーナツセット

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

コメント

タイトルとURLをコピーしました