【解説】ブログカスタマイズ：自作のデザインテーマを作る

今回は、はてなブログのオリジナルテーマを自作してみます。

ここでは、オリジナルテーマを自作する手順について書いていきます。

ブログカスタマイズの一覧です。良かったら参考にしてください。

ブログカスタマイズのまとめ

はてなブログでは、オリジナルテーマを自作する方法について、必要な情報を記載したページがあります。

ここを参考にして、オリジナルテーマを作っていきます。

はてなブログでは、無料アカウントの場合、3個までブログを開設することができます（有料アカウントは10個まで開設できるようです）。

「デザインテーマ制作の手引き」にも書かれてるように、作成、変更したテーマを確認するためのテスト用のブログを開設します。

新しくブログを開設するには、はてなブログの管理画面から、「ダッシュボード」を開き、「新しいブログを作成」を押して、希望のURLを選ぶと、ブログが開設できます。

「デザインテーマ制作の手引き」には、サンプルテーマとして、「Boilerplate」が準備されています。

「Boilerplate」は、MITライセンスであり、自由に複製、再配布していいと書かれているので、このサンプルテーマをベースに、オリジナルのテーマを作っていきます。

ちなみに、この「Boilerplate」は、何も変更しない状態でも、シンプルなテーマとして使えるようになっています。

上記の「デザインテーマ制作の手引き」のリンクからboilerplate.cssを見つけることが出来るが、下記から直接ダウンロード（v2.1.0）できます。

「デザインテーマ制作の手引き」には、デザインを確認するために、はてなブログの記事に必要な要素をまとめた「サンプルエントリー」を用意してくれています。

この「サンプルエントリー」を、テスト用のブログに投稿しておきます。

なお、この「サンプルエントリー」は、Markdown記法で用意されているので、編集モードをMarkdown記法に設定してから、貼り付けてください。

はてなブログのブログの管理から、「デザイン→ カスタマイズをクリック→{} デザインCSS」とすると、現在適用されているCSSが表示されます。

CSSは後に書かれたものが優先されるので、boilerplate.cssの内容を全てコピーして貼り付ければOKです。

あとは、気になったところから順番に、変更していきます。

今回は以上です！

daisukeの技術ブログ