冬将軍に突入準備の今日この頃、寒暖の差といつも以上に仕事を頑張ってしまって疲れが溜まっちゃってるOlein編集長（@Olein_jp）です。こんばんわ。みなさん、ご機嫌うるわしゅー。
このサイトで使っているWordpressのテーマが完成して１週間くらい経ちますが、まだ飽きはきておりません。デザインに対して飽きが早いボクですが、まだ大丈夫みたいです。
仕事柄、たくさんのデザインを目にしますが、「良いな♪」と思って取り入れてみても、その道中で「やっぱ違うな」と道半ばで方向転換してしまいます。（要するに、そのデザインを採用するジャッジが甘いってことなんだけど）
さて、話は本題に。
こちらのテーマを作るまでにちょこちょこと勉強しました。来る日も来る日も勉強に明け暮れ、通勤道中にも資料をペラペラ、仕事中にも参考サイトをチラチラ、社長と喋っているときでもWP本をパラパラと（一部フィクション）。
今後、WPテーマ作りたい！って思う人も多いと思います。ボクに至っては、どうしても形から入りたがるタイプでしてね。テストの前に大掃除するタイプです。そんな似通った皆様にも参照していただける、というか参考にもならない内容なんだけど、ヒントの片隅に置いてもらえるかも♪と思い書いておきます。
まず最初に用意したもの
それは、自分が作ってみたい！と思うデザイン、似たレイアウトのサイト様を探すことです。そのためにはネットの大海原へ航海へ出なければなりません。当然ですが、ジャック・スパロウよりも総航海距離は長くなることでしょう。ボクに似た方々ならば、間違いなく常に別の場所を指すコンパスを片手に様々なサイト様を見比べ、「あれでもない。これでもない」とブックマークを増やし、RSS登録数も跳ね上がり、Evernoteのノート数は飛び上がるはずです。
前置きがいつも長くなる（ケッ…）。すいません。
長い航海を経て探し当てたら次に行うこと。それは……
ソースを盗み読みする！
みなさんご存知ですよね？HTML ヤラ CSS ヲ ヌスミヨミ スル のです。
ボクの場合ですと、最初はこちらのサイトに注目していました。
ウェビメモ
東京在住でiPhoneとカメラとWEBデザインが好物のアプリケーションデザイナー。 普段は専用開発ソフトを使ってWindows用アプリケーションの制作をしています。 （開発言語はかけませんｗ） …
みなさんご存知の@xxmiz0rexxさんのサイトです。
構造的に気に入りました。ヘッダーが広く大きく、左にナビを持ってくる2カラム。この構造を勉強しよう！と思いましたね。
まずはソースを拝見します。
こちらが拝見できるソース（HTML）です。
また、この中からCSSなども拝見することができます。
こんなソースがCSSです。
これで、ソースは出そろいました。JavaScriptなどの外部ファイルは今回はなしで。
これで下準備は整いました。
ソースを手でもって読んで構造を書いて理解する
読んで勉強したいソースが揃ったら次は出力です。
いろんな意見がみなさんおありでしょうが、ボクはこういうところはアナログ人間なのかもしれません。基本的に勉強しようとすることは書き下ろさないと身になった気になれないのです。このデジタル全盛期にプリンタで出力？なんて思われる方も多いかと思いますが、ボクはやっちゃいますね。会社でですが……汗
自宅で出力される方は枚数がかなり多くなってしまう場合もありますので、奇数ページだけ出力したものを向きを揃えて偶数ページだけ出力とかすれば、二分の一の枚数で表裏完全利用で枚数を抑えられると思います。ボクみたいに会社でバンバン出せちゃいます！っていう方は問題ありません。（当然、会社で出力した後はプリンターサーバーのログも抹消します→完全犯○）
ボクの場合、おっぴろげるとこんな風になっちゃいます。
よーく目を凝らしてみると赤ペンの汚い文字がいろんなところに書きなぐってあるのが見てもらえると思います。
僕の場合、このような出力の状態にして紙を目で読み、直に手で書き込むという俗にいわれるアナログな動作で勉強して行くことが多いです。（逆にこういった感じではなくデジタルな感じで勉強なさってみえる方々の方法・手法をお聞きしてみたいです）
とにかく書きなぐる
出力が手元に入ったら、後は読みふけります。そして、書き込みます。DIV要素を囲って、気になるCSSのID名やCLASS名もマーキングします。
そして、別のメモに大まかな構造（Header、Main、Wrapなど書き方は様々ですが）を書いていきます。
以下にボクが参考にしたサイト様を紹介させてもらいます。一見の価値がある豊富な情報をお持ちのサイトさんばっかりですよ！
CSS ::: Webデザインレシピ
CSSのカスタマイズや基本が満載です！
WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス
WordPressのオリジナルテーマの作り方について説明していきます。2010年1月に書いた記事とはバージョンが違い、コードも変更されたため、新たに記事にしてみました。慣れると簡単なのですが、初心者に …
この記事に支えられました！
などなど、探してみるととても有益な情報を掲載してくれているサイト様がたくさんあるはずです。自分の読み易い、見やすいと感じるサイトさんを見つけてみると良いと思いますよ♪
そんなこんなを繰り返し…
なんとかこの現在の状況までたどり着きました。こちらのテーマはWebクリエイターボックス様が提供されているテーマをカスタマイズして利用させていただいています。
今回ご紹介した方法はボクの場合でした通用しないかもしれません。が、勝手な考えとしてデザイン力はアナログ力に等しいと強く感じることがあります。モニターの中のPhotoshopやIllustratorの操作スキルも去ることながら、自分の手を動かしてデザインするということが今後もっと大切になってくると思います。そういった背景も踏まえて、プログラムを手で書いて汚してみるということがボクにとってのベストな勉強方法となっています（現時点で）。
これからいろいろと試してみたいこともたくさんだし、どんな風に装いが変わっていくかもわかりませんが、もっともっとたくさん勉強しなきゃいけないな、と感じる毎日です。
