- 1. Boilerplateの入手
- 2. SCSS/Node.jsの利用
- 3. node.js利用の前準備
- 3. はてなブログの設定のnode.jsの利用
- 5. Boilerplateの実行例
- 6. まとめ
今まで既存テーマ(smooth)についてHTML/CSS、JavaScriptを用いてデザインCSSなどで追記することで、smoothのデザインをカスタマイズという形でデザインしていたが、一からテーマを作ることもできる。 ブランクからCSSを記述する方法もあるが、最低限のはてなブログのフォーマットが記述されているCSSのテンプレートとしてBoilerplateを利用する方法が手引きとして紹介されている。 なおはてなブログのテーマデザインはCSSの部分のみでHTML構造は変更(追加の場合はデザインメニューからHTML要素を記述)できない。
今回はBoilerplateをはてなブログのデザインに適用して、テーマを作成する環境を作る方法について紹介する。
1. Boilerplateの入手
Boilerplateの入手は下記からboilerplate.cssをダウンロードすることができる。
GitHub - hatena/Hatena-Blog-Theme-Boilerplate
次にダウンロードした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
でセットアップすることが書かれているが、いくつか前準備が必要になる。
Githubのアカウントを作成する
gitコマンドが使えるようにgitをインストールする
gitにより公開鍵を作成し、Githubの個人ページに設定する
node.jsをインストールして、上記のコマンドを実行する
3. node.js利用の前準備
Githubのアカウントは以下のサイトで作成する。
次にgithubからクローン(ディレクトリ構造とファイルのコピー)を実行するために用いる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への登録方法は下記参照だが、
概略手順としては、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_rsa
とid_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をインストールしていない場合は下記サイトからダウンロードとインストールを実行する。
またテーマのデザイン・動作を確認するための非公開のはてなブログを開設する。
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を適用すると記事の表示位置やサイドメニューとしてレイアウトされていることがわかる。
6. まとめ
今回は自作テーマを作成する場合で、Boilerplateを使用する場合の必要な手順・作業について紹介した。