Primal


H&S Diary の気まぐれテンプレ配布用ブログ
<< June 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>

スポンサーサイト

一定期間更新がないため広告を表示しています

- | - | -
<< ブログタイトルのフォントサイズの変え方 | main | Halloween >>

テンプレートの幅の変え方

テンプレートのご利用ありがとうございます!

テンプレート全体の幅を広げて記事部分の幅を広くする方法についてご質問がありましたので、簡単に説明いたします。


テンプレートの幅を変える場合はCSSファイルの下記の箇所をお好きな数値に変更してください。(変更不要な箇所は省略してあります。)

#title {
width:700px; ←タイトル部分の横幅(常に全体の横幅-20pxの値にしてください)

background-position : center; ←タイトル画像の表示位置(タイトル部分の幅を大きくする場合はleftに変更してください)
}

#body {
width:720px; ←全体の横幅
}

#contents {
width: 450px; ←記事部分の横幅
}

#side {
padding: 10px 0px 20px 20px; ←右側部分の余白の幅(上 右 下 左 の余白幅を表す)

margin-left: 450px; ←右側部分の開始位置記事部分の横幅と同じ値にして下さい)
}

右側部分の幅は 全体の横幅-(記事部分の横幅+余白の幅) になります。
全体の幅や、記事部分の幅を変えることで右側部分の幅を変えることも出来ます。

全体の枠を広げて、記事部分を広くしたい場合は上記の部分を今より大きい値に変更してください。


・・・上手に説明できないのですが、こんな感じで伝わったでしょうか??
もっとわかり易い説明を!という方はこちらを見て頂ければもっとわかりやすいかと思います(私もこちらやCSS解説サイトを見て勉強しました)。
CSSでデザインチェンジ前編
CSSでデザインチェンジ後編
テンプレ | - | -

スポンサーサイト

- | - | -

この記事に対するコメント

コメントする









この記事のトラックバックURL
http://primal-l.jugem.jp/trackback/15
この記事に対するトラックバック
やる気のミナモト

お気に召したらポチッとな!