画面のレイアウトバランスを広くしたい

わいひらさん
すみません、まだレイアウトできてないのでピクセルとなると答えづらいのですが、
以下のページの方ほどの幅にしたいです。

https://techacademy.jp/magazine/8763

現状の半分ほどとして、画像や本文を大きくしたいです。

大まかに説明致します。

スタイルシートに以下を記述します。

#header-in, #navi-in, #body-in, #footer-in{
  width: 1200px;
}

#main{
  width: 860px;
  margin: 0 30px 0 10px;
  padding: 40px 30px;
}

「完全レスポンシブ表示を有効」にせざるを得ない場合には、メディアクエリを用いて対応してください。

サンプル: 1200pxまでのメディアクエリと設定 基本設定 | codepen
※ フルページビュー

親テーマstyle.cssと、何も書いていない子テーマstyle.cssがあるとして、その子テーマにサンプルのcssを入れればおそらく想定されていることは簡単にできます(中身の要素の設定を除く)。

問題は、Simplicityでは他にレスポンシブ用やらmobile.cssも読みこまれているということです。
で、なおかつ、PCからモバイルのサイズに向けてメディアクエリが設定されています。
更にview portの設定もあります。

これにより不要なメディアクエリの読み込みの初期化、あるいはresponsive(-pc).cssの読み込みキャンセルが必要です。

simplicityは誰でもがカスタマイザーなどから設定するだけで問題ないように作られているため、タブレットの時にサイドバーを出したり、その他諸々のリクエストなどがあり、それにあわせて設計されています。

つまりデフォルトが完全レスポンシブオフなわけです。その時々の画面サイズ(主にpc、タブレット、スマホ)に対して個別でcssを分けて簡単にスタイルできるようにされているため、完全レスポンシブではありません。
変な画面幅の時はそれなりに動作するようにしてあると言っても過言ではないでしょう。

これは管理しやすさを取るか利便性を取るかの問題です。

モバイルとpcとで表示方法を変えたりする場合にはロード(リロード)が必要なのが完全レスポンシブオフです。SimplicityのモバイルかそうでないかはisMobileという関数で決められており、それはphpで動作します。なので、完全レスポンシブオンの場合、リサイズだけではそれが動作しないことから結果的にモバイルかどうかを判別するためにはリロードが必要なわけです。

ブラウザは画面幅を大きくも小さくもできます。スマホはできたとしても縦向きか横向きでしょう。表示領域を自在に変えられるのはブラウザの方なわけですが、表示の元となるhtmlを出力しているのはphpですから、カスタマイザーに頼る場合、リロードがいることは理解してもらえると思います。
つまり、読み込み直しをしてhtmlの出力を変えているということです。

モバイル時だけ何かする、PCの時だけ何かするという場合、リロードで読み込み直しをするのは別に問題ではありません。
PC表示時での全機能をスマホにも導入する場合、リサイズによってブラウザ幅が変更された時に処理を変えるということが必要ですがこれはjavascriptでやるしかありません。
phpはリアルタイムにブラウザの幅を検知できないですから。

つまりこれは、カスタマイザーの設定を使わない、必要なことはjavascript(jQuery)でやると言うならできないわけではないのですが、アドセンスの再読込やデータベースの問い合わせなどを考えると現実的ではありません(できないわけではないですが)。
しかしながら多くの場合、質問にあるように見た目だけを変えれれば良いということなので、これは特殊な場合を除いてほぼcssと一部は簡単なjQueryで実現できます。

PCとスマホそれぞれから見ている利用者は、完全レスポンシブであろうとなかろうとその端末で読み込みした時の処理をするわけですから、リサイズを考慮しないならほぼcssでできるのです。

Simplicityで起点となるのはPc表示時の#mainの幅より大きいか小さいかです。

PC時には、#main+#sidebar横並び
タブレット時には、#mainそのまま、#sidebarカラム落ち
スマホ時には、#mainを画面幅、#sidebarは非表示かメニューでスライド

このような仕組みだろうと思います。しかしiphone6plusやファブレットの様なサイズ、あるいは、スマホの横向きなどの時の微妙なサイズは中間サイズとして後付でスタイルされているなどもあって、メディアクエリはややめんどくさい仕様になってます。

その時々でメディアクエリを書き換えたら対応できますが、カウンターと言うか打ち消しの処理はめちゃくちゃ面倒です。まず確認作業が大変です。

