@_tenbi です。長い間「ブログテーマを自作したい！」と思っていたのですが、この度ついに自作に成功いたしました！
今回は、僕がなぜテーマを自作したかったのか、そして参考になった記事をまとめてみます。
目次
前から自作はしたかった
このブログを始めてから、大きな目標として立てていたのがこの「テーマ自作」だったのですが、なにせ以前はパソコンがなかった（あるっちゃあったけどとても日常使用出来るレベルではありません）ので、iPhoneのみで作るわけにも行かず、すっかり断念していました。
PC購入で敷居が一気に下がった
そんなほぼなかった事になっていたテーマ自作ですが、MBAを購入してからというものの、再び「テーマ自作」への熱が出てきたのです。
また、今回購入したMBAは日常使用ができなかったPCの4倍のメモリを搭載しているため、快適に作業が出来るだろうと判断できました。
なぜ自作に踏み切ったのか
最近、ブロガーさん界隈ではテーマ自作が流行っているようで、OZPAの表４の@OZPAさんやけんけん.comの@knk_nさんもテーマを自作しています。この波に乗りたかったというのもありますが、もう少ししっかりした理由もあります。
１，既存のテーマには無駄がいっぱい！
残念ながら、僕の使っていたテーマには無駄な機能がたくさん（誤解のないように申し上げますと、僕にとっては無駄だった、ということです）あり、そのせいでサイトを表示するためにかかる時間が長くなってしまったり、ゴチャゴチャしたコードが結果的に滞在時間の低下に繋がって行きました。
２，その無駄を削る事ができない
１つ目の理由で浮かび上がった無駄の数々ですが、僕の使っているテーマは「無料で使っていいけどコードは弄らないでね☆」というライセンス付きのテーマだったんです。つまり、「無駄が削れない」。
そういった理由や不満から、「必要なものだけを組み上げたい＝テーマを自作したい」という願望が生まれました。これが2012年8月4日。今は2012年8月8日。
無駄を消すために僕が準備したもの
この溜まった無駄を消すために、僕は2冊の書籍を購入しました。それが「WordPressレッスンブック」と「WordPressデザインブック」。
実は僕、このレッスンブックを元に最初はテーマを作成していたのですが、一歩踏み込んだデザインがしたかったのでデザインブックも購入。わかりやすさで言えばレッスンブックの方が分かりやすいので、2冊購入を強くおすすめしておきます。
この本の何がいいかというとそれは「付属のCDに、書籍で使用しているコードがすべて載っている」という点。このおかげで、僕も簡単にテーマを作ることができました。
自作のお陰でファイル数はめちゃくちゃ減った！
基本的にレッスンブック→デザインブックと読み進めながら骨組みを作って行ったのですが、完成して一番びっくりしたのが必要なファイルの少なさ。
以下の画像を見てください。
これが今まで使っていた「Weaver」というテーマの総ファイル。フォルダの中にもまだたくさんのフォルダとファイルがあるので、何を消すとどうなるのかも分からず、何度もファイルが壊れてしまったのを覚えています。
そして、これが今回自作したテーマの総ファイル。どこかにファイルを隠しているわけでは全く無くて、これが今僕のブログを表示している全ファイルです。単純に画像にあるアイコンの数で比較するとなんと8分の1。
アイコンにはフォルダの中身は含まれていませんので、それを加味するともっと凄いとおもいます。
ファイルの容量は、「Weaver」が5MB、今回自作したテーマはなんと49KB。MBじゃないですよ！
こんなに容量が軽いと、心なしかトップページを表示するスピードが早くなったように感じます。これは人によって違いがでると思いますが。
今回自作して新たに加えたもの・特徴
今回テーマを自作して、以前より大きく変わったのが配色。
以前は黒は灰色を用いたテーマでしたが、今回は個人的に気に入っている水色を中心としたシンプルなテーマにしてみました。
また、全体のデザインは以前のテーマをほぼ継承。なんだかんだ言って以前のデザインも気に入っていましたし（シンプルさが）。
「どうせならスマートフォン向けテーマも！」と思っていたのですが、それは残念ながら実現できず。そのかわり、着々と「WPTouch」をつかったテーマを作っています。お楽しみに。
テーマ自作時に必須のものまとめ
テーマ自作にあたって必須なものをご紹介します。
1,ローカルにWordPressをインストールする「BitNami」と「MAMP」
いきなり更新しているブログでテーマを作ると閲覧者の方にも迷惑がかかってしまうので、僕はローカル環境にWordPressを構築しました。
Windowsには「BitNami」、Macには「MAMP」という簡単にローカルにWordPress環境を構築できるソフトがあります。
構築の方法はこちら2つのブログ様が分かりやすく解説しているので御覧ください。
おねえさんの分かりやすい説明付きで、Mac のローカル環境に WordPress をインストールしてみた – ウェブおねえさん
超簡単＆スピーディにローカル環境にPHP+MySQL 、WordPress構築を実現するBitNami – かちびと.net
ちなみに、「BitNami」はMacにもインストールできます。僕はこちらを導入しました。導入方法もBitNamiの方が簡単なのでお勧めです。
死ぬほど簡単にローカルにWordPress環境を構築できる「BitNami」の導入方法！（Mac編） | OZPAの表4
2,コードを書くのに必要なアプリを用意する
コードを書くに当たり、必須なのがエディタ。Macには「TextWrangler」という無料で高機能なHTMLエディタがあるのでこちらを使用します。
TextWrangler 4.0.1（無料）
カテゴリ: 開発ツール, 仕事効率化
販売元: Bare Bones Software, Inc. – Bare Bones Software, Inc.（サイズ: 5.2 MB）
全てのバージョンの評価: （49件の評価）
Windowsは定番の秀丸などがいいのではないのでしょうか。
3,正しく記事が見れるかダミー記事を用意する
記事が自分の書いたコード通りに表示出来るか確認するには記事のデータが必要。以下のリンクからダウンロード出来るダミー記事のデータをダッシュボードのメニューからツール＞インポートからインポートすると様々なタイプの記事で表示に乱れが無いかテストすることができます。
4,テーマのアップロードに必要なFTPクライアントを用意する
せっかく完成したテーマも、実際のサーバにアップロードしないと全く意味がありません。
Mac用のFTPクライアントには「CyberDuck」がおすすめ。
Cyberduck 4.2.1（￥2,100）
カテゴリ: 仕事効率化, ユーティリティ
販売元: David Kocher – David Kocher（サイズ: 54.6 MB）
全てのバージョンの評価: （4件の評価）
このアプリ、Mac App Storeで購入すると2100円なのですが、公式ページからダウンロードすると、極稀に寄付を迫られますが無料で全機能を使用することができます。アップロードの方法もWordPressのThemesフォルダにドラッグ&ドロップするだけとお手軽。
Windowsユーザーの方には「FFFTP」を強くおすすめ。すでに開発は終了していますが、今も有志の方がアップデートを続けています、CyberDuck同様、簡単にファイルをアップロードすることが可能です。
FFFTP (エフエフエフティーピー) プロジェクト日本語トップページ – SourceForge.JP
今回のテーマ作りで参考になったページまとめ
今回のテーマ自作にあたって、参考になったページをご紹介します。
WordPressテーマ自作を初めて行った私がお送りするWordPressテーマ自作戦記 第三回 「ブログ改造術新録 見た目篇」
Yuriko.Net » WP-PageNavi を使わずにナビゲーション表示 …
「htmlすら知らなかった私が2週間でWordpressの新テーマを作成するまでにやったこと」と参考にした記事まとめ | OZPAの表4
まずは「テーマ自作」を本格的に考えるようになったきっかけであるこちらお二方（@OZPA さんと@knk_n さん）のブログ。とっても分かりやすい説明だったので、これからテーマ自作を考えている方は必読です。
僕がWordPressデザインブックを手に入れる前に読んでわかり易かった@kouseipapa さんの記事。今となってはデザインブックに書いてあることでしたが、作り始めて間もないころは物凄くためになりました。
ど素人でも自作できたWordPressテーマの作り方。教科書は『WordPress デザインブック』 | なまら春友流
ど素人の私がWordPressテーマを自作した際にめっちゃ参考にさせていただいた13記事 …
全体の流れが解説されている@spring_friend さんの記事。使用していたソフトが丸かぶりだったのでめちゃくちゃ参考になりました。
WordPressプラグイン「WP Social Bookmarking Light」を外すことにしました
Yuriko.Net » WP-PageNavi を使わずにナビゲーション表示
今回はなるべくプラグインを減らそうと考えていたので、この手の記事は何度も読みまくってようやく実装できました。
PXtoEM.com: PX to EM conversion made simple.
Style.cssでフォントサイズを指定するとき、一般的にはpx（ピクセル）で指定するのですが、今回はemを使っての作成だったので、「13pxは何emになるのか」などを調べるときには大変助かりました。
CSSについて全く理解が無い方には大変便利なサイト。幾つかサンプルコードもあるので参考になりました。
3分動画でマスターする初心者向けプログラミング学習サイト – ドットインストール
インターネットで使用される主要言語について１単元３分以内で学べるWebサイト。今回使用したHTMLとCSSはもちろん、今後使うであろうJavascriptやjQueryについての講座もあります。短い時間で言語の仕組みについて知りたいあなたにうってつけのサイトです。実際に登録して使用する方法はこちらをどうぞ。
あらゆるプログラミング言語学習のきっかけに！神サービス「ドットインストール」で貴方も勉強しようず！！ | OZPAの表4
最後に
実際にHTMLやCSSを駆使して自分のブログをデザインする事なんて初めての体験で、何度もつまずいたり、助けを求めることも多かったですが、完成した新しいブログを見るとより自分のブログに愛着がわきます。なぜなら、「このブログの全て」を自分で管理出来るようになったから。ラクイシロクの@rakuishi07 さんも記事にておっしゃっていますが、自分で全てを管理出来るようになるととても以前のように戻りたいとは思えなくなるのです。
皆さんも、自分のブログを自分でデザインして、よりお気に入りのブログにしてみてください！