LOGzeudon

名古屋で働いているWebデザイナーのブログです

はてなブログテーマ「 UnderShirt 」を公開しました

はてなブログテーマ「 UnderShirt 」を公開しました

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

特徴

  • 一覧(archive)ページで、記事のアイキャッチ画像を大きく表示
  • PCではサイドカラムを表示、336px(レクタングル広告)確保
  • レスポンシブ対応

f:id:rokuzeudon:20180106112104j:plain
はてなブログProならこれくらいスッキリできます

過去のテーマとの違い

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

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

新しい公式 Boilerplate

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

github.com

  • LESSからSCSSに変わった
  • browser-sync で確認が楽に

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

注意点

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

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

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

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

f:id:rokuzeudon:20180106112310j:plain

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

f:id:rokuzeudon:20180106112320j:plain

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

終わりに

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

UnderShirt - テーマ ストア

twitter.com