1.ワイヤーフレームを作る

作成方法、というかパーツの構成要素が
テーマの作成
 テンプレート入門
あたりに書いてあるので読みながら進める。

が、パッと見のモックがないとやる気が出ないので
とりあえず、ワイヤーフレームだけ作ってみる。
作るのは今じゃあまり見かけない、左サイドバー形式。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>TEST CONTENT</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div id="wrap">
  <div id="header">HEADER</div>
  <div id="main">
   <div id="content">CONTENT</div>
   <div id="widget">WIDGET</div>
  </div>
  <div id="footer">FOOTER</div>
 </div>
</body>
</html>

htmlはこんな感じだろう、きっと。

これにCSSを合わせて左サイドバー形式にする。
CSS Tools: Reset CSSもあとで組み合わせる。

#header, #main, #footer {
  width: 1000px;
  text-align: center;
  border: 1px solid #FF9999;
}
#content {
  float: right;
  width: 100%;
  margin-left: -260px;
  border: 1px solid #99FF99;
}
#widget {
  float: left;
  width: 240px;
  border: 1px solid #9999FF;
}
#footer {
  clear: both;
}

MediaQueriesの適用とかはとりあえず後回しで。
テーマ情報というものを記述しないといけないらしいけど、これも後で。
コレで最低限できた。
・・・ま、ただのHTMLです。
さすがにこれだけだと何が何やらなので、もうちょっと書き足してみる。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>TEST CONTENT</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div id="wrap">
  <div id="header">
   <h1 id="title">サイトのタイトルだよー</h1>
   <div id="search">検索？<input type="text" size="10" /></div>
   <div id="desc">サイトの説明文が入ったりします</div>
  </div>
  <div id="main">
   <div id="content">
    <div class="content_container">
     <h2 class="content_title">content_title</h2>
     <div class="content_category">content_category</div>
     <div class="content_tag">content_tag</div>
     <div class="content_author">content_author</div>
     <div class="content_create_datetime">0000/00/00 00:00:00</div>
     <div class="content_updator">content_updator</div>
     <div class="content_update_datetime">0000/00/00 00:00:00</div>
     <div class="content_parts">
      CONTENT の 中身 1
     </div>
    </div>
   </div>
   <div id="widget">
    <ul class="widget_block">
     <li class="widget_container">
      <h3 class="widget_title">widget_title</h3>
      <div class="widget_parts">
       WIDGET の 中身 1
      </div>
     </li>
    </ul>
   </div>
  </div>
  <div id="footer">
   <div id="copyright">Powered by WordPress</div>
  </div>
 </div>
</body>
</html>

こんな。
content_container と widget_container は繰り返せるようにすればいいだろう、多分。
widget部分については ul / li で書いておいたほうが後々いいらしいので、そうしておく。