*

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

スポンサーリンク

関連記事

htr

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

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

記事を読む

rehte

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

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

記事を読む

rshse

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

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

記事を読む

Comment

  1. ヒヨドリコ より:

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

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

    • いろはす より:

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

Message

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

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

IMG_20170221_141120
ひばりヶ丘のカレー!ナンが美味しいのは何処!?

どうもです、いろはす(@irohasu_free)です。 みんな

IMG_20170116_143237
ひばりヶ丘のチャンドラスルヤが色々ヤバかった件。噂のカレーはどうだった?

どうもです、いろはす(@irohasu_free)です。 西武池

76km03aaiazkt3f1482644352_1482644837
インデアンカレーのカロリーって多いの!?堂島店で堪能してきたよ!

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

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-17-22-27-03
KKRホテル熱海の日帰り!タオルは有料なの!?超詳細レポート!

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

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-19-18-04-03
シェアハウスのメリット&デメリットまとめ!意外な精神的な変化も

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

→もっと見る

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

    ⇒ 詳しくはコチラから!
  • follow us in feedly

    ⇒ 「feedlyって何やねん!」という方はコチラを!
  • 2017年3月
    « 2月    
     12345
    6789101112
    13141516171819
    20212223242526
    2728293031  
PAGE TOP ↑