サイトの横幅を変更する方法と、レスポンシブにならない時の解決方法の忘備録。
子テーマのこの部分を変更する
サイトの横幅を変えたい時は、子テーマのbase.cssの赤字部分を変更します。
/*——————————————————–
テンプレートレイアウト
——————————————————–*/
.site-header-in,.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;
}
だがしかし、スマホで見るとレスポンシブになっていない・・・
私のメインサイトはスマホからのアクセスが8割なので、ゆゆしき事態。
1200pxと名の付く部分を、base.css、rwd.cssとも全て子テーマで書きなおしてみたりするも(w)直らない。
レスポンシブにならない?なら親テーマいじろ
というわけで、結論:親テーマの上記赤字部分をいじりました。
一発解決です。
カスタマイズは全て子テーマが基本ですが、この程度の簡易な変更なら良しとします。
ただしバージョンアップの時は忘れないように、私は「親テーマ変更したところリスト」を必ず記録しましょう・・・