はてなブログのCSSを書いた

はてなのデフォルトのデザインはシンプルでよいのですが、どうせならということで以下を参考にCSSを書きました。（といっても、色味とか変えただけですけど😎）

help.hatenablog.com この手のドキュメントとしはかなり充実してるなという印象でした。

はてなブログ用のCSSを書いていく方法としては

一から必要なCSSを書いていく
Boilerplate（サンプル）を書き換えてオリジナルなCSSにする

の２つがあります。
今回はシンプルなデザインにしたかったので、手数少なくやれそうな２にしました。

BoilerplateはGithubで公開されています。

github.com

そしてこのリポジトリではSCSSで記述してあります！（諸々楽になってありがたい。はてなさん👍）

README.mdにも書いてありますが、作成手順としては

npm run startを実行する
　これでファイルの変更watch、SCSSの変換、ローカルサーバーが走ります。
はてなブログのデザイン設定の赤枠箇所に@import url("http://localhost:3000/boilerplate.css");と書いておく
ブログをリロードしながら、好きなようにSCSSを書き替えていく

といった感じです。
ちなみに、SCSS内は以下のような感じで参考になるコメントが書いてあります。

/* ヘッダ（グローバルヘッダ）
  グローバルヘッダの中はiframeですが、
  #globalheader-container に背景色や文字色を指定することでiframeの中にも色が反映されます。
*/
#globalheader-container {
    background-color: $text;
    color: $background;
}

今回は思いっきり雰囲気とか配置を変えるつもりはなかったので、
ボイラープレートを踏襲してシンプルな感じにしつつ色味とか細かいところをちょこちょこ変更しました。

コードのシンタックスハイライトはあまり見かけないものにしてみようと思い
以下のリポジトリを参考に配色しました。

github.com

（ちょっと見にくいかも... あまりに気になるようだったら変更しよう。）

ちなみに、今回作成したテーマはBoilerplateのリポジトリをフォークして作りました。
フォークして作成してる人はあんまり居ないようですが、わざわざ自分で書こうと思う人は少ないのでしょうか。

github.com

CSS書いてて思いましたけど、色を考えるのは大変ですよね。
特に僕みたいな素人は。