世界の端っこ行き止まり (現在実験中)

XII.改造４…残りのテンプレート修正
7.2の段階でできてしまっているのですが、
この通り、
　・メインテンプレート
　・アーカイブテンプレート
　・１記事テンプレート
　・コンテンツテンプレート
全ての修正が終了しています。

前回はメインテンプレートの修正でしたが、
残り３つはどうしたかというと、メインと同じ場所に同じく
修正を加えた結果となります。

同じように修正したので、BlogDiscriptionの位置は
どれもBlogの名前の下ですね。

これで、
　・スタイルシート
　・メインテンプレート
　・アーカイブテンプレート
　・１記事テンプレート
　・コンテンツテンプレート
の５つが綺麗にファイル化できた事になります。
今までは再現を目標としていましたが、
ここからはその先に進む事になりますので、
ここいらできっちりファイルに意味のある名前をつけて
バックアップをとっておきましょう。
間違えて書き直すなんてよく起きる事ですからね。
バックアップは大事です。


XIII.改造５…Blogの横幅を操作してみる
さて、ここからはスタイルシートを弄っていきます。
と、いっても事前に準備してあるのでその５は楽です。

以前、横幅を調べましたよね？
８００、４６０という数字があったと思います。
ではスタイルシートでこの２つの数値を持った項目を
ピックアップしてみましょう。

８００を持った宣言
#container {
width:800px;
background:url(/template/118/img/bg.gif) repeat-y;
text-align:left;
margin:0px auto 10px auto;
border-bottom:1px solid #80518B;
}

４６０を持った宣言
#center {
width:460px;
margin:0 auto 0 0;
float:left;
/*border:#80518B solid 1px;*/
}

#center_contents {
width:460px;
margin:0 auto 0 0;
float:left;
}

.entry {
margin: 0 0 15px 6px;
width:460px;
text-align:center;
overflow:hidden;
word-break:break-all;
border:1px solid #80518B;
}

.comment {
margin: 0 0 15px 6px;
width:460px;
text-align:center;
border:1px solid #FBFDB;
}


こんなドンピシャの値を偶然持ってる…
なんて都合のいい話があるかー！！　って事で、
もうこいつらがBlogの横幅、記事の横幅を宣言しているな？
と決め付けてしまいましょう。
なーに　間違えたらさっきのバックアップから復帰すればいいんです。
というわけで、
８００　->　９８０　へ変更
４６０　->　６４０　へ変更
そして保存。

ではBlogをリロードして見ましょう。
全体的に横にBlogの表示範囲が伸びたのが確認できますね。
と同時に、色々画面がおかしくなった事も確認できるとおもいます。
そのおかしくなった所を直すのが次の作業です。
ちなみにこんな感じになります。

(クリックすると画像表示するよ)

横幅伸ばすだけなら楽でしょ？
じゃあ今日はここまで。
次は画面の見た目を直していきましょう。