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 周りの仕組みが新しくなっています。他は特に気にならず使えました、ありがたや〜。

注意点

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

UnderShirt では正方形画像の上下を隠して、長方形のアイキャッチっぽく見せています。

f:id:rokuzeudon:20180106123034j:plain

正方形で出力されるのは、はてなブログの仕様です。文字を画像の端に載せると、切れて読めなくなる場合があります。

他の方法、例えば上下に余白を入れた画像を登録すると、 UnderShirt の一覧ページでの見た目は改善されます。

f:id:rokuzeudon:20180106112241j:plain

ただし、記事下の関連記事表示では、アイキャッチ画像のサイズ指定ができず、上下の余白が見えてしまうことになります。

f:id:rokuzeudon:20180106112251j:plain

また、SNSでシェアした際も、正方形で表示される際に同様に余白が見えてしまいます。

尚、当ブログはこの課題を回避するために、記事一覧(archive)ページを使わないオリジナルテーマを導入しています。人気のはてなブログテーマ ZENO-TEAL さんが同様の仕組みになっているので、アイキャッチ画像で悩んでいる方はぜひお試しを。

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

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

f:id:rokuzeudon:20180106112310j:plain

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

f:id:rokuzeudon:20180106112320j:plain

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

終わりに

細かくチェックしきれていないので粗があると思います。不具合・要望などお気軽にお知らせください。

UnderShirt - テーマ ストア

twitter.com