PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

[はてなブログ]ブログテーマカスタマイズ開発環境の作り方

f:id:game-web-design:20180309144818j:plain

こんにちわ!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の作成と登録が必要になりますので、下記を参考に準備をしてください。

qiita.com

qiita.com

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

下記のようなステータスが現れたらインストール成功です。

new-themeフォルダにbuildフォルダが作られ、その中にboilerplate.css boilerplate.css.mapが作成されます。

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...

Ctrl + Cを押して、Hatena-Blog-Theme-Boilerplateを一旦終了させます。

はてなブログ側での設定

カスタマイズ用ブログを作成する

マイブログ一覧から「新しいブログを作成」を押して新しいブログを作ります。

f:id:game-web-design:20180309114626p:plain

新しいブログのURLは公開するものではないので、任意のURLと「自分のみ」公開を選択して新しいブログを作ります。

f:id:game-web-design:20180309114638p:plain

ブログの設定をする

ブログメニューの「設定」から「基本設定」内で「編集モード」を「はてな記法モード」を選択します。

f:id:game-web-design:20180309120054p:plain

「詳細設定」より「検索エンジン最適化」の「headに要素を追加」に下記を追記します。

<link rel="stylesheet" href="http://localhost:3000/boilerplate.css"/>
<script async src="http://localhost:3000/browser-sync/browser-sync-client.js"></script>

f:id:game-web-design:20180309115853p:plain

ブログに適応してあるブログテーマを削除する(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;
}
||<

ブログの表示を確認する。

ここで一旦ブログの表示を確認します。

下記の画像のように表示されているかと思います。

f:id:game-web-design:20180309121906p:plain

ここで先ほどインストールしたHatena-Blog-Theme-Boilerplateをもう一度起動します。

$ cd /Users/ユーザー名/blog/new-theme
$ npm start

もう一度ブログの表示を確認します。

下記のようにブログにCSSが反映されていれば一通りの設定は完了です。

f:id:game-web-design:20180309122126p:plain

Sassを編集してカスタマイズする

Hatena-Blog-Theme-BoilerplateはSassで作られているので、Sassを編集していきます。

試しにタイトルの文字の大きさを修正します。

scssフォルダからlibフォルダを開き_core.scssを開きます。

146行目のfont-size: 1.7rem;font-size: 3remに書き換えます。するとデスクトップでのタイトル文字の大きさが変化します。

f:id:game-web-design:20180309123926p:plain

_core.scssには、ブログテーマの主なスタイルが収められているので、カスタマイズをする際はこのファイルを中心に修正していくといいと思います。

参考文献

github.com

help.hatenablog.com