*

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

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

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

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

スポンサーリンク

まずは全体幅(記事幅+サイドバー幅)を広くします!

すると、こんな感じになりました!
ヘッダー画像横に

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

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

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

全体幅をいじるコードは!?

いじる場所はスタイルシート(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の数値を全体のバランスを見ながら、微調整していく感じですね!最初は数値を小さめに指定して、徐々に増やしていくと良いかと!

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

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

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

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

#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でメイン部分の横幅を広げたら、トップページの記事タイトルの幅も広げましょう


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

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

hhtrt

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

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

同じ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に変更すると、キレイに表示されるようになります!

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

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

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

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

それでは~

いろはす

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

スポンサーリンク

関連記事

rshse

stinger3をカスタマイズしてヘッダー画像幅の調整してみたよ!何処のコードをいじればイイの!?

どうもです、いろはすです。 前回全体の幅を広くしたので、ヘッダー画像部分の右側に余白が出来てし

記事を読む

rehte

ブログ記事内にコードを表示出来るプラグイン『SyntaxHighlighter Evolved』が超便利!!使い方は簡単なの!?【実践レポート記事】

どうもです、いろはすです。 stinger3のカスタマイズにあたって、色々とプラグインを見てい

記事を読む

htr

stinger3のサイドバーを自分好みにカスタマイズしてみたよ!サイドバーの見出し背景色変更&下線追加&見出しフォントの文字色変更!検索ボタン変更も!

どうもです、いろはすです。 当ブログはENJIさんが作成・配布している『Stinger3』とい

記事を読む

Comment

  1. ヒヨドリコ より:

    おはようございます。
    リンクありがとうございます。

    私はまだ初心者なので…参考にさせて頂きます^^

    • いろはす より:

      >ヒヨドリコさん
      コチラこそ、カスタマイズ記事読ませて頂いてます~!
      役立つかどうか分からないですが、よろしくお願いします!^^

いろはす にコメントする コメントをキャンセル

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

【詳細体験レポート】みずほ法人口座の審査は厳しいの?実際に開設してみた!
【詳細体験レポート】みずほ法人口座の審査は厳しいの?実際に開設してみた!

どうもです、いろはすです。 今までは法人口座は住信SBIネッ

スクリーンショット 2019-04-27 18.09.04
【実食レポート】グルテンフリーカフェのリトルバードが色々ヤバかった件

どうもです、いろはすです。 最近、食事制限をしていて小麦製品

IMG_7014
【実食レポ】ラーメン男盛りの家系ラーメンを食べてみたよ!二郎系からの転身はいかに

どうもです、いろはす(@irohasu_free)です。(※この記事は

スクリーンショット 2018-09-16 23.54.57
【宿泊レポ】小樽のとほ宿『小さな旅の博物館』に泊まってみたよ!

どうもです、いろはす(@irohasu_free)です。 北

スクリーンショット 2018-09-11 12.17.09
羽幌のとほ宿『吉里吉里(きりきり)』に泊まってみたよ!【宿泊レポ】

どうもです、いろはす(@irohasu_free)です。 初

→もっと見る

  • 20代で起業して自由過ぎるライフスタイルを満喫中の♂
    高知生まれ高知育ち、東京なう。
    絵に書いた様な右脳派。
    ほぼ感覚だけで生きてます。

    ⇒ 詳しくはコチラから!
PAGE TOP ↑