以前紹介した「WordPressの自作テーマ」をBloggerに移植すべく、今回から自作テンプレートを制作する過程を記録していこうと思う。Bloggerの自作テンプレートに関する情報は断片的なものが多く、1から制作過程を紹介しているサイトが見つからなかったので、自作テンプレート制作の足がかりになるような情報をまとめておければ幸い（完成すればいいが…）。

ともかく、まずは下準備が必要。なるべく初心者向けの情報からスタートしたいと思っている。ということで、今回は「テストブログの作成」と「開発環境の構築」について書き残しておくことにしよう。

テストブログの作成

・新しいブログを作成
・不要なプラグインを削除
・テスト記事の作成

既存のブログに作りかけのテンプレートを当てるのはマズイので、とりあえず新しいブログを作り、そこを開発環境にしようと思う。そこで、新規ブログの作成後、不要なプラグインを削除し、テスト用の記事をいくつか作っておくことにした。

開発環境の構築

・ブラウザ：Google Chrome
・エディタ：Visual Studio Code
・バージョン管理：TortoiseGit

とりあえず、テンプレートは「Visual Studio Code」を使って書くことにした。理由は過去記事の「VS CodeでBloggerテンプレートを編集すると楽かも!?」を参照してほしい。

また、テンプレートはTortoiseGitでバージョン管理していくことにする。理由は、Bloggerのテンプレートは文法がややこしく、何度かロールバックをすることになりそうだから、それの対策としていつでも以前の状態に戻せるようにするためである。TortoiseGitについては過去記事の「TortoiseGitでBloggerテンプレートのバージョン管理をする」を参照してほしい。

あと、ブラウザは「Google Chrome」を使うことにする。コードの反映状況を見るだけならブラウザなんてなんでもいいと思われるかもしれないが、CSSをいじる段階になるとChromeの「デベロッパーツール」がかなり役に立つ。これを使っていくことが前提だからChromeを使うわけ。デベロッパーツールについては過去記事の「Chromeデベロッパーツールを使えばカスタマイズが捗ります」を参照してほしい。

備考：効率よく作るにはイメージを用意しておくこと

こんな感じの図を用意しておく

ブログデザインはノープランで始めることもできるが、その場合、作り上げていくうちにアイデアがごちゃごちゃになってしまって、結果的に効率が悪くなることが多々ある。そのため、予め「ブログの完成予想図の絵」と「作業方針の箇条書き」を用意しておくと効率が良くなる（WordPressのテーマ制作のときにそう感じた）。

これらは「すべてノートに手書き」しても良いし「描画ツールで絵を書き、作業方針をテキストにまとめる」といったやり方でも良いと思う。自分はノートに手書きしながら作業を進めた。コンテンツや配色なんかも予め決めておくと作業効率がさらに高まると思う。