２カラムで、アイキャッチが大きくて、そこそこ使い勝手の良いはてなブログテーマ「 UnderShirt 」を公開しました。
特徴
- 一覧（archive）ページで、記事のアイキャッチ画像を大きく表示
- PCではサイドカラムを表示、336px（レクタングル広告）確保
- レスポンシブ対応
過去のテーマとの違い
アイキャッチ（サムネイル）画像を大きく表示するテーマを過去にも作成（ thumbnail2 、thumbnail ）しましたが、ダイナミックなレイアウトを優先した結果、クセが強くカスタマイズが難しいテーマになっていました。
その辺り見直して、無難でカスタマイズしやすいテーマを目指しました。
新しい公式 Boilerplate
はてなブログ公式の開発用テーマが少し新しくなっていたので試してみました。
- LESSからSCSSに変わった
- browser-sync で確認が楽に
特に Media Queries 周りの仕組みが新しくなっています。他は特に気にならず使えました、ありがたや〜。
注意点
一覧ページのアイキャッチは正方形にトリミングされている
UnderShirt では正方形画像の上下を隠して、長方形のアイキャッチっぽく見せています。
正方形で出力されるのは、はてなブログの仕様です。もし文字を画像の端に載せていた場合、切れて読めなくなりますので、はてなブログでは重要な情報は正方形に収めるデザインのアイキャッチを作るのが現状望ましいです。
他の方法、例えば上下に余白を入れた画像を登録すると、 UnderShirt の一覧ページでの見た目は改善されます。
ただし、記事下の関連記事表示では、アイキャッチ画像のサイズ指定ができず、上下の余白が見えてしまうことになります。
また、SNSでシェアした際も、正方形で表示される際に同様に余白が見えてしまいます。このように、記事一覧ページでの決め手となる対策は今のところないので、今後のアップデートに期待したいですね。
ちなみに当ブログはそもそも記事一覧（archive）ページを使っていません。人気のはてなブログテーマ ZENO-TEAL さんが同様の仕組みになっているので、アイキャッチ画像で悩んでいる方はぜひお試しを。
ヘッダー画像のトリミングが少しずれる
はてなブログの仕様で、ヘッダー用画像は横幅1000pxになります。 UnderShirt ではコンテンツ領域を最大1200px程度にしており、そのままだと両端が足らず見栄えがよくありません。
そこで UnderShirt では、ウィンドウ幅がおよそ1000pxを越えると、ヘッダー画像を引き伸ばして表示するようにしています。
このため、管理画面からトリミングした際、プレビューと位置がずれて見える場合があります。ご了承ください。
終わりに
細かくチェックしきれていないので粗があると思います。不具合・要望などお気軽にお知らせください。