「テンプレートのカスタマイズ」 ～その４（最終回）～
「テンプレートのカスタマイズ」 ～その４（最終回）～
【配置や大きさを変えてみよう♪】
っという事で、ダラダラと今回が最終回ですがｗ、私もちょっと飽きてきたので（をぃ！ｗ＾＾；
これもかなり大雑把に見て行きたいと思います。ｗ
これも、スタイルシート編集で行えるので、直接数値を変えてみて、下のプレビューで
どんな風に変化したか直接確認してもいいかもしれません。＾＾
但し、バックアップも取って、これで決定と言う時以外は絶対に「更新」は押さないで下さい。
注）実際に変更する際は必ず複製を作るか、テキストにバックアップしてから行って下さい。
スタイルシートの中身を見て行きましょう♪＾＾
（/* Layoutと/* Headerの中だけですが。ｗ）
（上の方は端折ってます。）
/* Layout
------------------------------------------------------------ */
#wrapper {
width: 950px;
margin:0px auto;
text-align: center;
}
#container {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
padding:0px;
background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_bg.jpg);
background-position:center 800px;
background-position-y: 800px;
}
#header {
width: 100%;
overflow: hidden;
padding:0px;
background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_header_bg.jpg);
background-position:center;
background-repeat:no-repeat;
height:800px; ←ヘッダー部自身の縦幅
margin-top:-10px;
position:relative;
}
#header_inner {
width:950px; ←ヘッダー部のブログタイトルの横幅
margin:0px auto;
}
#main {
float: right; ←ブログ本文の左右位置（right,left,center)
width: 660px !important;
width /* for IE5.5 */: 680px;
padding: 0px 0px 20px 0px;
overflow: hidden;
margin-top:-400px; ←ブログ本文の開始位置（高さ）
position:relative;
}
#sidemenu {
float: left; ←サイドメニューの左右位置、但し、ブログ本文の左右位置に影響（right,left,center)
width: 270px;
padding-bottom: 20px;
margin-top:-400px; ←サイドメニューの開始位置（高さ）
position:relative;
overflow:hidden;
}
#footer {
clear: both;
padding: 10px 0px;
width: 100%;
font-size: 85% !important; /* for Modern browser */
font-size: 90%; /* for IE6 */
}
/* Header
------------------------------------------------------------ */
.btn {
float:right; ←「いますぐPLAY」ボタンの左右位置(right,left,center)
margin:10px 20px 135px 0px;
}
#header h1 {
text-align: center; ←ブログタイトルの左右位置(right,left,center)
padding-bottom: 5px;
clear:both;
}
#header h1 a:link {
color:#FFF;
text-decoration:none;
}
#header h1 a:visited {
color:#FFF;
}
（ここから下も端折ってます。）
元の状態はこれです。
数値を変えるとこんな感じや
上にスペースが出来ましたね。
こんな感じになります。
デミの頭が切れちゃった！＞＜
これを使うと、例えばヘッダー部にもっと縦幅の短い画像を使ったり、
サイドメニューとブログ本文の位置を入れ替えたりすることもできます。＾＾
どう変化するかは、実際に数値を入れ替えてみてプレビューで見るのが
一番わかりやすいかなと思います。＾＾
（とりあえず、やっつけだけど何とかまとめれたか？？ｗ＾＾；）
さて、次回からはまともにドラネスブログかコマ漫画を載せようと
思います。ｗｗｗ＾＾；（あくまで予定は未定よ！ｗ）
ドラゴンネストランキング ←ドラネス関連の人気ブログが見れるよ！良かったら押してね♪
【配置や大きさを変えてみよう♪】
っという事で、ダラダラと今回が最終回ですがｗ、
これもかなり大雑把に見て行きたいと思います。ｗ
これも、スタイルシート編集で行えるので、直接数値を変えてみて、下のプレビューで
どんな風に変化したか直接確認してもいいかもしれません。＾＾
但し、バックアップも取って、これで決定と言う時以外は絶対に「更新」は押さないで下さい。
注）実際に変更する際は必ず複製を作るか、テキストにバックアップしてから行って下さい。
スタイルシートの中身を見て行きましょう♪＾＾
（/* Layoutと/* Headerの中だけですが。ｗ）
（上の方は端折ってます。）
/* Layout
------------------------------------------------------------ */
#wrapper {
width: 950px;
margin:0px auto;
text-align: center;
}
#container {
width: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
padding:0px;
background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_bg.jpg);
background-position:center 800px;
background-position-y: 800px;
}
#header {
width: 100%;
overflow: hidden;
padding:0px;
background-image:url(http://blog-imgs-42.fc2.com/t/e/m/templates/dragonnest_header_bg.jpg);
background-position:center;
background-repeat:no-repeat;
height:800px; ←ヘッダー部自身の縦幅
margin-top:-10px;
position:relative;
}
#header_inner {
width:950px; ←ヘッダー部のブログタイトルの横幅
margin:0px auto;
}
#main {
float: right; ←ブログ本文の左右位置（right,left,center)
width: 660px !important;
width /* for IE5.5 */: 680px;
padding: 0px 0px 20px 0px;
overflow: hidden;
margin-top:-400px; ←ブログ本文の開始位置（高さ）
position:relative;
}
#sidemenu {
float: left; ←サイドメニューの左右位置、但し、ブログ本文の左右位置に影響（right,left,center)
width: 270px;
padding-bottom: 20px;
margin-top:-400px; ←サイドメニューの開始位置（高さ）
position:relative;
overflow:hidden;
}
#footer {
clear: both;
padding: 10px 0px;
width: 100%;
font-size: 85% !important; /* for Modern browser */
font-size: 90%; /* for IE6 */
}
/* Header
------------------------------------------------------------ */
.btn {
float:right; ←「いますぐPLAY」ボタンの左右位置(right,left,center)
margin:10px 20px 135px 0px;
}
#header h1 {
text-align: center; ←ブログタイトルの左右位置(right,left,center)
padding-bottom: 5px;
clear:both;
}
#header h1 a:link {
color:#FFF;
text-decoration:none;
}
#header h1 a:visited {
color:#FFF;
}
（ここから下も端折ってます。）
元の状態はこれです。
数値を変えるとこんな感じや
上にスペースが出来ましたね。
こんな感じになります。
デミの頭が切れちゃった！＞＜
これを使うと、例えばヘッダー部にもっと縦幅の短い画像を使ったり、
サイドメニューとブログ本文の位置を入れ替えたりすることもできます。＾＾
どう変化するかは、実際に数値を入れ替えてみてプレビューで見るのが
一番わかりやすいかなと思います。＾＾
さて、次回からはまともにドラネスブログかコマ漫画を載せようと
思います。ｗｗｗ＾＾；（あくまで予定は未定よ！ｗ）
ドラゴンネストランキング ←ドラネス関連の人気ブログが見れるよ！良かったら押してね♪
スポンサーサイト
