スポンサーサイト

left-左部分

記事表示部分を囲うボックス領域(left)を追加します。

記事部分や追記部分、コメント投稿部分などはこのleftで囲みます。

スタイルシート部分

#left {
  width: 65%;
  float: left;
  overflow: hidden;
  margin: 0px 0px 0px 5px;
  background: #ffffff;
}

HTML部分

<h1><a href="./"><%blog_name></a></h1>
<div class = "intro"><%introduction></div>
<div id = "left">


</div>
</div>
</body>
</html>

#left-スタイルシート部分

width: 65%

left部分の全体幅を65%にしています。全体幅が100%ですので、残り35%の余白があるという事になります。

float: left

floatプロパティでleftを左に寄せています。もう一方の段(rmenu)にはrightを指定します。

overflow: hidden

overflowプロパティで左部分の内容があふれる場合の処理をしています。hiddenの場合は収まりきらない内容は表示されなくなります。他にもvisible(収まりきらなくても表示)、scroll(スクロールによって全て表示)、auto(ブラウザが自動的に処理)があります。デフォルトではvisibleになっていますが、ここではあふれた場合に崩れる事を避けてhiddenにしています。例え崩れたとしても全て表示された方が良いとおもわれる場合はvisibleにして下さい。

margin: 0px 0px 0px 5px

left部分枠と隣接する領域との間隔を指定しています。この場合隣接する領域は上(intro)右(rmenu)、下(ウィンドウ下)、左(ウィンドウ左)です。左に5pxの間隔をとっています。

background: #ffffff

left部分全体の背景色を指定しています。ここでは#ffffff(白)を指定しました。

HTML部分

<div id = "left">

</div>

左部分をleftで囲います。次回から記述する内容はこの<div id = "left">~</div>の間に記述して下さい。<div id = "left">はintroの下に、</div>は<div id = "all">を閉じている</div>の上に記述して下さい。

ゼロから創るテンプレートトップ

  1. left-左部分
  2. topentry-エントリー繰り返し表示
  3. h2-記事タイトル部分
  4. 記事本文を表示
  5. 追記部分
  6. left(記事部分~追記)のソース

前後の記事

最近の記事

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