Powered By FC2ブログ
ブログやるならFC2ブログ
今すぐブログを作っちゃおう!

--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

2006年12月02日

ブログ全体のサイズをカスタマイズしてみた例

前回の、ブログ全体のサイズをカスタマイズするの続きです。実際にブログ全体のサイズを変更した例を紹介します

このテンプレートの左右カラムは非対称です。基本的に、左が記事やリンク、コメントなどで、右カラムに画像などの広告やランキングを貼り付けることを想定しています。
ただ、使用目的によって最適なサイズは異なると思いますので、このエントリを参考に最適なサイズで運用してみて下さい。

1.左右カラムが190pxで、エントリ部分が500px

最初は簡単な変更で。左右カラムのサイズを揃えてみましょう。それ以外は標準です。

15
a
190
b
10
c
500
d
10
e
190
f
15
g

構成はこのようになります。計算してみましょう。

15+190+10+500+10+190+15=930px
930-(15+15)=900px(左右マージンを引く)
190+10+500=700px(=左ボックス)
900-700=200px(=右カラム+スペース)
最初に計算してみて、サイズに間違いがないか必ず確認してください。

2.スタイルシートの変更

変更しているのは、左ボックス、左カラム、右カラムですので、その部分のスタイルシートを変更すればいいことになります。


#box-left{
float: left;
width: 700px;
}

#box-sub{
float: left;
width: 190px;
}

#box-right{
float: right;
width: 190px;
}

カスタマイズ
変更した画面です。ちょっとわかりにくいですが、ちゃんと変更されています。実はサイズの変更なら、こんなに簡単です。ただしサイズを変更した場合、HTML部分に変更したサイズよりも大きいもの(画像など)が無いようにしてください。特にエントリ部分のサイズを変更すると、修正はエントリ本文になりますので注意してください。

3.その他の変更例

ちょっと変なサイズにしてみます。計算さえあっていれば、サイズの変更はどのようにでもなります。

左カラム300px、エントリ部分400px、右カラム180px

スペースは変更無しです。変更箇所はこちら。


#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

#box-margin{
margin: 0 15px;
}

#box-left{
float: left;
width: 710px;
}

#box-right{
float: right;
width: 180px;
}

#box-main{
float: right;
width: 400px;
}

#box-sub{
float: left;
width: 300px;
}

カスタマイズ
画像はこのようになります。エントリ上部のボックスも変更されますので、フリーエリアはそのままで大丈夫です。変更箇所はこれだけで済みます。

4.変態なカスタマイズ

極端な例であって、止めた方がいいですよw


#box{
width: 930px;
margin-right: auto;
margin-left: auto;
border: solid 1px #000;
}

#box-margin{
margin: 0 15px 0 25px;
}

#box-left{
float: left;
width: 400px;
}

#box-right{
float: right;
width: 450px;
}

#box-main{
float: right;
width: 300px;
}

#box-sub{
float: left;
width: 80px;
}

カスタマイズ
計算があっていれば、このようなことも可能です。

5.カスタマイズの注意点

  • 全体のサイズも変更できますが、上部のフリーエリアのサイズも変更しないと小さくすることは出来ません。
  • エントリ部分を小さくした場合、コメントなどのフォームが崩れるかもしれません(未確認)
  • エントリ本文やHTML部分に、スタイルシートで変更したサイズ以上のもの(画像など)がある場合には、カラム落ちやサイズの変更不良がおこります。

以上でサイズ変更の解説は終わりです。計算さえ合っていれば、数箇所の変更だけでブログ全体のサイズを好きにカスタマイズできます。好きなサイズに変更してみてください。

スポンサーサイト

コメント

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

サイト管理者にのみ通知する

トラックバックURL

http://templatetube.blog78.fc2.com/tb.php/10-f3af0ffd
プロフィール

Author:templatetube
FC2ブログへようこそ!

最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

Appendix


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。