ボクは 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)の中で多用していたので、スタイルの修正に必要なところだけ使ってみました。

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