２カラムで、アイキャッチが大きくて、そこそこ使い勝手の良いはてなブログテーマ「 UnderShirt 」を公開しました。

特徴

• 一覧（archive）ページで、記事のアイキャッチ画像を大きく表示

• PCではサイドカラムを表示、336px（レクタングル広告）確保

• レスポンシブ対応

はてなブログProを利用すれば、これくらい画面をスッキリできます。

過去のテーマとの違い

アイキャッチ画像を大きく表示するテーマを過去にも作成（ thumbnail2 、thumbnail ）しましたが、ダイナミックなレイアウトを優先した結果、クセが強くカスタマイズが難しいテーマになっていました。

その辺り見直して、無難でカスタマイズしやすいテーマを目指しました。

新しい公式 Boilerplate

はてなブログ公式の開発用テーマが少し新しくなっていたので試してみました。

hatena/Hatena-Blog-Theme-Boilerplate

• LESSからSCSSに変わった

• browser-sync で確認が楽に

特に Media Queries 周りの仕組みが新しくなっています。他は特に気にならず使えました、ありがたや〜。

注意点

一覧ページのアイキャッチは正方形にトリミングされ ~ている~ ません

※当該の問題は、はてなブログの機能変更により解消したので削除しました。

ヘッダー画像のトリミングが少しずれる

はてなブログの仕様で、ヘッダー用画像は横幅1000pxになります。 UnderShirt ではコンテンツ領域を最大1200px程度にしており、そのままだと両端が足らず見栄えがよくありません。

そこで UnderShirt では、ウィンドウ幅がおよそ1000pxを越えると、ヘッダー画像を引き伸ばして表示するようにしています。

このため、管理画面からトリミングした際、プレビューと位置がずれて見える場合があります。ご了承ください。

終わりに

不具合・要望などありましたらお気軽にお知らせください！

UnderShirt - テーマ ストア