読者です 読者をやめる 読者になる 読者になる

AIUEO Lab2

1年のうち250日は夕飯を作る主夫が、iPhoneや料理、気になったものを紹介するブログです。

はてなブログのデザインテーマを作りたい!必要なデータを集めてみた

hatenablog_theme

今このブログは「はてなブログ」を使っています。はてなブログは、たくさんのテーマが用意されていて、どれもオシャレ。

WordPressやMovable Typeのような自前サーバーを用意する必要がないブログサービスの中で見ると、はてなブログのテーマは他のブログサービスより洗練されていると思います。

テーマを選んだらすぐに書き始められるのがはてなブログのいいところ。

でも、ある程度長くブログを運営していると、どうしても自分の好きなようにブログデザインをカスタマイズしたい欲がでてきます。

今もカスタマイズはしていますが、追記してカスタマイズするのが嫌になったので「この際イチからテーマ作っちゃおうかな?」と思いたち、実際テーマの作り方を調べることにしました。

スポンサーリンク

テーマを作るには

基本はここでチェック

はてなブログテーマ制作の手引き - はてなブログ ヘルプ

テーマをつくる際に基本となることが書かれています。テーマの構成や各ページ(Aboutページや、アーカイブページ)のURL、CSSのチェックリスト、注意点はここでチェック。

カスタマイズの土台になるテーマ

デザインCSSをカスタマイズする土台に適したサンプルテーマを公開しました - はてなブログ開発ブログ

必要最小限の見た目だけが書かれたシンプルなテーマ。これに肉付けすればいいだけなので、見出しや記事部分のカスタマイズをしたいだけならこれを使えば簡単にできます。

構造をザッと確認するなら

これはザッと確認する時に。変更されるかもしれないので、実際に作るときはChromeのデベロッパーツールなどで確認しましょう。

実際の作り方の流れ

sassを使うなら

テーマができたらここに公開

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

テーマができたら、「テーマストア」に公開しましょう。ここには、他の方が作成したテーマがたくさん公開されているので参考になります。

参考になるテーマ

すでに公開されている、好きなテーマをいくつか。

hatenablog_theme_pathbook

Pathbook - レスポンシブデザイン。2カラム。

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

hatenablog_theme_gravity

Gravity - レスポンシブデザイン。3カラム。

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

hatenablog_theme_written

Written - レスポンシブデザイン。2カラム。

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

あれ、ここまで紹介したテーマ、すべて作者は「jclv」さん。こんなに好きなテーマがかぶるなら、自分で作らなくてもいい気がしてきた…。

hatenablog_theme_photograph

Photograph - レスポンシブデザイン。1カラム。

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

写真を見せるためのテーマ。こういうの好き。

hatenablog_theme_supernova

SUPER NOVA - このブログを始めた時に使わせてもらっていたテーマ

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

hatenablog_theme_report

Report - 今このブログで使っているテーマです。これをカスタマイズして、今表示されているブログを作っています。

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

テーマじゃないけど、すごいデザイン

141029-0002

表紙 - くらげごはん。

これはテーマにはできないけど、はてなブログでこんなデザインもできるんだよという例に。

上のブログの著者kudakurageさんの作ったテーマ

hatenablog_theme_ordble

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

テーマにフキダシ取り入れるのも面白いかな。

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

あとがき

タイトルで「テーマ作ります!」と書いたのは、宣言です。言っちゃったら後戻りできないから、やろうと思ったことを宣言しておくってアレです(笑)

公開は年内…いや、年始…もしテーマを作ったら、このブログでお知らせします。

作るとしたらレスポンシブWebデザインで作ります。はてなブログProを契約してない人でもスマホデザインをデフォルトで使わないでいいように。