※この記事は、2024年1月に更新しました。
最近、トップページにカード型のレイアウトを採用するwebサイトが増えています。「カード型レイアウト」とは、四角いカードの中にサムネイル画像、記事タイトルなどが入っているデザインです。
画像を収集できるサービス「Pinterest」（ピンタレスト）がこのデザインを採用してから、ECサイトを中心に多くのサイトで見かけるようになりました。
はてなブログでも、CSSをカスタマイズすれば、トップページをカード型デザインにすることができます。といっても、初心者にカスタマイズは難しい。
そこで、はじめからカード型デザインを実装しているデザインテーマを集めてみました。
「カード型レイアウト」を実装したデザインテーマに変えるときの注意点
① カード型レイアウトを実装するには、はてなPROを契約していることが前提となります。このカスタマイズは、トップページを「一覧形式」に表示する機能がもとになっているからです。
有料版の「はてなブログPro」と契約している状態で、
「ダッシュボード」➤「設定」➤「詳細設定」へ進みます。
ページを下にスクロールし、「ブログ表示」で「一覧形式」にチェックを入れ、忘れずに「保存する」をクリックします。
② 2～3列のカードを横並びにできるのは、PCから見たときのみ。スマホの場合はスペースの関係で、1列で縦長に表示されます。
③ 派手な機能を使えば、それだけタスクが増え、表示速度に影響を及ぼします。検索順位を気にするなら、シンプルなテーマがおすすめです。
>>【はてなブログ】軽いテーマを探せ！表示速度の測定結果一挙公開！
④ トップページのデザインを大きく変えることになるので、アクセスに影響が出る可能性もあります。アクセスのほとんどが検索エンジンからである場合は、慎重になったほうがよいと思います。
>>デザインテーマ変更の罠!アクセスが減ってゆく?SEOに与える影響とは?
アクセスの多くがブログ村、はてなブログ経由ならば、さほど影響はないでしょう。
【はてなブログ】トップページが“カード型レイアウト”になるデザインテーマ
トップページがカード型になるデザインテーマの中から、おすすめのテーマを8つご紹介します。2024年2月現在、テーマストアランキングで上位に入っており、かつ一定数の利用者のいるテーマを選んでいます。
１．Under Shirt
- 作成者：rokuzeudonさん
- シンプルなデザイン
- アイキャッチ画像が見やすい
「UnderShirt」は、 白と黒を基調としたシンプルなデザイン。文章も読みやすくなっています。
カード型デザインを採用すると、通常はスマホで見たときのアイキャッチ画像がうまく表示されにくくなります。この点、「UnderShirt」ではアイキャッチ画像が大きめに表示されますので、見ばえが良くなります。
２．Haruni
- 作成者：minimalgreenさん
- グラデーションがキレイなデザインテーマ
- オリジナルのシェアボタンを設置できる
「Haruni」は背景画像のグラデーションが美しい、オシャレなテーマ。はてなの「背景色を変更する機能」を使えば、印象に残るデザインにできます。
丸みを帯びたカテゴリボタンもいい感じ。
３．Cappuccino
- 作成者：utoutosaraさん
- シックな大人向けのデザイン
- カフェのボード風の目次デザインと、カッコいい文字フォント
思わずコーヒーでも飲みながら、 じっくり記事を読みたくなるようなシックなデザイン。カフェのメニューのような目次も個性的。目をひきます。
また、「Cappuccino」の背景色はくっきりした色調なので、このデザインテーマで写真を投稿するとかなり映えます。
４．Silence
- 作成者：shiromatakumiさん
- シンプルですっきりしたデザイン
- 表示速度が速い
「Silence」は、当ブログもお世話になっているデザイン。生成ツールを使えば、面倒なグローバルメニュー（＝画面上部の案内メニュー）もすぐ設置できます。
表示速度が速いのもポイント。カード型を使いたいけど、ページが重くなって離脱率が上がるのも心配。そんな人におすすめ。
シンプルゆえにカスタマイズしやいのも、メリットです。CSSをいじれるなら、“自分好みのデザインに変えられる”というのはポイントが高いです。
（※ 当ブログはデザインCSSにコードを貼って、見出しのデザインを変えています）
５．Neumorphism
- 作成者：utoutosaraさん
- 凹凸によるデザインが特徴的。
- 利用者が増えつつあるテーマ。
「Neumorphism」（ニューモーフィズム）とは、背景から押し出されていたり窪んでいたりするようなデザイン手法のこと。
マウスをあてるとグッと沈みこむような演出は、先鋭的でオシャレ。グローバルナビも、すぐ使えるようになります。
６．CONTENTS
- 作成者：dreamarkさん
- コンテンツを美しく見せる、すっきりしたデザイン
- ゆとりある文字間隔
「CONTENTS」は、コンテンツ（記事の中身）に集中できるようなシンプルなデザイン。他のテーマより、文字と文字のあいだは広めにとられています。
カスタマイズ用のカラーコードも紹介されており、コピペ一発で模様替えもできます。
７．Color Book
- 作成者：gharutoさん
- カスタマイズを試したい人向けの、シンプルなデザイン
- 大きなアイキャッチ画像
「Color Book」は、カスタマイズができるようにデザインを最小限におさえたテーマ。アイキャッチ画像が大きめで見やすく、文字も読みやすい。
初期設定ではカード型レイアウトではありませんが、カード型を実装するためのCSSも紹介されています。テーマ紹介ページには、かんたんなカスタマイズについても触れられてします。
８．マテリアルぽっぷ
- 作成者 ：mamegoroさん
- 見やすく、直感的なデザイン
- PCは3列、タブレットは2列、スマホは1列
「マテリアルポップ」は、マテリアルデザインをコンセプトにしたテーマ。マテリアルデザインとは、「物質的なデザイン」のこと。影が浮かび上がって見えるのが特徴的です。
PCの場合、トップページはカード型が3列上に並び、サイドバーがその下にきます。
まとめ
テーマを変更すると、デザインCSSと背景画像がすべて上書きされ、消えてしまいます。CSSのカスタマイズや背景画像の変更をおこなっていた場合は、必ずバックアップを取っておきましょう。
