［はてなブログ］ブログテーマカスタマイズ開発環境の作り方
こんにちわ！Noob Web Designer（@NoobWebDesigner）です！
今回は、はてなブログのテンプレートカスタマイズ開発環境の作り方をご紹介します。 はてなブログ公式が公開している「Hatena-Blog-Theme-Boilerplate」を利用して、開発環境を整えます。
こちらの環境を整えることによって、Node.jsを利用したリアルタイムプレビューとSassを利用したCSSのカスタマイズが可能です。
Node.jsをインストールする。
None.jsをターミナルを使ってインストールします。
詳しいインストール方法は前回ブログに書きましたのでご参照ください。
game-web-design.hatenadiary.com
Hatena-Blog-Theme-Boilerplateのインストール
GitHubからHatena-Blog-Theme-Boilerplateをインストールします。
GitHubアカウント作成と SSH Key の作成と登録
Hatena-Blog-Theme-Boilerplateをインストールする前に、Githubのアカウント登録やSSH Keyの作成と登録が必要になりますので、下記を参考に準備をしてください。
Hatena-Blog-Theme-Boilerplateをインストール
Hatena-Blog-Theme-Boilerplateをインストールしていきます。
今回は/Users/ユーザー名/blog/new-themeにHatena-Blog-Theme-Boilerplateをインストールします。
ターミナルを開いて下記を実行します。
$ git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git /Users/ユーザー名/blog/new-theme
すぐにインストールは終わると思います。
このままnpmをインストールします。
ターミナルに下記を入力して実行します。
$ cd /Users/ユーザー名/blog/new-theme
$ npm install
npmをインストールした後で、npmを実行し、Hatena-Blog-Theme-Boilerplateが動くかどうか確認します。
$ npm start
下記のようなステータスが現れたらインストール成功です。
Watching "scss/" .. [Browsersync] Access URLs: --------------------------------------- Local: http://localhost:3000 External: http://192.168.11.224:3000 --------------------------------------- UI: http://localhost:3001 UI External: http://192.168.11.224:3001 --------------------------------------- [Browsersync] Serving files from: build [Browsersync] Watching files...
new-themeフォルダにbuildフォルダが作られ、その中にboilerplate.css boilerplate.css.mapが作成されます。
Ctrl + Cを押して、Hatena-Blog-Theme-Boilerplateを一旦終了させます。
はてなブログ側での設定
カスタマイズ用ブログを作成する
マイブログ一覧から「新しいブログを作成」を押して新しいブログを作ります。
新しいブログのURLは公開するものではないので、任意のURLと「自分のみ」公開を選択して新しいブログを作ります。
ブログの設定をする
ブログメニューの「設定」から「基本設定」内で「編集モード」を「はてな記法モード」を選択します。
「詳細設定」より「検索エンジン最適化」の「headに要素を追加」に下記を追記します。
<link rel="stylesheet" href="http://localhost:3000/boilerplate.css"/> <script async src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>
ブログに適応してあるブログテーマを削除する（3/10追記）
「デザイン」より「カスタマイズ」を選択し、「デザインCSS」を下記に書き換えます。
/* <system section="theme" selected="life"> */ /* </system> */
サンプルエントリーを投稿する。
はてなブログ公式が用意している、表示テスト用のサンプルエントリーを投稿します。
下記をコピーして、ブログを投稿します。表示確認のため3〜4記事ほど投稿するとなお良いと思います。
** 段落
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
** フォトライフ
*** 左
[f:id:hatenablog:20101106100658j:image:w300:left]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
<br style="clear:both">
*** 右
[f:id:hatenablog:20101106100658j:image:w300:right]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
<br style="clear:both">
*** ブロック
[f:id:hatenablog:20101106100658j:image:w300]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
*** 大きい画像
[f:id:hatenablog:20101106100658j:image]あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
*** 罫線
<hr>
<h1>h1見出し</h1><p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。<br/>ABCDEFGHIJKLMabcdefghijklm1234567890</p>
<h2>h2見出し</h2><p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。<br/>ABCDEFGHIJKLMabcdefghijklm1234567890</p>
*h3見出し（*）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
** h4見出し（**）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
*** h5見出し（***）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
ABCDEFGHIJKLMabcdefghijklm1234567890
<h6>h6見出し</h6><p>あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。<br/>ABCDEFGHIJKLMabcdefghijklm1234567890</p>
** asin
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
[asin:4798110523:detail]
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
** 引用
>http://d.hatena.ne.jp/hatenadiary/20071112/1194858362:title=「公開デザイン祭2007秋」を開始しました - はてなダイアリー日記>
本日（11月12日）から11月27日まで、はてなダイアリーの公開デザインコンテスト「公開デザイン祭2007秋」を開催します。
<<
** リスト（ul,ol,dl）
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
-大賞1名：Amazonギフト券5万円分
-入選9名：Amazonギフト券1万円分
--大賞1名：Amazonギフト券5万円分
--入選9名：Amazonギフト券1万円分
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
+大賞1名：Amazonギフト券5万円分
+入選9名：Amazonギフト券1万円分
++大賞1名：Amazonギフト券5万円分
++入選9名：Amazonギフト券1万円分
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
:大賞1名:Amazonギフト券5万円分
:入選9名:Amazonギフト券1万円分
** テーブル
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
|*名前|*色|*個数|
|りんご|赤|1|
|みかん|だいだい|2|
あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。
** PRE
>|css|
.XXX {
width:999px;
height:999px;
}
.propA, .propB, .propC {
width:999px;
height:999px;
}
#YYY {
width:9px;
height:999px;
}
||<
ブログの表示を確認する。
ここで一旦ブログの表示を確認します。
下記の画像のように表示されているかと思います。
ここで先ほどインストールしたHatena-Blog-Theme-Boilerplateをもう一度起動します。
$ cd /Users/ユーザー名/blog/new-theme $ npm start
もう一度ブログの表示を確認します。
下記のようにブログにCSSが反映されていれば一通りの設定は完了です。
Sassを編集してカスタマイズする
Hatena-Blog-Theme-BoilerplateはSassで作られているので、Sassを編集していきます。
試しにタイトルの文字の大きさを修正します。
scssフォルダからlibフォルダを開き_core.scssを開きます。
146行目のfont-size: 1.7rem;をfont-size: 3remに書き換えます。するとデスクトップでのタイトル文字の大きさが変化します。
_core.scssには、ブログテーマの主なスタイルが収められているので、カスタマイズをする際はこのファイルを中心に修正していくといいと思います。
