賢威

賢威7(WordPress版)で子テーマの横幅を変えるとスマホ表示が崩れる

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

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

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

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

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

[widgets_on_pages]

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

[widgets_on_pages id=2]

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です