これらのことから、一旦メディアクエリをSimplicityのデフォルトを使わず、1から設計するほうが楽です。
これによって一部カスタマイザーでの変更点が使えないことがありますが(タブレットでサイドバーとか)、それはcssだけで実現可能ですから、この際思い切ってresponsive(-pc).cssとmobile.cssを使わず、子テーマstyle.cssのみでスタイルする方向にすると良いかと思います。
もちろん打ち消しをしていくなら、既存のままでその打ち消しスタイルを子テーマstyle.cssやmobile.cssに書けば良いです。

サンプルを子テーマstyle.cssに追記して、子テーマfunctions.phpに

add_action('wp_enqueue_scripts', 'reStyle');
function reStyle() {
	wp_dequeue_style( 'responsive-style' );
	wp_dequeue_style( 'responsive-mode-style' );
	wp_dequeue_style( 'narrow-style' );
	wp_dequeue_style( 'child-responsive-mode-style' );
}

こう書くと、レスポンシブ関係のcssは読み込まないだろうと思います。何か書き忘れているスタイルがあるかも知れませんが、ひとまずこんな感じかと。
mobile時の設定は親テーマmobile.cssを読み込ませなければ解除できますが、逆に完全一からは大変だろうと思うのでmobile.cssはそのままにしてあります。
ここは便宜修正が必要です。

で、後は768pxまでのスタイル、つまりスマホの時にどうするかをモバイルファーストで書いて、まずスタイルしていきます。むらかみさんが例えばモバイルスタイルは必要ないと思っても見に来る人は何で見てるかわかりませんので。

(ここからメディアクエリで)
モバイルのスタイルができたら、768〜960pxのタブレットの時をスタイルします。モバイル時と変わらないなら何もしないで良いです。

ここまでできたら1200px以上の時のスタイルを書きます。
ここも何も書かなければモバイルの表示を継承します。変更したい部分だけメディアクエリの中で書けば良いです。

子テーマ内の書き方として、

・今までのスタイル(要その修正)
・サンプルのメディアクエリ
・それを上書きするスタイルと追加分(今までのスタイルの修正はここでもよい)

と言うような形で、下に書いてある方がそれまでのスタイルを上書きすると理解して下さい。

/*今までのスタイル*/
a {
  color: #333;
}

/*
メディアクエリ
サンプルのcssの代わりに簡易表示
*/
@media (min-width: 768px) {
 a {
   color: #00f;
 }
}

/*それを上書きするスタイルと追加分*/
#site-title a {
  color: #666;
}
@media (min-width: 768px) {
 .entry-title a {
   color: #fff;
   background-color: #111;
 }
}

こんな感じです。

基本的な骨組みはサンプルのcssでイケると思うので、実際に設定しないといけないのは、その中身です。
特に僕がこれまでで印象深いのは、h2、ブログカードとfacebookのいいねの部分でしょうか。ここは幅が狭くなったら間違いなくスタイル崩れを起こします(既に修正されているかも知れませんが)。
h2は#mainのpaddingやら変更すると左ボーダーがズレます。

何が問題であるかは単純にSimplicityデフォルトの幅や設定に基づいてpx(max,min-widthや同height)と%で指定してあり、半分レスポンシブであるのが原因です。想定内のサイズならレスポンシブですが、それ以下や以上になったりするとスタイル崩れを起こすポイントがあります。

そういうのを修正する必要があります。どうすれば直るか等は、うちのサイト、あるいはうちのcodepenなどで説明してあるものもあります。
公式フォーラム(ここ)の過去トピも参考に。

大抵の場合はイケると思うんですけどね。

また、タイル表示の場合はこういったレスポンシブでリサイズさせるものには向きません。本来はレスポンシブにも対応できるはずですがSimplicityは完全レスポンシブオフがデフォルトですから、リサイズにも対応できるように書き直さないとダメで、基本的には、相対配置されるデフォルトのリストなどを選んで下さい。それはcssで2列にしたりなどは可能です。

アドセンスは、メディアクエリを入れることでレクタングルにしたりバナーにしたりはできます。

とまぁ長くなりましたが、あくまでデフォルトの場合を想定して回答してます。カスタマイズがどのように行われているかでやり方はまた変わります。

とにかくリサイズが問題なんですよ。画面からはみ出してよいということなら(横スクロールが発生しても良いなら)、良いんですがそれだとGoogleに怒られたりするので。

まぁそろそろモバイルファーストは、より意識していくべき時期ですから、これを期に色々と試行錯誤して下さい。