君は世界に一人だけ

君は世界に一人だけ

感じたことと考えたこと

はてなブログのテーマ制作がたのしい

とつぜん思い立って、はてなブログのテーマ制作 (デザインのカスタマイズ) に乗り出しました。

ブログの執筆時間を削ってcssをもりもり書いちゃうくらい、たのしくってたまりまへん! というだけの日記です。

はてな公式がお膳立てしてくれてる

いちからテーマ制作するユーザーのために、はてな公式がGithubにベーステンプレートを用意してくれています。

テーマ制作のおもな流れは以下。

1. Githubリポジトリをローカルにclone

github.com

2. npmモジュールをインストール。

3. 必要に応じてbs-config.jsとpackage.jsonを修正 (cssコンパイル先修正など)

4. npm start で監視開始。

5. scss書く。

6. コンパイルしたcssをチェック用ブログにアップ。

しばらくcssで書いてたのも、この開発環境を整えるのがめんどくさかったから。
まさかはてな公式が土台を用意してくれてたなんて……早く知りたかったよ!

ふだんはGulpかGruntで開発するのですが、cssだけだし、そこまで整えませんでした。タスクの数も最小限だからコンパイルが感動的に速いです。

全パーツの確認エントリも用意されています。いたれりつくせり。

help.hatenablog.com

テーマ制作にかんする詳細は、公式にくわしく記載されています。

help.hatenablog.com

css(scss)を勉強するのにおすすめ

はてなブログはパーツの種類が少ないから、調整するcssはそれほど多くありません。cssを勉強するのにちょうどいいボリューム感だと思います。

とはいえぜんぶをcssで書いていくのってけっこう大変なので、「scss」での記述をおすすめします。cssより圧倒的に速く書けるし、変数も使えて便利。

sass-lang.com

はてなブログ公式がベースscssを用意してくれているし、初心者の方も安心です。興味のある方はぜひ。

f:id:littleray:20211118104957j:plain

テーマ制作ってたのしい!

いちからカスタマイズするって、単純にめちゃくちゃたのしいです。

わたしはフロントエンド歴7年なのですが、いろいろと事情があって、開発現場から離れていました。

だけどはてなブログのカスタマイズをはじめたら、ものっすごくたのしくて。ああ、やっぱコーディングだいすきなんだなって思い出させてもらいました。

わたしにとってコーディングはクッキーを焼くみたいなもの。人の作ったクッキーもおいしいけど、自分であーでもないこーでもないと工夫して焼き上げるのがたのしいのです。

コーディングも、文章書くのも、ひとりでこつこつやれるのがたのしいんですよね。そんなささやかなたのしみを見つけられて、あらためてよかったなって思います。

* * *

ちなみにエディタは「WebStorm」を長年愛用中。

www.jetbrains.com

こいつのローカル履歴になんども命を救われてきました。超おすすめエディタです。

 

cssは12月に反映予定です。たんなる自己満足だけど、新しい服を着るみたいでたのしみ!