スポンサーサイト

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

前後の記事

最近の記事

全体のレイアウト

2段組(2カラム)の右メニュータイプのレイアウトのテンプレートを作成します。全体幅を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ソース

前後の記事

最近の記事

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