当サイトではSEOに強いWordPressテンプレート(テーマ)の「賢威」のバージョン7(スタンダード版)を利用しています。

賢威7のデフォルトの横幅が1200pxになっているのですが、横幅をもう少し狭いデザインにしたかったので、横幅を960pxにしてみました。

ところが、スマホ(iPhone5s)でチェックしてみたところ、冒頭の画像のように横幅が伸びていて崩れてしまいました

賢威7の横幅を変更する際の問題と原因、解決方法についてご紹介します。

※追記
スマホで崩れた原因は、指定した内容が足りなかったようです。以下の内容だと子テーマのみのCSS追記で対応可能でしたので、こちらをご覧ください。
関連記事賢威7で1カラムの横幅を変更する方法

CSSをどのように変更したのか?

まず、本サイトでは賢威の子テーマを利用しています。

関連記事賢威7をカスタマイズする際に子テーマを設置する方法

親テーマにある「base.css」を子テーマフォルダにコピーし、子テーマの「base.css」の中身を一旦全て削除し、以下のようにしました。

@charset "UTF-8";
.site-header-in,
.global-nav-in,
.main-image-in,
.main-image-in-text,
.main-image-in-text-cont,
.main-body-in,
.site-footer-in{
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 960px; /*サイトの横幅。これより小さければレスポンシブ*/
margin: auto;
}

これで、子テーマディレクトリに「base.css」をアップロードすれば、サイトの横幅が960pxになったのですが、前述のようにスマホ(iPhone5s)でチェックすると冒頭の画像のように、コンテンツが画面の横幅に納まらず、横に長く伸びてしまいます。

解決方法は「親テーマのbase.cssで横幅を変更」する

子テーマでも、いろいろいじくれば期待する表示にできるかもしれませんが、面倒だったので、子テーマの「base.css」の1行目にある「@charset “UTF-8”;」以外は削除し、親テーマの「base.css」にある横幅関連の部分のみ、以下のように変更しました。

親テーマの「base.css」変更前

.site-header-in,
.global-nav-in,
.main-image-in,
.main-image-in-text,
.main-image-in-text-cont,
.main-body-in,
.site-footer-in{
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 1200px; /*サイトの横幅。これより小さければレスポンシブ*/
margin: auto;
}

親テーマの「base.css」変更後

.site-header-in,
.global-nav-in,
.main-image-in,
.main-image-in-text,
.main-image-in-text-cont,
.main-body-in,
.site-footer-in{
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 960px; /*サイトの横幅。これより小さければレスポンシブ*/
margin: auto;
}

「width」を「1200px」から「960px」に変更しただけです。

これでスマホの表示崩れ問題が解決しました。

まとめ

結論:親テーマの「base.css」を直接変更するのが手っ取り早い。

なお、賢威についての詳細はこちらからご覧ください。