2004年11月09日

記事部分の色と位置の変更

※変更前の状態は11/07の変更後の画像を見てください。


今日は記事の部分をいじろうと思います。
今回の変更箇所は「#content {}」の中だけです。

1.記事部分の色の変更
 「#content {}」の中にこんなふう(↓)に

   #content {
   background:#FFD477;
   margin-bottom:30px;
   margin-top:25px;
   margin-left:10px;
   float:left;
   width:60%
   }

background:好きな色のコード;」を入れるだけです。見やすいように改行しておきましょう。
 すると

変更その2−1・記事部分の色を変えました

 こうなります。(クリックで拡大)


2.記事部分の位置の変更
 といっても微妙にずらすだけですが。
 記事とタイトル部分や左右との間隔を指定します。
 今回はピクセルで指定しましたが、パーセントでもできます。
 「margin」部分を変更します。こんなふうに(↓)です。今回は上(top)と左(left)をそれぞれ50ピクセルにしてみました。

  #content {      → #content {
  background:#FFD477; → background:#FFD477;
  margin-bottom:30px; → margin-bottom:30px;
  margin-top:25px;   → margin-top:50px;
  margin-left:10px;  → margin-left:50px;
  float:left;     → float:left;
  width:75%      → width:75%
  }          → }

 すると

変更その2−2・記事部分の位置を変えました

 こうなります。(クリックで拡大)
 あらら、記事が下にいっちゃいましたね。今度はこれを直しましょう。


3.記事の部分の大きさの比率の変更
 これによって記事がウィンドウの何パーセントの大きさになるかを決定します。多分。
 変更箇所は「width」です。2.の変更例の一番下の部分ですね。私は60%にしてみました。
 すると

変更2−3・記事部分の大きさの比率を変えました

 こうなりました。(クリックで拡大)ちゃんと記事が上にあがってきましたね。
 どれくらいの比率で記事がちゃんとした位置になるかは2.の部分でどれくらい幅を空けたかによるので、プレビューを使いながら調整してください。お気に入りバーを出したりウィンドウをある程度小さくしても崩れないようにしておくと良いとおもいます。


 ここまでで今回はおしまいです。
 読んでくださってありがとうございました(^0^)

タグ:CSS
posted by 四葉屋 at 19:15| Comment(0) | TrackBack(0) | CSSいじり | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

この記事へのトラックバックURL
http://blog.seesaa.jp/tb/998162

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。