形から入るタイプなので、先に大まかなサイトのデザインを考える。
コンテンツの配置や配色などもざっと決めてしまい、先にstyle.cssを書いておこうという話。
手法は人それぞれ。先にHTMLをマークアップして、それからデザインを作りこんでいくという人もいる（というかそれが主流？）だろうから、この辺の順番はお好みで。
#コンテンツの配置を紙に書いてみる
トップページはコンテンツ量が多く、設計も大変なので、ここでは、一つ下の階層のコンテンツを中心に、デザインを考える。
私の場合、元のサイトが存在しているので、それを見ながらの作業になる。
たくさんの学校サイトを見て、学校サイトの標準的な配置を覚えたり、自分が見てカッコイイ！と思ったサイトを蓄積する作業も大事。
その１で書きだしたサイトマップなども参考にしながら、どのように記事を配置するかを考える。
#スタイルシートのおおまかな部分を記述する
細かい部分は後にするとして枠組みのサイズや色などをstyle.cssにざっと書き込む。
また、style.cssの冒頭部分のコメントに、WordPressがテーマとして認識するための記述が必要なので、最低限Theme Nameだけでも書いておく。
style.css
/*
Theme Name: テーマ名
Description: テーマの説明
Theme URI: テーマのURL
Author: 作成者
Author URI: 作成者のURL
Version: バージョン
License: ライセンス
License URI: ライセンスのURL
*/
/* 文字の色 */
#wrapper_all {
color: #ff0000;
}
h1,h2 {
color: #ff00CC;
}
a {
color: #ccff00;
}
a:visited {
color: #cc00ff;
}
#right_pane {
background-color: #66cccc;
}
/* 一番外側の枠 */
#wrapper_all {
width: 1024px;
position: relative;
margin: 0 auto;
padding: 0;
}
/* ヘッダエリア */
header {
}
/* ヘッダ画像 */
#header_image {
}
/* メインエリア */
#wrapper_main {
width: 100%;
position: relative;
padding: 0;
margin: 0;
}
/* 左側 */
#left_pane {
width: 300px;
margin: 0;
padding: 0;
}
#sidebar {
}
/* 右側 */
#right_pane {
padding: 0 20px 0 20px;
margin: 0 10px 0 0;
}
/* 複数の記事があるときはラッパを使う */
#article_wrapper {
}
article {
}
article figure {
}
article section {
}
#right_pane aside {
}
/* フッタエリア */
footer {
}
（以下略）
今は適当で。phpファイルと連動しながら、徐々にきっちり記述していく。
コレをサーバのwordpress＞wp-content＞themes＞mytheme内にアップロードする。
次は管理画面からの設定など