【３選】はてなブログのデザインテーマ【鉄板テンプレート】
【2021年3月28日更新】
はてなブログのデザインテーマ（テンプレート）の選び方は、とても大切です。
安易に決めてはいけません。
良いデザインを選ぶことによって、アクセス数が大幅にアップするからです。
アクセス数が上がれば、稼げる金額も大きくなってきます。
わたしも、デザインテーマ（テンプレート）を変更したあとすぐに、顕著にアクセスアップしたのです。
稼げる金額も大きくなりました。
はてなブログを始めた当初からデザインは、きちんと変更してくださいね！
「でも……。はてなブログのデザインテーマ（テンプレート）を、どうやって選んだら良いのかわからない……。難しそう…。」という方も多いのではないでしょうか?
この記事でご説明するはてなブログのおすすめの選び方を実践すれば、かんたんにデザインを決められます。
この記事では、はてなブログのテンプレートの選ぶ基準を明確に示していくからです。
そして、テンプレートのテーマ（テンプレート）変更はかんたんです。
５分もかからないで、できます。
「正しいはてなブログのデザインテーマ（テンプレート）の選び方」を解説していきます。
動画で、はてなブログの人気のテーマのインストール方法とカスタマイズのやり方も載せています。
※ブログサポート６０の石黒が書いています。
私は、「はてなブログ」の立ち上げのお手伝いをさせていただくことが多いです。
その経験から得た、「おすすめのデザインテーマ」と「テンプレートの選び方」になるので、信頼できる情報であると自負しております。
デザインテーマの正しい選び方によって、時間短縮になる
はてなブログのデザインテーマの選び方はとても大切です。
はじめに、正しいデザインテーマの選び方をするだけでも、時間の短縮になります。
はじめに正しいテーマを選択しておかないと、あとでテーマを変更するときの作業が膨大になってくるからです。
わたしは、はじめのデザインテーマの選択ミスで、膨大な時間をロスしてしてしまいました。
この経験から語ることなのです。
もう一度繰り返します。はてなブログのデザインテーマを適当に決めないでください。
テーマの変更をするときに、はてなブログの設定の変更もたくさんやらないといけなくなってしまうからです。
「Googleアドセンスというクリック報酬の広告」の貼り直しの可能性もでてきます。
大きな時間のロスです。
このような理由からも、初めからはてなブログのテーマ選びは重要だと認識しておいてください。
はてなブログのおすすめデザインテーマ３選（テンプレート）
はてなブログのおすすめデザインテーマ（テンプレート）は以下の３つです。
- Minimalism
- Brooklyn
- Innocent
長いあいだ、はてなブログのデザインテーマを見てきていますが、長期的におすすめにランクインされています。
このはてなブログのデザインテーマは、長い間人気ランキングの上位にいます。
長い間上位のおすすめにランキングしている
はてなブログのおすすめデザインテーマ（テンプレート）の変更方法とレスポンシブデザイン対応のやり方（動画と画像）
【動画】人気１位の「Minimalism」のデザインテーマ（テンプレート）の変更方法
はてなブログのMinimalismのインストールとカスタマイズ方法（グローバルメニュー・見出し・ヘッダー色）
Minimalismのデザインにすると、スマホ表示（Chrome・エッジ）で太字が反映しなくなる現象が起こるため、以下のコードをはてなブログのデザインCSSに貼り付けておくと改善されます。
/* strongタグを変更する */
article strong{
font-weight:bold;
}
やり方を動画で見たい方はこちら↓
Minimalismはフォント（文字）の大きさが小さいので、大きくするカスタマイズもしておきましょう。
以下のコードをはてなブログのデザインCSSに貼り付けると、フォントサイズが大きくなります。
.entry-content {
font-size:17px;
line-height:1.8em;
}
動画でフォントのサイズの調整方法を解説しています。
【テーマBrooklyn】初心者OK！はてなブログのデザインをプロ並にキレイにするやり方
【SHIROMAさんのはてなブログのBrooklynのカスタマイズ紹介ページ】
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました
【動画】人気３位の「Innocent」のデザインテーマ（テンプレート）の変更方法
【画像説明】レスポンシブデザインに変更するやり方
はてなブログの「管理画面→デザイン→スマートフォン→詳細設定」の「レスポンシブデザイン」にチェックします。
↓
これではてなブログのレスポンシブデザイン設定が完了です。
レスポンシブデザイン対応のテーマでも、あるカスタマイズコードをコピペしないと変更できないテンプレートもあります。
それぞれのデザインテーマ（テンプレート）のインストールページには、注意書きがあります。
それを、必ず読んでください。
Minimalismは、レスポンシブデザインにチェックいれるだけで、表示が変わります。
レスポンシブ対応に変更したら、スマホからも見てみましょう。
レスポンシブデザインにすると、レイアウトが変わっているはずです。
はてなブログの設定から、「トップページの表示形式を一覧にする」の設定をしておきましょう。
そして、トップページに表示させる記事数を１０（最大）にしておいてください。
（※はてなブログの有料版しかできません）
記事をクリックされる可能性が高くなり、アクセス数が上がるからです。
はてなブログのデザインの設定の部分を徹底解説した動画もご覧ください。きちんと理解しておけば今後のカスタマイズに活きてきます。
【おすすめ】はてなブログの人気のデザインテーマ（テンプレート）「Minimalism」のメリット&デメリット
「Minimalism」のメリットまとめ
- シンプル
- カスタマイズの情報が豊富
- メニューバーのカスタマイズが簡単
- 目次がカスタマイズされる
私は、Minimalismというテーマを２年くらい使っています。
わたしが、ブログの稼ぎ方を教えている方にも「Minimalism」使ってもらっています。
このテーマは、一番人気です。
なぜなら、シンプルで見やすいからです。
誰が使っても違和感がありません。
書きたいことのテーマが変わっても変更する必要がないという汎用性があるテーマです。
とても使いやすいのです。
シンプルなメニューバーを設置できるところも、大きな利点です。
テーマを変更するだけで、キレイな「目次」にブログカスタマイズされます。
読者も見やすいです。
ブログのデザインテーマは、背景色が白で文字が黒という基本は守りましょう。
デザインテーマは「自分でも見やすい！」と思うものを選んでください。
読者も「読みやすい」と感じる可能性が高いからです。
Minimalismは人気があるので、ブログカスタマイズの情報を探すときも、かんたんに見つけることができます。
「Minimalism」のデメリットまとめ
- スマホだと太字が反映されない
- 使っているひとが多いので、デザインが似た感じになってしまう
- フォントに好き嫌いがある
スマホから見たときに、「太字を入れたのに、太くなっていない！?」となります。
パソコンからは太字が反映しているんですよね。
だから、太字の部分をマーカーで引くなどのカスタマイズをしてあげないと、強調したい部分を強調できないということになります。
「Minimalism」は、人気No1なだけあって、たくさんの人が使っていますね。
なので、「あっ、このひともMinimalismを使っている」ということが多くなりました。
あとは、「Minimalism」の文字のフォントが見にくいと感じる人もいるかもしれません。
これは好みですが、わたしも「他のフォントが良いなぁ」思っていました。
はてなブログのデザイン（テンプレート）の設定方法（動画と画像）
はてなブログのデザインの設定は以下の項目があります。
- 背景画像
- 背景色
- ヘッダー
- 記事（記事上・記事下）
- サイドバー
- フッター
- デザインCSS
はてなブログのデザイン設定について解説した動画を作成しました。
はてなブログのデザインテーマ（テンプレート）の３つの選び方
はてなブログは、そんなにテンプレートは多くありません。
「でも、テンプレートのテーマが結構たくさんある中で、具体的にはどれを選んだらいいの?」
こんなご質問をよくいただきます。
そんな方へ、はてなブログのおすすめのデザインとおすすめの選び方を３つお伝えします。
【選び方１】はてなブログのデザインはおすすめの人気のテーマから選ぶ
はてなブログのデザインは、必ずおすすめの人気テーマからテンプレートを選んでください。
なぜなら、カスタマイズなどの情報が見つけやすいからです。
人気のテーマであれば、Google検索をするとカスタマイズの情報がたくさん出てきます。
ほとんどが、「コピー」＆「貼り付け」でカスタマイズができてしまうほど簡単です。
はてなブログの人気のテンプレートであれば、カスタマイズの情報を載せてくれているブロガーさんがたくさんいます。
しかし、人気がないテンプレートだと、Google検索をしてもカスタマイズの情報が出てきません。
自分ではてなブログのHTMLコードをいじれるという人でないと、カスタマイズができないということなのです。
なので、必ず人気のテーマ（テンプレート）から選ぶようにしてください。
私も、Googleで調べて、ブログカスタマイズの情報が出てこないとすることができません。
2018年8月26日時点の、はてなブログのおすすめのデザインテーマ（テンプレート）！人気ランキングトップ３です。
- 第1位 Minimalism（ミニマリズム）
- 第2位 Brooklyn（ブルックリン）
- 第3位 Innocent（イノセント）
このおすすめの３つのテーマは、ずっとランキングの上位に位置しています。
人気のデザインテーマです。
３位以外のテーマから選びたいという方は、そのテーマを使用しているユーザー数が多いテンプレートを選ぶことをおすすめします。
ユーザー数が多いと、ブログカスタマイズなどの情報もたくさん得られるからです。
テンプレートを使用しているユーザー数を把握する方法をご説明します
「はてなブログ テーマストア」でGoogle検索をしてください。
はてなブログのテーマ（テンプレート）を選択できるページをクリックします。
ユーザー数を調べたい、気になるテンプレートを選択してください。
下の画像の赤枠の部分を見ると、「どのくらいのユーザーが、そのテーマを使用しているか」が分かります。
この赤枠の数字が多いテーマ（テンプレート）を選ぶことをおすすめします。
多くのはてなブログユーザーが使っているので、失敗する確率が少ないからです。
ユーザーが失敗していないから、人気があるのです。
人気があるということは、他のブログとかぶってしまう可能性もあります。
でも、はてなブログのヘッダーの画像とメニューバーの設置だけでもブログの印象は大きく変わります。
はてなブログのヘッダー画像はCANVAを使うと、キレイに作れます。
メニューバーには、「カテゴリー」などをリンクさせておくと良いでしょう。
例えば、「本」というカテゴリーがあれば、本のカテゴリーのリンクを貼ってあげましょう。
各カテゴリーに読者を誘導することができます。
下の画像の赤枠ところから、実際にそのテンプレートを使っている人のはてなブログを見ることができます。
実際に使っている人のはてなブログを見てみましょう。
「このテーマは見にくい。」と思ったら、そのテーマはやめてください。
読者も見にくいと感じる可能性が高いからです。
必ず、おすすめの人気のテーマ（テンプレート）から選ぶということを忘れないでください。
【選び方２】レスポンシブデザイン対応しているテーマ（テンプレート）を選ぶ
レスポンシブデザインとは、パソコンから見たときレイアウト表示を、自動的にスマホにも合わせてくれるものです。
※下のおすすめのテーマ（テンプレート）は、レスポンシブデザインに対応しています。
- 第1位 Minimalism（ミニマリズム）
- 第2位 Brooklyn（ブルックリン）
- 第3位 Innocent（イノセント）
はてなブログのテーマ（テンプレート）は、レスポンシブ対応しているものを選ぶことをおすすめします。
レスポンシブデザインは、以下の４つのメリットがあるからです。
- アクセス数があがる
- スマホデザインのブログカスタマイズがいらない
- スマホ版のトップページがキレイになる
- 目次がカスタマイズされる
レスポンシブ対応にする４つのメリットについて解説していきます。
【レスポンシブデザインのメリット１】アクセス数があがる
わたしは、レスポンシブ対応にした結果、アクセス数が大幅にあがりました。
アクセスアップした理由は、以下の２点です。
【１】トップページのデザインが綺麗になった
【２】トップページに表示される記事の数が多くなった
この２つだけでも、アクセス数は大きく変わります。
私の経験談をお話します。
はてなブログを初めて２年くらいは、レスポンシブデザインにしていませんでした。
はじめは、何も知らずに、ブログのテーマを適当に考えていた。
レスポンシブデザインではないテーマ（テンプレート）を使っていたのです。
「長い間、レスポンシブデザインを使っていない状態」から、レスポンシブ対応に変更するには勇気が必要です。
レスポンシブ対応にするためには、変更しなければいけないことがたくさん発生するからです。
はじめのうちに、レスポンシブデザインにしておくことをおすすめします。
わたしは、はてなブログでの稼ぎ方を教えているので、変更点が明確でした。
だから、「レスポンシブ対応に変更してみよう！」という行動が起こせたのです。
思い切ってレスポンシブのテンプレートに変更したら、毎月500アクセスぐらいアップしました。
これはレスポンシブデザインに変更した次の日から、顕著にアクセス数がアップしたので分かりました。
「早くレスポンシブデザインにしておけば良かった！」と感じました。
はてなブログのレスポンシブ対応は、見やすくて「読者にもやさしいつくり」になっているのでアクセス数も伸びます。
アクセス数が上がった２つ目の理由は、スマホから見たときのトップページの記事数が増えたからです。
トップページの記事数が増えることによって、たくさんの記事タイトルが読者の目にふれることになりました。
過去の記事を読んでもらえる可能性が高くなったのです。
レスポンシブデザインは、「スマホから見たときのトップページ」に４５記事を表示できます。
レスポンシブデザインじゃない場合であれば、たったの１２記事しか表示できません。
この違いだけでも、「たくさんの人に読んでもらえる可能性が高くなる。」ということが分かると思います。
レスポンシブでないと、読者は「次のページ」を押さないと１３記事目を見ることができません。
しかし、読者はなかなか「次のページ」を押してくれません。
読者の離脱につながりやすいのです。
わたしが開発した、「はてなブログの動画講座」では、レスポンシブ対応にすることをおすすめしています。
レスポンシブ対応にすると、圧倒的にブログが見やすくなります。
そして、アクセス数も上がります。
とても簡単なブログカスタマイズなのです。
【レスポンシブデザインのメリット２】スマホのカスタマイズがいらないから
はてなブログは、通常「パソコンから見たとき」と「スマホから見たとき」の見え方のカスタマイズをしなければいけません。
しかし、レスポンシブデザインであれば、「パソコンから見たとき」の設定変更をするだけで、スマホも一緒に変更してくれます。
つまり、設定が半分で済むということなのです。
見出しをきれいにするカスタマイズも、一回設定するだけでOKです。
レスポンシブデザインであれば、「パソコンから見たとき」と「スマホから見たとき」のブログの見え方を、それぞれ設定しなくていいのです。
パソコンから見たときに表示される「サイドバー」は、「スマホから見たときの表示」の記事の下に表示されます。（サイドバーには、カテゴリー表示をしておくことも忘れないでください。）
サイドバーが記事の下に表示されるので、ブログのレイアウトを容易に想像できるという利点もあります。
レスポンシブ対応していない場合は、「パソコンから見たときの表示」と「スマホから見たときの表示」の、どっちのレイアウトも考えなければいけない。
レスポンシブ対応の場合は、アドセンス広告を貼るのもラクです。
「パソコンから見たときの表示」にアドセンス広告を貼れば、「スマホから見たときの表示」にも同じ広告が表示されるからです。
Googleアドセンスとは、クリックされるだけで収入が入る広告のシステムです。
３つ貼るだけで、「パソコンから見たときの表示」と「スマホから見たときの表示」の合計6つの広告を表示させることができます。
レスポンシブ対応にしていない状態から、レスポンシブ対応に変えるときには、Googleアドセンスの広告も貼り直さなければなりません。
この貼り直しが、とてもめんどくさい。
これが、はじめからレスポンシブデザインにしておくことをおすすめする理由なのです。
レスポンシブデザインにすると、はるかにやることが少なくなります。
ブログの管理も楽になるのです。
必ずレスポンシブデザインを選ぶようにしてください。
【レスポンシブデザインのメリット３】スマホ版のトップページがキレイになる
上の画像は、Minimalismのレスポンシブデザインです。
レスポンシブ対応にしないと、スマホ版のトップページの表示は、ほとんどのはてなブログユーザーと同じになってしまいます。
地味です。
レスポンシブ対応しているテンプレートにすれば、テーマによって、スマホから見たときのデザインが大きく変わります。
とてもブログがキレイになり、読者もブログが見やすくなります。
「オリジナリティを出すため」にも、レスポンシブ対応しているテンプレートを選ぶことをおすすめします。
簡単にブログカスタマイズできる方法でもあるのです。
【レスポンシブデザインのメリット４】目次がカスタマイズされる
レスポンシブ対応しているテンプレートにすると、「スマホから見たときの目次」もカスタマイズされます。
目次がカスタマイズされると、とても見やすいです。
テーマによっては、「見出し」もカスタマイズされることもあります。
通常、目次のカスタマイズは、「カスタマイズのコードをコピーして、設定画面に貼り付ける」作業が発生します。
でも、レスポンシブ対応であれば、その作業を短縮できるのです。
ブログカスタマイズ作業が苦手という、初心者のかたにもおすすめです。
【選び方３】グローバルメニューバーが使えるテーマを選ぼう
グローバルメニューバーとは、上の画像の赤枠のようなのです。
メニューバーを使えるテーマを選ぶことをおすすめします。
なぜなら、ブログがオシャレになるからです。
アクセス数も上がります。
私がおすすめする、１番人気「Minimalism」であれば、コピー&ペーストで、簡単にメニューバーを作成することができます。
ホームページっぽくなりますよ。
レスポンシブ対応しているテンプレートであれば、スマホからもメニューバーは表示されます。
ブログの見た目もオシャレになるんです。
「はてなブログのMinimalismメニューバーのカスタマイズ」はこちら。
はてなブログのデザインを変更するときの３つ注意点
デザインテーマ（テンプレート）を変更するときの注意点を、３つほどお伝えします。
【注意点１】デザインにこだわりすぎない
ブログは文章が大事です。
あまり、デザインにこだわりすぎないでください。
デザインのカスタマイズに、時間をかけすぎないことです。
キリがありません。
ハマってしまうと、すぐに時間がたってしまいます。
それが楽しいのであれば、まだ良いのですが……。
いくらブログの見栄えが良くても、ブログは文章がなければ意味がありません。
読者は、情報を求めています。
読みやすい文章を書いてほしいのです。
読者は決して、きれいなブログを求めているわけではありません。
ブログカスタマイズに時間をかけるなら、読者が読みやすい文章にしていくほうが大切です。
「でも、デザインのきれいなブログにカスタマイズをすることによって、モチベーションが上がるんだけど……」という方もいらっしゃると思います。
そんな方は、ココナラなどを使うと良いでょう。
ココナラと検索して、ココナラのサイトで調べれば、「はてなブログのカスタマイズ」をしてくれる人を、見つけることができます。
はてなブログとは一見わからないようなキレイなブログを作ってもらうことが可能です。
もう一度言います。
ブログは文章が一番大切です。
記事を書くことに時間を使ってください。
【注意点２】 はてなブログ側が用意しているテンプレートを使わない
はてなブログ側が用意しているテンプレートは、使わないことをおすすめします。
はてなブログが用意しているテンプレートは「いかにも初心者」という感じを受けてしまうからです。
それは、使っている人が多いからそういう印象を受けてしまうのかもしれません。
読む側も、初心者じゃない人のブログを読みたいと思っています。
実際にはブログの初心者でも、初心者ではない雰囲気をだしたほうがいいと思うのです。
はてなブログ側以外のデザインテーマは、「テーマストア」という部分にあります。
以下の赤枠の画像のところにあります。（一番下へスクロールしてください。）
テーマは、赤枠の「テーマストア」から選ぶようにしましょう。
わたしは、はてなブログ側が用意しているテンプレートを２年くらい使っていました。
でも、今考えると、テーマストア内にあるテンプレートのほうが圧倒的にオシャレだと思えます。
はじめに安易にテーマを決めずに、人気があるテーマから選ぶようにしましょう。
【注意点３】リンクの文字が青以外のデザイン（テンプレート）を選ばない
文字リンクが、青以外になってしまうデザインがあります。
そのようなテンプレートは、選ばないようにしてください。
なぜなら、「読者がリンクだと分かないため、クリックしてもらえない」からです。
読者は、リンクは「青い文字」という認識があります。
リンクは「青い文字」にならない、ザインテーマ（テンプレート）も存在します。
青以外の文字は、リンクだと認識されません。
クリックされないのです。
逆に、青い文字をリンクでもないのに使うのはやめましょう。
「青リンクをクリックできない……。」というように、読者にストレスを与えてしまいます。
読者が離れ、アクセス数が下がってしまう原因になります。
リンクの文字が青くなるテンプレートをさがしてください。
まとめ（はてなブログのデザインテーマ（テンプレート）の選び方）
はてなブログのテーマを選ぶときに大事なことは、以下の２点です。
【１】レスポンシブデザイン対応のテーマを選ぶ
【２】人気（おすすめ）のデザインテーマから選ぶ
この２点は、必ずまもってください。
いまのデザインテーマから変更する作業はけっこう大変ですよね。
でも、速いうちにテーマを変更しておけば、「あとあと面倒な作業が増えない」というメリットがあります。
はじめのテンプレートの選び方だけでも、大幅な時間短縮になるということを忘れないでください。
体験をもって感じることです。
いま、レスポンシブ対応を使用していないという方は、検討されることをおすすめします。
アクセス数の大幅アップを期待できます。
時間の短縮にもなります。
はてなブログの正しい設定もしておいてください。
設定によって、アクセス数は大きく変わってきます。
最新記事 by 石黒敬太 (全て見る)
- 【はてなブログ】Microsoft Clarityの設置方法（ヒートマップ） - 2023年1月29日
- YouTubeでAmazonのアフィリエイト広告を貼る（もしもアフィリエイト） - 2021年12月30日
- 日記が毎日２００アクセスの記事に！ - 2021年11月19日
