ワードプレスで、記事＆サイドバーの幅を変更したい

Question

###前提・実現したいこと

ワードプレスで、テンプレートmasonicを使っています。
記事＆サイドバーの幅を変更(もう少し狭く)したいです。

※ヘッダー画像の幅はこのままが良いです。
※横スクロールバーは使いたくありません。

解決策を教えてください。

###参考資料
style.cssはこちら
※その他必要なものがありましたら教えてください。

###試したこと

3つあります。

１

これを子テーマのstyle.cssに書いてみました。

#page {	margin: 2em auto;
	max-width: 1000px;

結果

・横スクロールバーが現れました
・ヘッダ画像の横幅も同時に狭くなりました。
（page全体に命令してるからそうですよね。。）

２

こちらのサイトで拾った
これを子テーマに追加してみる。
※お試しなので、数字は変えずにそのまま使いました。

@media screen and (min-width: 48em) {
	.wrap {
		max-width: 1100px;/*記事・サイドバー・余白の全幅*/
		padding-left: 2em;/*記事の左余白*/
		padding-right: 2em;/*サイドバーの右余白*/
	}
	.has-sidebar:not(.error404) #primary {
		float: left;
		width: 67%;/*記事幅*/
	}
	.has-sidebar #secondary {
		float: right;
		padding-top: 0;
		width: 29%;/*サイドバー幅*/
	}
	.navigation-top .wrap {
		max-width: 1100px;/*メニューバー幅*/
		padding: 0.75em 3.4166666666667em;
	}
	.site-content {
		padding: 2.5em 0 0;/*メニューバーと記事の間隔*/
	}
}

結果

ヘッダー画像と、コンテンツ＆サイドバーの間の空白が少しだけせまくなった。

3

こちらを参考に、下のコードを子テーマに書きました。

@media screen and (min-width: 640px) {
.site {max-width: 1300px;}
.widget-area {width: 20.07692308%;}
.site-content {width: 76.9230769%;}
}

結果

・記事、サイドバーの幅は変わらず
・全体的に左寄りになった。
・数字を変えても、幅は一定。

Comments

[8-0_nyan5]

記事＆サイドバーの幅とは、個別ページでのことですか？

[mokopi]

反応いただきありがとうございます。こちらが作りかけのページです。　http://doll-collection.babymilk.jp/　　トップにある固定ページ・トップにあるサイドバー・検索で出てくる投稿ページの３つの幅です。　トップにある固定ページと検索で出てくる投稿ページをひとまとめにして、「記事」と称しました。

[8-0_nyan5]

幅を狭くした場合の記事とサイドバー、記事と記事の間はどうしますか（両端をそのままにするか、記事などを狭めた分両端も狭める？）

[mokopi]

「記事などを狭めた分両端も狭める」です。　なるほどですね。記事を狭めると、まずは両端によってしまい間があいてしまうのですね。(違っていたらツッコんで下さい)　

[8-0_nyan5]

両端にと言うか、左によってしまいます。

[kei344]

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[mokopi]

そうすると、見やすくなる　または　変な表示(一部だけ文字でかい)がなくなる　のですね。了解です。

[kei344]

ここは「質問への追記・修正の依頼」です。解決済にしても本文を編集することが出来ますので、よろしくお願いします。

[mokopi]

了解です。修正しました。

[kei344]

編集ありがとうございます。

Answer 1

このテーマは、「Masonry」というjQuery プラグインでレイアウトしているようです。
（なので、わたしは詳しい調整の仕方を知りません）

私のわかる範囲で書かせていただきます。

子テーマに以下で編集してみてください。

記事とサイドバー、検索結果の記事これらを囲っているのが下記になります。

/*記事とサイドバー、検索結果の記事を入れている？箱*/
#container {
	width: 70%; /*ここに希望の数字を*/
}

検索結果の記事の幅は、

.post-container { /*記事の幅です*/
	width: 20%; /*ここに希望の数字を*/
}

固定ページとサイドバーの幅は、

.primary { /*固定ページ*/
	width: 50%; /*ここに希望の数字を*/
}

.secondary { /*サイドバー*/
	width: 20%; /*ここに希望の数字を*/
}

大まかには以上のような感じで調整できるはずです。
（記事を４つ１行に並べるには普通に考えて、.post-containerのwidthを25%にすればいいはずですが、
marginもろもろ（すいません。このもろもろがわかりません）で25%ではきれいにならびません）

ブラウザのデベロッパーツールで確認しながら希望の数値を見つけながら調整されるのがいいと思います。

Comments

[mokopi]

思っていた感じに仕上がりました！ありがとうございます。
本当に助かりました＾＾

教えていただいたコードの意味もしっかり調べておきます。