はてなブログテーマ「Color Book」を作りました。
テーマの特徴はデモブログにくわしく書いているので、
ここでは簡単に解説したあと、なぜ作ったのかを書いていきたいと思います。
はてなブログテーマ「Color Book」の特徴。
Color Bookとは「ぬり絵」のことです。
デザインを最小限におさえたことで、ぬり絵を塗るように自分好みにカスタマイズできます。
もう一つ大きな特徴はヘッダー画像がレスポンシブ対応しているということです。
スマホ・タブレットでも画像が見切れることなくきれいに表示されます。
これははてなブログテーマとしてはめずらしいんじゃないでしょうか。
(他にある？)
もちろんヘッダー画像だけでなくすべてレスポンシブ対応です。
あと、スマホ画面でも一画面で5記事くらい映るし、アイキャッチ画像も大きめなので見やすいと思います。
もうすでにこのブログにも適用済みで、記事やサイドバーの見出しには自分好みのデザインを付けています。
自分が「こういうテーマがあったらいいな」と思ったテーマを作ったので、結構気に入ってます。
なぜ作った？
私はこんなテーマがあったらいいなと思っていました↓
- デフォルトであまりデザインが付いていなくて、自分好みのデザインを付けられる。
- ブログらしいオーソドックスなデザインで、アイキャッチ画像が大きめ。
- ヘッダー画像がレスポンシブ対応。
くわしく解説していきます。
デフォルトでデザインがあまり付いていなく、自分好みのデザインを付けられる。
この理由は単純に、
見出しにこのデザインを付けたかったんです↓
これかわいいですよね。
ブログらしいオーソドックスなデザインで、アイキャッチ画像が大きめ。
今ってカード型がトレンドですよね。
カード型はおしゃれでいいんですが、ブログを見慣れてない人が見ると「新着記事はどこ？」ってなる可能性があります。
（あくまで私の意見ですが）
だからあえて流れに逆行しオーソドックスなデザインにしました。
ただ、そうするとアイキャッチ画像が小さめになってしまいがちなので、大きめにしました。
ヘッダー画像がレスポンシブ対応。
はてなブログってスマホ画面だと基本的にヘッダー画像見切れてしまいますよね。
見切れないようにするにはCSSを書かないといけなかったり。
「じゃあ最初からヘッダー画像もレスポンシブ対応しているテーマを作ったらいいんじゃないかな」と思い作りました。
テーマ名について。
テーマ名は最初、"利用できる、役に立つ"という意味の「Avail」を考えてました。
でもあまり馴染みのない英語ですし、読み方も「アバイル？アベイル？」ってよくわからないですよね。
そんななかテーマを作ってるうちに「これぬり絵みたいだな」と思い、Color Bookにしました。
どうやって作った？
はてなブログのテーマを作るのは初めてなので、最初どうやって作ればいいのかわかりません。
私が参考にしたサイトはこの２つ↓
はてなブログで自作のデザインテーマを公開 ～デザインテーマ作成・公開方法まとめ～ - 【ちゃんこめBlog】インド在住OLの雑記ブログ
これらを読みながら見よう見まねで作ったらできちゃいました。
手順としては簡単なのですが、イメージどおりのデザインにしようとすると結構大変です。
こだわらなければ簡単に作れます。
グローバルナビは？
このテーマはグローバルナビも対応しています。
グローバルナビは以前作った「階層グローバルナビ」を、階層ではなくシンプルにしたものを実装しています。
【はてなブログ向け】階層グローバルナビを作りました。 - 虹の子育てblog
以上です。
