LOGzeudon

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

サムネイル画像が際立つデザインテーマ「 Thumbnail 」をつくった

サムネイル画像が際立つデザインテーマ「 Thumbnail 」をつくりました

Thumbnail - テーマ ストア

「Thumbnail」というテーマを作成した。既存のテーマに比べて、サムネイル画像が大きく表示されるようにしている。

記事投稿の時に、「アイキャッチ画像を設定」をするだけ。アイキャッチ画像が無くてもレイアウトが崩れることはない。

背景経緯

最近、はてなブログの機能アップデートのおかげで、

  1. サムネイル画像を活かした
  2. カード型のレイアウト

…を実現するはてなブログテーマカスタマイズがだいぶ簡単になった。

表示されるサムネイル画像が大きくなった

記事一覧ページおよびトップページの一覧形式で、表示されているサムネイルの画像サイズを大きくしました - はてなブログ開発ブログ

今まで、一覧ページのサムネイル(アイキャッチ)画像のサイズは(たしか)100px固定で出力されていた。それが、今回500pxへとかなり大きくなり、例えばPCでサムネイル画像を活かすようなCSSカスタマイズがしやすくなった。

一覧ページをトップにするのがデフォルト機能に

ブログのトップページを「一覧形式」で表示できるようにしました(はてなブログPro) - はてなブログ開発ブログ

Pro限定の機能だが、そんな一覧ページをトップページとして表示することもできるようになった。(非公式だが、JavaScriptでリダイレクトさせるという方法も有名。検索するとすぐ出る)

自分が過去に作成したストア公開テーマでは、トップページ( .page-index )でカード型レイアウトを実現するために専用のスタイルをあてていたが、そこまでする必要がなくなった。

終わりに

今日スプラトゥーン2が発売された。気が向いたらゲーム日記プレイなどにご活用いただき、フィードバックをいただけると幸いです。

あと、はてなブログの公式テーマは最後が2014年3月?のようなので、今後新しいテーマが登場してくるのが楽しみ。