はてなブログのテーマ選びに！デモブログまとめ。

こんにちは。カスタマイズ大好きsyu_reiです。

はてなブログを使っている皆さん、ご自分のテーマはどうやって決めましたか？

このブログでは、はてなブログのデフォルト公式テーマ「Smooth」を使っています。なぜなら、デフォルトだったから笑

はてなブログのテーマ一覧は、紹介の画像しか見られないので、気になるテーマがあると、説明ページからデモページに飛ぶ必要があります。

この2クリックが面倒だったので、デモページだけ効率的に見られるように、デモページを集めました。

1つの記事にまとめておけば、パソコンからもスマホからもタブレットからも確認しやすいです。それぞれの端末での表示が確認できます。

便利！

レスポンシブ対応のものだけ紹介しています。

人気順(2019年9月時点)

はてなブログの公式ページでの人気順に紹介します。さすが人気なだけあって、スマホからの画面も見やすいです。

1.Minimalism

ダウンロード数ナンバー１！約4万ダウンロード。

スマホでのトップ画面がとてもすっきりしていて見やすいです。スマホから見るのはこのテーマが一番見やすいと思います。

見出しはデザインされていません。自分好みにカスタマイズしやすいテーマのため、たくさんの人が使っているのでしょう。

デモサイト→Minimalism

2.Brooklyn

ナンバー２。このテーマの方もよく見かけます。

シンプルで見やすいです。モノクロが印象的です。

見出しもスマートなデザイン。

スマホのトップは、1記事の表示が大きめ。

デモサイト→Brooklyn

 

3.Haruni

このテーマは春らしいピンクが素敵なテーマです。

見出しにもデザインが設定されています。

作りこんでくれてある分、見たらすぐわかります。

スマホのトップがアイキャッチプラスタイトルでスッキリしていて見やすいです。

カスタマイズで水色に変えたりできるので、自分好みに変えるといいでしょう。

このテーマでスマホのオーバーレイ広告をつけると右上のメニューボタン押せなくなっちゃうので、オーバーレイ広告は消すのを推奨します。AdSenseの自動広告オフにしといたほうがいいですよ。

デモサイト→Haruni

 

おすすめのテーマ

テーマを探し回っていて、私の好みに近いものを集めました。

ポイント

• トップページが見やすい
• 見出しのデザイン
• シンプル

はてなブログのテーマは、たくさん種類があって選択肢が多いのはいいのですが、多すぎてどれを見ればいいのか分からなくなりますよね。参考にしてみて下さい。

UnderShirt（9/11追記：人気No.3になりました）

トップページはアイキャッチとタイトルのみのカード式ですっきり。

見出しのデザインは無し。

デモサイト→UNDER SHIRT

Simplefish

トップページはアイキャッチとタイトル、概要を表示。

人気記事はアイキャッチのみ。

見出しはシンプルに背景色。

デモサイト→simplefresh

ZENO-TEAL

トップページはアイキャッチとタイトル、概要のカード式。

上部にオススメ記事を固定設置可能。

見出しは背景色で吹き出しタイプ。

デモサイト→ZENO-TEAL

 2019年リリースの新しいテーマ

ブログのテーマを決めるときに、人と被りたくないという気持ち、ありますよね？

私はあります！

なので、まだダウンロード数が少ないであろう最新のテーマをチェック！

LaLaLand

2019年8月にリリースされたテーマ。サイドバーのタイトル表記がマチつきブロックでおしゃれです。

見出しはシンプルな左縦マーク。

デモサイト→La La Land

Minimal Green

Harumiの作者(@minimalgreen)さんが2019年3月にリリースしたテーマです。

オシャレに作りこまれています。カテゴリの表示がタブになってます。

見出しの左にもアイコンがあってかわいいです。

デモブログ→Minimal Green

Stripe

こちらもHarumiの作者(@minimalgreen)さんが2019年3月にリリースしたテーマ。

ぱっと見、今の私のブログに一番近いかと思いました。（グローバルメニューの色が近いだけかも？）

見出しにもデザインが施されていて素敵です。

デモブログ→Stripe

まとめブログ風

2019年3月にリリース。アイキャッチ画像を全面に表示したトップページです。

おすすめ記事を固定で表示できます。

デモサイト→あべこべ帳：まとめブログ風

テーマを変えるときの注意点

カスタマイズが必要

自分のブログテーマを変更したからと言って、すぐデモブログのようになるわけではありません。

トグルメニューなど、自分でカスタマイズが必要です。

参考記事→はてなブログにトグルメニューを設置する方法。最新のjQueryを読み込もう。 

それぞれテーマの説明ページで、デモブログのようにカスタマイズする方法を紹介してくれているので、よく確認してから変更しましょう。

公式HP→テーマ ストア - はてなブログ

変更すると設定がすべてリセット

また、テーマを変更すると、いままで記載していたHTMLとCSSはすべてキャンセルされてしまいます。必ずバックアップを取りましょう。

バックアップを取る必要のある場所は、以下の5か所。

「デザイン」→スパナマーク「カスタマイズ」からの

1. 「ヘッダ」タイトル下
2. 「記事」の記事上・記事下
3. 「フッタ」
4. 「デザインCSS」

「設定」→「詳細設定」の下の方

　5.「headに要素を追加」

 メモ帳なり、自分のテキストツールにコピペして保存しておきましょう。

まとめ

画像重視のテーマは加工が大変

最近のテーマはアイキャッチを大きく表示するカード式が多いです。ひとつひとつの記事のアイキャッチをちゃんと加工する必要があります。結構大変です。センスが問われます。画質悪いとそれだけで記事読む気を無くしてしまうので注意が必要ですね。

テーマは記事の一覧表示の仕方を重視したい

記事一覧にしたときに画像と文のバランスが自分好みのものを探すのは難しいです。一番人気の「Minimalism」が一番好きなんですが、一番人気ってことは一番ありふれたデザインってことで……と悩んでいたのですが、公式テーマの人気ナンバー1の「Epoc」が約25万ダウンロードと考えると、全然悩む必要ないのかもしれません。ちなみに「Smooth」は約3万ダウンロードされていました。

デモブログのまんまにならないように注意

デモブログと全く同じデザインにしちゃうと、自分のブログ感薄れてしまうので、結局少しは自分なりにカスタマイズしたほうがいいと思います。

…そうするとわざわざテーマを変える必要があるのか？という気持ちになって、なかなかテーマ替えに踏み切れません。

テーマ変えるのは大変

繰り返しになりますが、テーマを変えるときには、今までのhtmlとCSSすべてリセットされてしまいます。テーマを変えるのは大変な作業です。

これからテーマを変える方、頑張ってください！

参考になれば幸いです。