虹の子育てblog

2人の女の子のパパです。子育ての事、お役立ち情報など書いていきます。

はてなブログテーマ「Color Book」を作りました。

f:id:gharuto:20220615160034j:image

はてなブログテーマ「Color Book」を作りました。

Color Book - テーマ ストア

 

テーマの特徴はデモブログにくわしく書いているので、

ここでは簡単に解説したあと、なぜ作ったのかを書いていきたいと思います。

 

はてなブログテーマ「Color Book」の特徴。

Color Bookとは「ぬり絵」のことです。

デザインを最小限におさえたことで、ぬり絵を塗るように自分好みにカスタマイズできます。

 

もう一つ大きな特徴はヘッダー画像がレスポンシブ対応しているということです。

スマホ・タブレットでも画像が見切れることなくきれいに表示されます。

これははてなブログテーマとしてはめずらしいんじゃないでしょうか。

(他にある?)

 

もちろんヘッダー画像だけでなくすべてレスポンシブ対応です。

 

あと、スマホ画面でも一画面で5記事くらい映るし、アイキャッチ画像も大きめなので見やすいと思います。

 

もうすでにこのブログにも適用済みで、記事やサイドバーの見出しには自分好みのデザインを付けています。

 

自分が「こういうテーマがあったらいいな」と思ったテーマを作ったので、結構気に入ってます。

 

なぜ作った?

私はこんなテーマがあったらいいなと思っていました↓

  1. デフォルトであまりデザインが付いていなくて、自分好みのデザインを付けられる。
  2. ブログらしいオーソドックスなデザインで、アイキャッチ画像が大きめ。
  3. ヘッダー画像がレスポンシブ対応。

 

くわしく解説していきます。

 

デフォルトでデザインがあまり付いていなく、自分好みのデザインを付けられる。

この理由は単純に、

見出しにこのデザインを付けたかったんです

 

これかわいいですよね。

 

ブログらしいオーソドックスなデザインで、アイキャッチ画像が大きめ。

今ってカード型がトレンドですよね。

カード型はおしゃれでいいんですが、ブログを見慣れてない人が見ると「新着記事はどこ?」ってなる可能性があります。

(あくまで私の意見ですが)

だからあえて流れに逆行しオーソドックスなデザインにしました。

 

ただ、そうするとアイキャッチ画像が小さめになってしまいがちなので、大きめにしました。

 

ヘッダー画像がレスポンシブ対応。

はてなブログってスマホ画面だと基本的にヘッダー画像見切れてしまいますよね。

見切れないようにするにはCSSを書かないといけなかったり。

「じゃあ最初からヘッダー画像もレスポンシブ対応しているテーマを作ったらいいんじゃないかな」と思い作りました。

 

テーマ名について。

テーマ名は最初、"利用できる、役に立つ"という意味の「Avail」を考えてました。

でもあまり馴染みのない英語ですし、読み方も「アバイル?アベイル?」ってよくわからないですよね。

 

そんななかテーマを作ってるうちに「これぬり絵みたいだな」と思い、Color Bookにしました。

 

どうやって作った?

はてなブログのテーマを作るのは初めてなので、最初どうやって作ればいいのかわかりません。

 

私が参考にしたサイトはこの2つ↓

はてなブログで自作のデザインテーマを公開 ~デザインテーマ作成・公開方法まとめ~ - 【ちゃんこめBlog】インド在住OLの雑記ブログ

 

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

 

これらを読みながら見よう見まねで作ったらできちゃいました。

 

手順としては簡単なのですが、イメージどおりのデザインにしようとすると結構大変です。

 

こだわらなければ簡単に作れます。

 

グローバルナビは?

このテーマはグローバルナビも対応しています。

グローバルナビは以前作った「階層グローバルナビ」を、階層ではなくシンプルにしたものを実装しています。

【はてなブログ向け】階層グローバルナビを作りました。 - 虹の子育てblog

 

 

以上です。