はてなブログのレスポンシブテーマをカード型やインストール数で検索しやすくまとめてみた

どうも！フジグチです！

はてなブログを始める時や慣れてきた時に、ブログデザインを変更したくなったことはありませんか？

はてなブログでは、デザインテーマのコンテストが定期的に開催されるなどして、ユーザーが作成したデザインテーマが数多く公開されています。

CSSのコピペなどをせずに手っ取り早くデザインを変更する方法は、「デザインテーマを変更する」という方法があります。

そんな時にみなさんは、このように思ったことはないでしょうか？

そういった声に応えるべく、今回レスポンシブ対応のデザインテーマを161テーマまとめました。

この記事でまとめたテーマは、以下の機能を使って自分の探したい条件に絞って検索し、テーマ名をクリックするとテーマのインストール先に移動することが出来ます。

この記事で出来ること

テーマをインストールする際の注意点

テーマをインストールする際はデザインCSSの中身が破棄されるので、バックアップを取るのを忘れないで下さい。

バックアップは非公開のサブブログを作り、そちらのデザインCSSにコピーしておく方法や、メモ帳にコピーしておく方法などがあるので忘れずに行ってください。

モバイルファーストインデックスに移行した現在、レスポンシブデザインであることがほぼ必須となっているので、この記事内ではレスポンシブデザイン対応のテーマのみをまとめています。

レスポンシブテーマにするには、【デザイン】 > 【スマートフォン】 > 【詳細設定】のレスポンシブデザインにチェックを入れます。

これでスマートフォンで閲覧した際もPC版と同じデザインが適用されます。

一部テーマでは【レスポンシブ対応】と説明があっても、この設定で適用されないものがあったのでそういったテーマは除外しています。

メモ

この記事内では除外していますが、そういったテーマにはデザインCSS内に/* Responsive: yes */と入れるとレスポンシブデザインに変更することが出来ます。

総インストール数が100未満のテーマは含めていませんが、投稿日が違うので公開期間が一年未満のテーマでも平均インストールを計算し、年間インストール数が100以上になるテーマは含めています。

デフォルトでは公開日順に並んでいます。表になっているので縦や横にスクロールして見ることが出来ます。

注意

※Internet Explorerや一部の古いブラウザでは正常に表示されません。

※iPhoneだと、スクロールした際に少し上下に揺れます。

入力フォームにテーマ名を入力して検索することが出来ます。

テーマの総インストール数1000以上、1000未満で絞り込んで検索できます。

多く使用されているテーマのほうが安心という場合や、反対に人と被りたくない場合に少ないものから探すといったことが出来ます。

それぞれ投稿日が異なっているため公開期間が違うので、テーマが投稿された日から総インストール数を集計した2021/10/08までの公開期間から、一日あたりのインストール数を計算し年間インストールが100以上、100未満で絞り込んで検索することが出来ます。

総インストールのチェックボックスと合わせて使用することで、より精度を上げて人気のテーマや使用率の低いテーマを絞って探すことが出来ます。

また、投稿日の新しいテーマで公開日が短いためにインストール数の少ないものでも、年間で換算すると人気のテーマを見つけることが出来ます。

記事の一覧表示形式をカード型に表示するテーマ（またはそうでないもの）に絞って検索することが出来ます。

ここで言う「カード型」とはアイキャッチが大きく表示されるもの、Haruniのようにアイキャッチの横に見出しがシンプルに収まっているもの、のみにしています。

テーマの説明に「カード型」と表記があっても、この条件に当てはまらないものはこの記事内ではカード型と定義していません。

カード型に対応していないテーマでもこちらの記事で公開している方法でカード型に変更することが出来ます。
はてなブログのトップページをカード型にする - フジブロっ！

表の見出しをクリックすると昇順や降順にソートすることが出来ます。クリックするたびに並び順が入れ替わるので、使用してください。

テーマ名	総インストール数	平均インストール数/月	カード型	投稿日
{{ item.title }}	{{item.install}}インストール	{{Math.round(item.test*30)}}インストール/月	{{ item.card }}	{{item.data}}

使用してみたいテーマは見つかったでしょうか？この記事が少しでもはてなブロガーの役に立つと嬉しいです。

私が作成したテーマCappuccinoとNeumorphismも、少しだけ目立つようにしておいたのでインストールしてみて下さいね。