２段組（２カラム）の右メニュータイプのレイアウトのテンプレートを作成します。全体幅を100％に指定し、記事部分幅を65％、メニュー部分幅を30％にしています。

全体の構成は、allでh1(記事タイトル部分)、intro(ブログ紹介文部分)、left(記事表示部分)、rmenu(右メニュー部分)全体を囲っています。実際の各部分の記述は次回以降に回します。ここでは構造を大体把握しておいて下さい。

記事部分、メニュー部分のボックス領域を右、左と分けるには[float:left]で記事部分を左へ、[float:right]でメニュー部分を右に寄せています。それらをallで囲う事により、ウィンドウ幅を縮めた場合などに右メニューが下に移動する事を防いでいます。

さらにleft内に見出しや記事コンテンツ、コメント投稿フォーム、rmenu内にメニュー見出しやメニューリストを記述します。

以下におおまかなソースを記載しますが、ここでは移さなくても結構です。次回から各部分について詳しく解説しますので、その都度追加して下さい。

HTML部分[おおまかな構造]

<div id = "all">
    <h1>ブログタイトル</h1>
    <div class = "intro">ブログ紹介文</div>
  <div id = "left">
    <h2>記事タイトル</h2>
      ・
      ・
  </div>
  <div id = "rmenu">
    <h3メニュータイトル</h3>
      ・
      ・
  </div>
</div>

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

1. bodyタグ
2. 全体のリンク色
3. 全体のレイアウト
4. 全体をallで囲む
5. h1-ブログタイトル部分
6. intro-ブログ紹介文部分
7. body〜introソース

前後の記事

最近の記事