はてなブログのデザインカスタマイズ方法(テーマ作成)

スポンサーリンク

はてなブログのデザインカスタマイズでCSSの上書きが複雑になってきたので、テーマを使用せずに新しく作る事にしました。作るとは言っても今のところテーマの公開はしません。

サンプルテーマ

まず、WebデザイナーじゃないのでゼロからCSS書き上げるのしんどいなと思ってたら、上記リンク先の「はてなブログテーマ制作の手引き」を見るとサンプルテーマがあるということだったので、おとなしく使う事にしました。以下のGitHubリンク先にあるBoilerplate.cssを元にして作成していきます。

https://github.com/hatena/Hatena-Blog-Themes/tree/master/boilerplate

デザインCSSに元々何か記述されている場合は全て消してから、Boilerplate.cssの内容をコピペします。そうすると以下のような非常にシンプルなデザインになります。ここからCSSを修正していく作業です。

f:id:tasukujp:20140908194300p:plain

CSS修正

CSSを修正する際には別途テキストエディタを使用した方がいいでしょう。デザインCSSの編集画面だととてもじゃないけど無理です。私はsublimetextを使ってます。
Download - Sublime Text

f:id:tasukujp:20140908195946p:plain

これを見てもわかる通りサンプルテーマのCSSでも1076行あります。多いなとやる気が削がれる場合もあるかもしれませんが、全てを修正する訳ではありませんので勉強がてらいじってみたらいいかもしれません。実際、私は300行強の修正で済んでると思います。

そして実際に修正した基本形が以下の形になりました。画像は一切使ってないのでCSSで全て修正しています。シンプルなレイアウトでテーマカラーは緑にしようと決めていたので、結構サンプルのままいけた感じでデザインは大きくは変わってないです。CSSの詳細については修正した箇所を全て書こうと思ったんですが、量が多いので個別に記事にしようと思います。

f:id:tasukujp:20140908200834p:plain

テーマ作成といってもこれだけなので、CSSが多少なりともわかる人はサンプルテーマのCSSを見ながら修正出来るので試してみてもいいですね。はてなブログのデザインはHTMLをいじれないのがネックですが、CSSと画像だけでも出来る事は多いので今後も少しづつ修正していきたいと思います。