最近、トップページにカード型のレイアウトを採用するwebサイトが増えています。「カード型レイアウト」とは、四角いカードの中にサムネイル画像、記事タイトルなどが入っているデザインです。
画像を収集できるサービス「Pinterest」（ピンタレスト）がこのデザインを採用してから、ECサイトを中心に多くのサイトで見かけるようになりました。
はてなブログでも、CSSをカスタマイズすれば、トップページをカード型デザインにすることができます。といっても、初心者にカスタマイズは難しい。
そこで、はじめからカード型デザインを実装しているデザインテーマを集めてみました。
「カード型レイアウト」を実装したデザインテーマに変えるときの注意点
① カード型レイアウトを実装するには、はてなPROを契約していることが前提となります。このカスタマイズは、トップページを「一覧形式」に表示する機能がもとになっているからです。
② 2～3列のカードを横並びにできるのは、パソコンから見たときのみ。スマホの場合はスペースの関係で、1列で縦長に表示されます。
③ トップページのデザインを大きく変えることになるので、場合によってはアクセスに影響が出る可能性もあります。アクセスのほとんどが検索エンジンからである場合は、慎重になったほうがよいと思います。
アクセスの多くがブログ村、はてなブログ経由ならば、さほど影響はないでしょう。
【はてなブログ】トップページが“カード型レイアウト”になるデザインテーマ
トップページがカード型になるデザインテーマの中から、一定数の利用者のいるテーマを5つご紹介します。
１．Under Shirt
- 作成者：rokuzeudonさん
- シンプルなデザイン
- アイキャッチ画像がシンプルで見やすい
『UnderShirt』は、 白と黒を基調としたシンプルなデザインで、文章も読みやすくなっています。
カード型デザインを採用すると、通常はスマホで見たときのアイキャッチ画像がうまく表示されにくくなります。この点、『UnderShirt』ではアイキャッチ画像が大きめに表示されますので、見ばえが良くなります。
２．Harumi
- 作成者：minimalgreenさん
- グラデーションがキレイなデザインテーマ
- オリジナルのシェアボタンを設置できる
『Harumi』は背景画像のグラデーションが美しい、オシャレなテーマ。はてなの「背景色を変更する機能」を使えば、印象に残るデザインにできます。
丸みを帯びたカテゴリボタンもいい感じ。
３．Cappuccino
- 作成者：utoutosaraさん
- シックな大人向けのデザイン
- カフェのボード風の目次デザインと、カッコいい文字フォント
思わずコーヒーでも飲みながら、 じっくり記事を読みたくなるようなシックなデザイン。カフェのメニューのような目次も個性的。目をひきます。
また、『Cappuccino』の背景色はくっきりした色調なので、このデザインテーマで写真を投稿するとかなり映えます。
４．Silence
- 作成者：shiromatakumiさん
- シンプルですっきりしたデザイン
- グロバールメニューの設置がかんたん
『Silence』は、当ブログもお世話になっているシンプルなデザイン。生成ツールを使えば、面倒なグローバルメニュー（＝画面上部のサイト案内メニュー）もすぐに設置できます。
表示速度がダントツで速いのもポイント。カード型を使いたいけど、ページが重くなって離脱率が上がるのも心配。そんな人におすすめ。
５．ZENO-TEAL
- 作成者：c-miyaさん
- メインカラーに、Googleが提唱するマテリアルデザインを採用。
- 利用者が多く、カスタマイズが簡単に見つかる
『ZENO-TEAL』は、目に優しいデザインカラー「Teal」（鴨の羽色）を導入。カスタマイズに関する情報量もピカイチで、カード型かつオリジナリティのあるテーマにできます。
ただし、注意点が2つあります。
まず、①アイキャッチ画像、②導入文、③続きを読む
の順番で記事を作成しないと、デザインが崩れてしまいます。「続きを読む」より上の文章が、トップページのカードに盛りこまれる情報となります。
導入にあたっては、過去記事もこの体裁に修正しなくてはなりません。「続きを読む」を記述する方法は、下記のリンク先に載っています。
記事を分割する「続きを読む」記法をリリースしました - はてなブログ開発ブログ
また、ここで紹介した中では、やや表示速度がおそいデザインテーマです。
読者さんに不便な思いをさせないよう、画像の圧縮や重たいブログパーツを外すなどの工夫が必要となります。使いこなすのにコツがいる、中級者向けのテーマといえます。
まとめ
テーマを変更すると、デザインCSSと背景画像がすべて上書きされ、消えてしまいます。CSSのカスタマイズや背景画像の変更をおこなっていた場合は、必ずバックアップを取っておきましょう。