大体基本的なスタイルシートのいじり方は、いろんな方があげてますね。
私も基本的なことを説明を・・・と思ったのですが、それは他の方に任せて(爆)、ちょこっとマニアック?な所のいじり方を。
以前のブログで、「
ブログ部とメニュー部の左右の入れ替え方」を紹介しましたが、そこを利用したいじり方です。いじるときは自己責任もとにお願いしますね。
今日は、メニュー部分とブログ部分の幅を変えてみましょう♪
====================================================
#BlogMenu
{
width: 150px;
←ここの数字を変えることで幅が変わります。
float: left;
←左右入れ替えではここをいじりました。
margin: 5 auto 0 auto;
}
#Content
{
float: right;
←左右入れ替えではここをいじりました。
width: 580px;
←ここの数字を変えることで幅が変わります。
margin: 5 auto 0 auto;
font-size: 12px;
====================================================
デフォルトでは、ヘッダーのバナーの横の大きさが750ピクセルですのでその辺を考えつつ変更するといいでしょう。ここであげている数値は私のデザインでの数値です。足して750にならないのは、2つの間に20ピクセル分空白を作るためです。
ここで注意。
メニュー部の幅を狭くしすぎると、プロフィール画像がはみ出てしまいます。これの解消方法は以下のとおりです。
====================================================
.ProfielePhoto
{
text-align: center;
width: 135px;
←ここの数値を変えることで画像幅変更可。
border: 0px;
====================================================
あまりいじりすぎるとバランスが悪くなってしまいますので、プレビューでバランスを確認しつつやってみましょう♪
関連ブログ
まさ姐さん「Web配色表 【スタイル管理のアンチョコ】」
男子壊社員さん「朝からスタイル管理アンチョコ♪」
男子壊社員さん「夜にもスタイル管理・アンチョコ♪」
Posted at 2005/03/31 22:39:11 | |
トラックバック(1) |
スタイルシート | パソコン/インターネット