stinger3をカスタマイズして全体の幅とメイン幅&サイドバー幅を広げてみたよ！余白の微調整も！

どうもです、いろはすです。

先日サイドバーをカスタマイズしたら、他も色々といじりたくなって来たんですね～！

今回いじる箇所は前から気になっていた、ブログ全体の幅を広くしていきたいと思います！

まずは全体幅（記事幅＋サイドバー幅）を広くします！

すると、こんな感じになりました！

ヘッダー画像横と、記事部分とサイドバーの間にスペースが出来ちゃいましたねｗｗ

もっと大きくしようと数値を大きくしたら・・・ビローーーんっとなってしまいましたｗ

色々いじってイイ感じに落ち着いたので、変更したコードを見て行きましょう！

全体幅をいじるコードは！？

いじる場所はスタイルシート（style.css)内になります！

#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {
	width: 986px;
	margin-right: auto;
	margin-left: auto;

}

コチラのwidthの数値を変更する感じ。デフォルトのstinger3では、986になっていますね！

続いて記事幅の設定をしていきます！

記事幅を調整するコードの場所はコチラ！

#wrap #wrap-in #main {
	float: left;
	width: 550px;
	padding-right: 39px;
	padding-left: 39px;
	padding-top: 20px;
	border: 1px solid #ccc;
	background-color: #FFF;
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
}

サイドバーの幅を広くするコードは、コチラ！先ほどのすぐ下にあります。

#wrap #wrap-in #side {
	float: right;
	width: 336px;
}

widthの数値を全体のバランスを見ながら、微調整していく感じですね！最初は数値を小さめに指定して、徐々に増やしていくと良いかと！

注意点としては、全体幅内で収まる数値に設定しないと、いきなりサイドバーが無くなって記事の下に飛んでしまうので要注意です！結構焦りますｗ

ついでに記事幅の余白部分も調整するよ！

記事幅の内部の余白部分が広いので、少し狭くしちゃいます！

いじるコードは記事幅と同じ塊内にあります！

#wrap #wrap-in #main {
	float: left;
	width: 550px;
	padding-right: 39px;
	padding-left: 39px;
	padding-top: 20px;
	border: 1px solid #ccc;
	background-color: #FFF;
	border-radius: 4px 4px 4px 4px;
	padding-bottom: 20px;
}

ココの4行目と5行目の数値を20にすると、今の僕のブログのようになります！
色々と数値をいじって、好きなように変えちゃってください！

参考ブログはコチラ！
⇒【WordPress】Stinger3でメイン部分の横幅を広げたら、トップページの記事タイトルの幅も広げましょう

コレで安心と思ったら・・・

引用部分とコメント欄がハミ出してる事件！！

「あぁ・・見なかった事にしよう・・・ｗ」とは行かないので、修正してきます！ｗ

引用部分の変更箇所はコチラ！

同じcss内に下記のコードがあるので、そこを見つけます。

/*----------------------------
引用
-----------------------------*/
.post blockquote {
	background-color: #f3f3f3;
	background-image: url(images/quote.png);
	background-repeat: no-repeat;
	background-position: left top;
	padding-top: 70px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 40px;
	margin-top: 20px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: -40px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #CCC;
}

16行目の数値を-40から-20に変更したら、ズレは直ります！

コメント欄も同じ感じで直すよ！

#comments {
	font-size: 14px;
	line-height: 20px;
	color: #333;
	background-color: #EDF2FA;
	margin-left: -40px;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 50px;
	margin-bottom: 20px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #5484D2;
}

同じ要領で6行目の数値を20に変更すると、キレイに表示されるようになります！

確認すると、ちゃんとキレイに直ってますね！

参考ブログはコチラ！
⇒ヒヨドリコブログさんの初心者のためのWordPress memo~アドセンスを並べました→見出しのズレを直しました

記事書いてる途中で気付きましたが、記事中の画像の幅を600ピクセルにしてるので、記事幅を広くしたら画像の右側がガラ空きになりますね。。ｗ　

まぁコレは画像容量を見ながら、サイズを大きくすれば済むだけの話しじゃないかと！
対応策はまた考えます。。ｗ

それでは～

いろはす

いや～記事幅はずっと前から広くしたかったので、ようやく出来てかなりテンション上がってます！ｗ　思ってたより簡単なので、もっと早くやれば良かったなぁ。。ｗ