スマホで左右にある余白を修正「Xeory Extension」カスタム

このサイトでは現在、バズ部様が配布してくださっている「Xeory Extension」を使用しています。

こちらではソリシティで行っているカスタムを投稿していき、なにがしかのお役に立てばと考えます。

今回はスマホで見ているときに何点か気になる点があったので修正をしていきます。

1. スマホで見る際にできるタイトルや本文など左右にできる余白を修正しています。
2. Xeory Extensionがスマホ（iphone5s）で見ると左右にぶれてしまう

1.スマホで見る際にできるタイトルや本文など左右にできる余白を修正

ちょっとしたCSS修正で収まるだろうとのあたりを付け、どんどんとこなしていきます。

なお前回の投稿で、子テーマ化しているのでほぼスッキリとしているCSSに書き込んでいる状態となります。

wordpresで「Xeory Extension」子テーマ化カスタム

また、今回はスマートフォン（iphone5s）での正常表示を主としたカスタムとなっています。

1-1.タイトル（h1）の修正

こちらはpaddingの値を一つ変更でおさまりました。

body.color01 .post-header {
  padding: 56px 5px 46px;
}

1-2.本文とタイトル（h2）の修正

.post-content, .post-footer {
  padding: 20px 5px;
}
.post-content h2 {
  margin: 60px 0px 32px -18px;
  padding: 16px 5px 16px 10px;
  font-size: 24px;
}

1-3.h3も微調整

ちょっとした見栄えですがスマホに合わせて調整

.post-content h3 {
  padding: 0;
  line-height: 1.4;
}

1-4.listも気になったので修正

リストとしてのulとolのmargin、paddingが気になったので修正しました。

.post-content ul, .post-content ol {
  margin-left: 10px;
  padding: 0 0 0 10px;
}

Xeory Extensionがスマホ（iphone5s）で見ると左右にぶれてしまう

iphone5sで見ていると左右へのブレが出るので修正をしていきます。

原因を見つけることができたのはGoogle Dvelopersのツール。ページスピードのみにあらず、様々なことがわかるありがたいしろものです。

こちらで調べた結果、サイトのサイズに合わせて見た目はそろっている「シェアボタン」が、見えないカタチで枠に収まっていないということがわかりました。

今回はシェアボタンのwidthを調整してゆとりを持たせることにより回避することができました。

CSSでの調整が以下となります。

.bzb-sns-btn li.bzb-facebook {
  width: 108px;
}
.bzb-sns-btn li.bzb-twitter {
  width: 103px;
}
.bzb-sns-btn li.bzb-googleplus {
  width: 75px;
}