今回は、はてなブログのオリジナルテーマを自作してみます。
ここでは、オリジナルテーマを自作する手順について書いていきます。
参考文献
はじめに
ブログカスタマイズの一覧です。良かったら参考にしてください。
準備編2：はてなブログのHTML/CSSの構造を解析する（2）
第1回：「Minimalism」テーマのコードブロックの行間を調整する
第2回：「Minimalism」テーマのスマホで太字にならない問題の原因と対策
第3回：「Minimalism」テーマの目次の外観とリンク文字をカスタマイズする
第4回：「Minimalism」テーマの見出しをカスタマイズする
第5回：「Minimalism」テーマのサイドバーの各モジュールをカスタマイズする
第6回：カテゴリを階層化する（補足と問題点を追記）
第7回：Minimalismのカスタマイズ2点と、2つの問題点（スマホで見たときの画像余白と画像と背景の境界）の解決
第8回：CSS対応のタイトル付きの囲み枠を使う方法（定型文に登録）
第9回：ページ全体の表示フォントを変更する
番外編：編集ボタンを表示させる（編集ボタンを復活させる）
番外編2：カテゴリー階層化のソースコードを解析する
発展編：自作のデザインテーマを作る ← 今回
事前準備
はてなブログでは、オリジナルテーマを自作する方法について、必要な情報を記載したページがあります。
ここを参考にして、オリジナルテーマを作っていきます。
テスト用のブログを開設する
はてなブログでは、無料アカウントの場合、3個までブログを開設することができます（有料アカウントは10個まで開設できるようです）。
「デザインテーマ制作の手引き」にも書かれてるように、作成、変更したテーマを確認するためのテスト用のブログを開設します。
新しくブログを開設するには、はてなブログの管理画面から、「ダッシュボード」を開き、「新しいブログを作成」を押して、希望のURLを選ぶと、ブログが開設できます。
サンプルテーマを入手する
「デザインテーマ制作の手引き」には、サンプルテーマとして、「Boilerplate」が準備されています。
「Boilerplate」は、MITライセンスであり、自由に複製、再配布していいと書かれているので、このサンプルテーマをベースに、オリジナルのテーマを作っていきます。
ちなみに、この「Boilerplate」は、何も変更しない状態でも、シンプルなテーマとして使えるようになっています。
上記の「デザインテーマ制作の手引き」のリンクからboilerplate.cssを見つけることが出来るが、下記から直接ダウンロード（v2.1.0）できます。
https://github.com/hatena/Hatena-Blog-Theme-Boilerplate/releases/download/v2.1.0/boilerplate.css
サンプルエントリーを投稿する
「デザインテーマ制作の手引き」には、デザインを確認するために、はてなブログの記事に必要な要素をまとめた「サンプルエントリー」を用意してくれています。
この「サンプルエントリー」を、テスト用のブログに投稿しておきます。
なお、この「サンプルエントリー」は、Markdown記法で用意されているので、編集モードをMarkdown記法に設定してから、貼り付けてください。
サンプルテーマをテスト用ブログに適用する
はてなブログのブログの管理から、「 デザイン→ カスタマイズをクリック→{} デザインCSS」とすると、現在適用されているCSSが表示されます。
CSSは後に書かれたものが優先されるので、boilerplate.cssの内容を全てコピーして貼り付ければOKです。
あとは、気になったところから順番に、変更していきます。
今回は以上です！
