つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録 ~ はてなブログテーマの自作

 今まで既存テーマ(smooth)についてHTML/CSSJavaScriptを用いてデザインCSSなどで追記することで、smoothのデザインをカスタマイズという形でデザインしていたが、一からテーマを作ることもできる。 ブランクからCSSを記述する方法もあるが、最低限のはてなブログのフォーマットが記述されているCSSのテンプレートとしてBoilerplateを利用する方法が手引きとして紹介されている。 なおはてなブログのテーマデザインはCSSの部分のみでHTML構造は変更(追加の場合はデザインメニューからHTML要素を記述)できない。

help.hatenablog.com

今回はBoilerplateをはてなブログのデザインに適用して、テーマを作成する環境を作る方法について紹介する。

1. Boilerplateの入手

Boilerplateの入手は下記からboilerplate.cssをダウンロードすることができる。

GitHub - hatena/Hatena-Blog-Theme-Boilerplate

次にダウンロードしたboilerplate.cssはてなブログに適用する方法については

はてなブログのテーマ作成の仕方 – ブログ運営のためのブログカスタマイズ

にあるが、

  1. cssファイルを外部のレンタルサーバーに保存してヘッダー部などから外部CSSファイルとして読み込む。

  2. boilerplateの中身をコピーしてデザインCSSの部分にコピーする。

上記の方法でもよいが、1はレンタルサーバーを利用していない場合は、利用する手続きが必要になる、2の場合はデザインCSSのエディタ(?)がかなり使いにくいので、まとまったコーディングには不向きという欠点がある。

2. SCSS/Node.jsの利用

第3の方法としてGitHub - hatena/Hatena-Blog-Theme-Boilerplateでは SCSS/Node.jsの利用する場合の手順が書かれている。

node.jsをインストールして

$ git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git
$ cd Hatena-Blog-Theme-Boilerplate
$ npm install

でセットアップすることが書かれているが、いくつか前準備が必要になる。

  1. Githubのアカウントを作成する

  2. gitコマンドが使えるようにgitをインストールする

  3. gitにより公開鍵を作成し、Githubの個人ページに設定する

  4. node.jsをインストールして、上記のコマンドを実行する

3. node.js利用の前準備

Githubのアカウントは以下のサイトで作成する。

github.co.jp

次にgithubからクローン(ディレクトリ構造とファイルのコピー)を実行するために用いるgitなどのコマンドを使えるようにgitをインストールする。

Git

gitを用いてgithubにアクセスするために公開鍵を作成する。公開鍵の設定をしない、または失敗している状態でクローンを作成しようとすると

$ git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git
Cloning into 'Hatena-Blog-Theme-Boilerplate'...
The authenticity of host 'github.com (13.114.40.48)' can't be established.

git@github.com: Permission denied (publickey).
fatal: Could not read from remote repository.

上のようなエラーメッセージがあらわれて失敗する。公開鍵の作成方法やgithubへの登録方法は下記参照だが、

tusukuru.hatenablog.com

概略手順としては、gitを用いて以下のように鍵を作成する。

$ ssh-keygen -t rsa -C xxxx@mail.com
Generating public/private rsa key pair.

Your public key has been saved in /c/Users/username/.ssh/id_rsa.pub
The key fingerprint is:

生成した鍵ファイルは.ssh内にid_rsaid_rsa.pubが作成される。公開鍵はid_rsa.pubで、ファイルの中身ssh-rsa xxxxxxxxxxxxxxxxxxxxxxxxxxxx mail@mail.comのうちssh-rsa xxxxxxxxxxxxxxxxxxxxxxxxxxxxまでコピーする。

次にgithubのsettings → SSH and GPG keysでNew SSH keyをクリックして、先ほどコピーした中身を貼り付けてgithub側の設定は完了。 .ssh/内にconfigファイルを例えばvim ~/.ssh/configとして作成し、configの中身は

Host github
  HostName github.com
  IdentityFile ~/.ssh/id_rsa
  User git

上の作業が正しく実行されgithubと接続できるかどうか以下のコマンドで、成功すると成功した旨のメッセージが表示される。

$ ssh -T git@github.com
Hi username! You've successfully authenticated, but GitHub does not provide shell access.

ここまでできたら、gitを用いてはてなブログgithubサイトからクローンを実行することができる。正しくクローンできていれば以下のような表示になる。

$ git clone git@github.com:hatena/Hatena-Blog-Theme-Boilerplate.git
Cloning into 'Hatena-Blog-Theme-Boilerplate'...
remote: Enumerating objects: 53, done.
remote: Total 53 (delta 0), reused 0 (delta 0), pack-reused 53
Receiving objects: 100% (53/53), 19.39 KiB | 684.00 KiB/s, done.
Resolving deltas: 100% (18/18), done.

3. はてなブログの設定のnode.jsの利用

node.jsをインストールしていない場合は下記サイトからダウンロードとインストールを実行する。

nodejs.org

またテーマのデザイン・動作を確認するための非公開のはてなブログを開設する。

node.jsなどのコマンドプロンプト(git Bashでも可)からcd Hatena-Blog-Theme-Boilerplateのようにディレクトリに移動してから

$npm install

としてクローンしたファイルのインストールを行う。終了したら続けてnpm startとするとコンパイルが始まり、最後にWatching "scss/"以下が表示されたところでSCSSファイルの監視が開始される。 終了するときはCtrl+Cでバッチ終了にYを入力すれば監視が終了する。

$npm start
…
…

Watching "scss/" ..
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.2.100:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: build
[Browsersync] Watching files...

前後してもよいが、デザイン確認用のはてなブログのデザインCSSにデフォルトの記述を以下のコードに書き換える。

@import url("http://localhost:3000/boilerplate.css");

node.jsのSCSSの監視が実行されている間は、Boilerplateのテンプレートが適用されてブログデザインに反映される。監視を終了させると元のHTMLのみの表示に戻る。

5. Boilerplateの実行例

 Boilerplateの適用前と適用後の状態を以下に示す。記事自体はサンプルエントリーのものが提供されているが、最近の記事をコピーして適用した。Boilerplate適用前でデザインCSSにデフォルトの記述を削除している状態では、素のスタイルが設定されていないHTMLが表示される。

"Boilerplate適用前"
Boilerplate適用前

サイドメニューはレイアウトされていないのでスマホメニューのように一番下に表示される。

"Boilerplate適用前のサイドメニュー"
Boilerplate適用前のサイドメニュー

Boilerplateを適用すると記事の表示位置やサイドメニューとしてレイアウトされていることがわかる。

"Boilerplate適用後"
Boilerplate適用後

6. まとめ

 今回は自作テーマを作成する場合で、Boilerplateを使用する場合の必要な手順・作業について紹介した。