ボクココ

個人開発に関するテックブログ

はてなブログのデザインを本格的に開発できる環境を作ったよ

ども、@kimihom です。

はてなブログを本気でカスタマイズすれば、メディアのような UI を実現することも夢ではない。はてなブログは記事の管理やSNS、SEOなどは標準でうまいことできてるから、デザインだけ頑張れば良いことになる。ただ、通常のやり方ではてなブログをカスタマイズするとなると、とても手間になることが多い。

そこで自分の考える最高のはてなブログデザインのカスタマイズ環境を用意して Github に公開した。

github.com

実際の方法は上記のリンク先を見て確認していただきたい。

以下はプログラミングとか全くやったことない人向けにちょっと概要を説明する。

LESS とは?

LESS とは CSS をより効率良く書く為の言語。通常のCSSだと入れ子のような書き方ができなかったり、共通の値をそれぞれ直書きしないといけなかったりで効率が悪かった。LESS を使えばそのような課題を解決できる。

ただし、 LESS で書いたコードは最終的に CSS に変換しなければ、ブラウザが読み込んでくれない。そのためにLESSをCSSに変換するプログラムが必要だ。

Node.js, Grunt とは?

Node.js はプログラミング言語の一種。そのNode.jsを使って Grunt ってのは動いている。

Grunt を使うと、あらゆるタスクを定義することができる。今回は、 LESS コンパイラとLiveload が付属している。 LESSコンパイラはLESSからCSSに変換してくれるための仕組みだ。Liveload は、LESS ファイルを修正するだけで、その変更を察知し、特定のアクションを起こしてくれる仕組みのこと。今回はLESSファルが変更されたら、Dropbox上にコンパイルしたCSSを配置するってのを定義している。

てことで、諸々のセットアップが完了したら、grunt ってコマンドを叩くだけでDropboxへLESSから変換されたCSSがコピーされる仕組みが整う。

作ったらテーマストアに投稿してね

自分が作ったCSS集を公開できるストアがある。

テーマ ストア - はてなブログ

普通に考えたらせっかく自分が頑張って作ったブログが、他の人にパクられるんじゃないかってことになるかと思うんだけども、それがプログラミングにおけるオープンソースの考え方なんだ。自分が作ったCSSを他の誰かが作ってくれている。パクられたとかじゃなくて、そういうことに喜びを感じられるようになろう。

デザイナーツールは金ばっかりかかって、エンジニアツールは金がかからないのはそうした奉仕の精神がエンジニアにはあるからだ。これを理解できればきっとあなたはデザイナーから、生粋のエンジニアになることができるだろう。