はてなブログのデザインのおすすめテンプレート(デザインテーマ)は？選び方も解説！

これからはてなブログを始めようと思っている方やお洒落なデザインにしたいけれどうまく行かないと思ったことはありませんか。

今回ははてなブログのデザインで、おすすめのテンプレートやデザインテーマ、注意点、使い方、おすすめの選び方について解説します。

はてなブログには、登録されている無料のテンプレートを使って、ブログのデザインをおしゃれに設定することができます。使い方も簡単で、インストールも無料で利用することが可能です。

はてなブログを作成する際には、最初のテーマの選びがとても重要になってきます。それと後からデザインをやり直すのは非常に面倒な作業になります。

はじめに貼ったGoogleアドセンスなども一から張り直しの作業になり、かなりの時間ロスが生まれるので、テーマの選び方はよく考えて行う必要があります。

おしゃれなデザインにするメリットとしては、記事を見てくれる人のアクセス数が大幅に増えるということです。アクセス数が増えると広告収入が増えたりすることもあるので、はてなブログをするときはテーマ選びとおしゃれなデザインにすることはとても重要です。

【はてなブログ】デザインをオシャレにカスタマイズする方法について紹介します。

デザインテンプレートの使い方は以下の通りです。はてなブログに登録されている無料のテンプレートを使って、ブログのデザインを変更することができます。まずは、「ブログ管理画面」を開きます。

「デザイン」をクリック後、左横にテンプレートの選択肢がたくさん表示されますので、ご自身の好きなデザインのものを選びましょう。

もう一つの使い方としては、「テーマストアからデザインテーマをダウンロード」するという選び方があります。この方法については以下から紹介してきます。

デザインテーマをインストールする方法は、一番下まで公式テーマをどんどんスクロールしていきます。すると、「テーマストアでテーマを探す」という項目が表示されます。

上記のように「テーマストアでテーマを探す」をクリックして、はてなブログのブロガーが作ったオリジナルのテーマをインストールするのもおすすめの方法です。

【はてなブログ】デザインのおすすめテーマの選び方として「人気のテーマ」で選ぶ方法があります。安易にデザインを決めてしまうと後悔してしまう可能性もあるのでしっかり確認していきましょう。

はてなブログでデザインテーマを決めることはとても大切です。ここでは「人気テーマの見分け方」や「人気のテーマを選ぶメリット」について紹介します。

はてなブログで人気のデザインテーマを見分ける方法は、必ず「おすすめの人気テーマ」からテンプレートを選ぶことです。理由は、もし使い方が分からなくなったときなどにGoogle検索すると、カスタマイズの情報がたくさんヒットするからです。

そしてほとんどのデザインテーマの作業がコピペでカスタマイズ完了するくらい簡単なので、おすすめの人気テーマから選んだ方が良いという風になります。

はてなブログで人気のデザインテーマを選ぶメリットは、なんと言っても「アクセス数」です。人気のデザインテーマを選ぶことによってアクセス数が伸びて、人によっては稼げる金額も変わってきます。

それでははてなブログで人気のデザインテーマランキングについて紹介します。次に紹介する3つのテーマは、ずっとランキングの上位にいます。

もし3位以外のテーマではてなブログを作りたい場合の選び方としては、そのテーマを使用しているユーザー数が多いものを選びましょう。先ほどもお話しましたが、ユーザー数が多いとカスタマイズの情報収集にも困らないからです。
 

人気のテーマテンプレートを使用しているユーザー数を把握する方法は、「はてなブログ　テーマストア」でGoogle検索をしてください。

それからはてなブログのテーマを選択できるページをクリックして、ご自身が調べたいユーザー数やデザイン、テンプレートを選択するのが一連の流れになります。

【はてなブログ】デザインのおすすめテーマの選び方として、レスポンシブデザイン対応しているものを選んだ方が良いです。ですがそもそもレスポンシブデザインとは？と疑問に思う方も多いかと思いますので、以下から説明します。

それではレスポンシブデザインに関して説明します。

このレスポンシブデザインとは、パソコンやスマホ、タブレットのようにサイズが違っても適切な画面表示になっていることを意味します。

言い換えると、デバイスのウィンドウ幅に対して、「responsive（よく反応）」して、見やすい表示に自動で切り替える仕組みを持つデザインのことをいいます。

レスポンシブデザインを選ぶメリットとしては、まずGoogleが推奨していること（検索エンジン最適化）のメリットがあります。

これに付随してアクセス数が上がることや、スマホデザインでもカスタマイズの設定が必要なかったり、トップページの表示もスマホ用にきれいに反映される、目次をカスタマイズする手間が省けるという利点があります。

デザインがきれいになると、アクセス数も変化します。レスポンシブデザイン対応か対応していないデザインなのかで大きく差が出てしまいますのでチェックは忘れずにしておきましょう。

それではレスポンシブデザインを設定する方法について紹介します。まずははてなブログの「管理画面」→「デザイン」→「カスタマイズ」の順に操作をします。

テーマの画像に「レスポンシブデザイン対応」と表示されていれば、対応しているということになります。

レスポンシブデザインに変更したら、スマホや他のタブレットでも確認してみましょう。またはてなブログの設定から上記のように「トップページの表示形式を一覧にする」の設定をしておきましょう。

注意点として、レスポンシブデザインの中にはコードをコピーしないと変更できないテンプレートがあります。そしてそれぞれのテーマには注意書きが書いてありますので、必ず読むようにしましょう。

それではレスポンシブデザインに対応しているテンプレートを紹介していきます。全て無料でインストール可能です。

レスポンシブデザインに対応していて、初心者におすすめのテンプレートは、「Minimalism」です。シンプルなデザインで、見た目もきれいで使いやすさの評価も高いです。どんなブログジャンルでも当てはまるテンプレートとなっています。

Innocentは、Blankをベースとして、改良を何度か行ったシンプルでカスタマイズ性の高いテンプレートとなっています。

レスポンシブデザイン対応で、ナビゲーションバーの設定や、おすすめ記事リスト、パンくずリストの設置など細かくカスタマイズできるようになっていますので、満足度が高いです。

Brooklynは、白と黒を基調としたシンプルなデザインのテーマです。レスポンシブ対応もしており、カスタマイズ用にCSSも記述されているので、知識がある人であれば簡単にカスタマイズを行うことができます。

このBrooklynはランキングでも常に上位に入っているので、おすすめのテンプレートと言えます。

ここでは【はてなブログ】デザインのおすすめテーマの選び方～グローバルメニューバー～について紹介します。

デザインでレスポンシブ対応を選んだ方が良いように、グローバルメニューバーが使えるテーマを選んだ方がメリットがあります。そもそも「グローバルメニューバーとは」、「グローバルメニューバーを選ぶメリット」について以下から紹介してきます。

グローバルメニューバーとは上記のようにメニューバーを設置するバーのことを言います。

このグローバルメニューバーがあると、見たい、知りたい情報にすぐアクセスすることができるので、とても便利です。またレスポンシブ対応で、スマホでもメニューバーを2階層まで表示が簡単にできるようになっています。

グローバルメニューバーを選ぶメリットとして一番大きいのが、「アクセス数に貢献できる」ということです。

リンクをクリックすると、カテゴリーの一覧ページから自分が見たい記事を簡単に見つけることができますし、グローバルメニューバーの中に、読者に読んでもらいたいカテゴリーを入れるとサイトの特徴もアピールできるからです。

【はてなブログ】デザインのおすすめテンプレート～ベーシック～では、「Minimalism」「Brooklyn」「SOHO」「Material」「Written」「Naked」について紹介します。

この「Minimalism」のテーマはその名の通り「Minimalism」で、デザインは最小限のみに控えていてい、「美」を追求したデザインテーマを持っています。

スマホ・タブレット端末にも対応した「レスポンシブ対応」のデザインです。Minimalismのデザインは「モバイルファースト」に作られているので、スマホから見てもデザインがとても整っていて見やすいです。

「Booklyn」は、ブラックとホワイトを基調としたシンプルなデザインをテーマにしています。主に可能なカスタマイズは、「グローバルメニューの設置」、「オシャレなシェアボタンの設置」、「読者登録ボタンの追加」、「WEBフォントの利用」です。

レスポンシブデザイン対応でスマートフォンにも対応しています。またカスタマイズ用のCSSも記述しているので簡単にカスタマイズを行うことが可能です。

SOHOは、コードを一切編集する必要がないHTMLコード出力ツールを作成しています。この出力ツールを使うと、HTMLの書き換えを行うことなくグローバルナビ（ヘッダーのメニュー）、フォローボタン、シェアボタンを簡単に設置することができます。

現在利用可能なカスタマイズは、「グローバルメニューの設置」、「フォローボタンの設置」「シェアボタンの設置」、「フォントの変更」です。レスポンシブ対応です。

Materialは、スマホやタブレットなどでも見られる「レスポンシブ対応」です。また読者目線で記事が読みやすいように、「ワンカラム」のレイアウトになっています。

このワンカラムとは、左右にメニューバーがついていない表示のことを言いますが、どの画面サイズのデバイス（スマホやパソコン、タブレットなど）からでも見やすいように設計されていて、受け入れやすいというメリットがあります。

また、ホバーエフェクトや会話風のコメントなど、「楽しい要素」も追加されています。

「Written」はシンプルな2カラムのデザインです。レスポンシブデザインにも対応していて、文章や写真をすっきり見せたい方におすすめです。背景色の変更やヘッダ画像の挿入も可能です。

「Naked」は、記事部分を白・黒・灰色のみで作成しているため、たくさんの背景色や背景画像とマッチします。シンプルで使いやすいことやデフォルトのままでもオシャレなことが特徴的です。

ただし、深いところまでカスタマイズしていきたい人もどんどん改造できる点も魅力的です。

また、簡単にカスタマイズできるナビ・フッター機能や、初期状態でデザインされた「目次」、「カエレバ」、「ヨメレバ」、「アプリーチ」などの機能が揃っています。「Naked」はレスポンシブ対応です。

【はてなブログ】デザインのおすすめテンプレート～アドバンス～では「ZENO-TEAL」、「Codomisu Flat」、「DUDE」、「Innocent」、「Blank」について紹介します。

「ZENO-TEAL」の特徴は、レスポンシブ対応しており、トップページをカード型にレイアウトしたテーマになっています。メインカラーにmaterialdesignでよく使われるtealを使っています。

使い方の注意点としては、広告が出ている場合、Googleアドセンスのポリシー違反になる恐れがあるので無料版では使わないようにとあります。他にも使い方や注意点が記載されているので、利用したい場合はよく読んでから使うようにしましょう。

「Codomisu Flat」である作者は、はてなブログはPCデザインとスマホデザインは分けた方が美しく表示できるというポリシーを持っています。つまり、Codomisu Flatは「レスポンシブ非対応」です。

ですが、Codomisu Flatはフラットデザインっぽい見た目や、今までのテーマであまり見ることのなかったタイトルが横に並んだメニューが特徴的です。またおすすめ記事をスライダーで表示しているので、他の人と被りたくない方におすすめのデザインです。

このデザインテーマを見た時にスペルは違うのですが、ビートルズの曲を思い出しました。

「DUDE」の意味は、「気取り屋、洒落者」、若い人だと「DUDE!（ヒュー！オオー！）」と言った感じで使われる言葉です。つまり、気取ったオシャレさをコンセプトとしているデザインです。

また上記のように日本語より英語のタイトルの方がおしゃれでカッコよく見えるようになっているので英語でタイトルを付けたい人にはおすすめです。

注意点として日本語で設定したい場合は、カスタマイズが必要になるので確認を忘れないようにしましょう。レスポンシブ非対応です。

「Innocent」は、Blankをベースに改良を加えたシンプルでカスタマイズ性の高いテーマです。白と黒を基調としているので落ち着いた雰囲気もあります。もちろんレスポンシブ対応のデザインでもあります。

カスタマイズでは「ナビゲーションバー」、「おすすめ記事リスト」、「続きを読むボタン」、「パンくずリストの配置」などが可能になっています。

「Blank」はカスタマイズを重視して作られたデザインテーマです。レスポンシブデザインにも対応しています。

サイドバーの幅は広告がきれいにおさまるサイズ（レクタングル中の場合は300px）に設定されており、CSSの変更によってレクタングル大にカスタマイズすることもできます。

他にはフォントを変更・サイズの変更・見出しの太さ・リンクの色の変更や、ヘッダー、レイアウトとCSSで使用できる部分の変更が可能になります。

【はてなブログ】デザインを変更時する際の注意点にはどのような点に気を付けるべきなのでしょうか。「カスタマイズにこだわりすぎない」、「はてなブログにあるテーマの使用は避ける」、「リンク先をわかりやすくする」から紹介します。

ブログの注意点としては、もちろん記事を書くことが本業ですのでカスタマイズにこだわりすぎるのもあまり良くないです。

というのも、デザインのカスタマイズに「時間をかけすぎない」ことが大事です。デザインは一度凝りだすと、凝ってしまう人は多くの時間を費やしてしまいます。

デザインがおしゃれで、読者の目を引くことも確かですが、読者が求めている文や情報とデザイン性が一致して初めて、そのブログの人気が出る訳です。カスタマイズに時間をかけるより、その人の心を打つようなブログの方が魅力的ですよね。

2つ目の注意点として、はてなブログ側が用意しているテーマの使用はなるべく避けることをおすすめします。

はてなブログが用意しているテーマは、「初心者用」のイメージがあるので、ブログを書いている側の人も初心者なのかなと勘違いをさせてしまう可能性があります。

読者も有益な情報が欲しいと感じているので、初心者のブログを読もうとはあまり思わないでしょう。おすすめは「テーマストア」から選ぶことです。テーマストアにあるテンプレートの方がデザイン性が高いですし、圧倒的にオシャレです。

テーマは簡単に決めないで、人気があるテーマから選ぶということも忘れないようにしましょう。

3つ目の注意点として、リンクの文字が青以外のデザイン（テンプレート）を選ばないようにすることが大切です。通常、たいていのサイトはクリックする前はリンクの色は「青」、クリックした後（閲覧後）は「紫」に変わるように設定されています。

もし青以外の色にリンクの色を設定した場合は、「読者がリンクだと気づかず、クリックしない」可能性が出てきます。つまり、私たちも読者もリンクは「青色」という認識があるため、その色意外だとクリックするという認識もない方が当たり前なのです。

それと同時に、青文字で記事を書くこともやめた方が良いです。「リンクなのにクリックできない」とストレスを与えてしまう可能性がありますので、リンクの使い方には十分気をつけましょう。

はてなブログは、レスポンシブデザインのデザインテーマに対応していますが、注意点としてブログテーマが正しくレスポンシブデザインに設定されていないとただ単に画面サイズを小さくしただけのブログ表示になってしまい、見づらくなる可能性が高いです。

スマートフォンでも適切に表示されるレスポンシブデザインのテーマは以下の内容をクリアするように作ることが条件です。
 

1. Media queries（メディアクエリ）などを使ってどのデバイスから閲覧しても適切な見た目になるようにデザインテーマのCSSを調整してください。
2. テーマのCSSの先頭にResponsive: yesという行を含んだコメントを挿入する。もしテーマストア以外からCSSをインポートした場合はインポート先のCSSではなく、「デザインCSS」欄に直接Responsive: yesと記述するようにしてください。

【はてなブログ】デザインを、さらにもう1歩カスタマイズするにはどのような方法があるのでしょうか。「はてなブログPROに登録する」「はてなブログPROに登録するメリット」「HTMLとCSSを用いて自分でコードを書く」の視点から紹介します。

はてなブログPROに登録すると、自分好みのブログにカスタマイズすることが可能になります。年間コースを利用すると、最大で40％の割引が適用されます。
 

はてなブログPROに登録するメリットはたくさんあります。表にまとめましたので確認しましょう。
 

はてなブログ側の貼っている広告を外すことができるのは、はてなブログProだけになります。以前は「広告を非表示」という設定ではてなブログの広告をパソコンやスマホから見たときに非表示にすることができたのですが、現在はできないようになっています。

はてなブログでは、Googleアドセンス広告の掲載が可能になっています。Googleアドセンスとは、Google社が提供するブログ運営者向けの広告配信サービスです。Googleアドセンスの審査を通過して、たくさんのアドセンスが設置できる仕組みになっています。

はてなブログProは、より多くのアドセンスが設置できるというメリットがあります。

はてなブログProを申し込むことによって独自のドメインを使うことができるようになります。もともとユーザー自身が持っている独自ドメインを使用することもできますし、はてなブログを開設したときに決めたURLから独自度メインに移行する場合でも利用できます。

ブログにしかりHPにしかり、これらはの構成やデザインは全てHTMLとCSSなどで成り立っています。初心者には難しいかもしれませんが、自分オリジナルで作りたいのであれば「自分でコードを書く」ことも可能です。

「サルワカ」とは初心者でも理解できるようにHTMLとCSSの入門編やWordPressの使い方、デザインだとPhotoshopの使い方など基本的な内容から、誰もが疑問に思う内容が分かりやすく掲載されています。

またサルワカのHPはデザイン性にも優れているので見ていて飽きません。是非チェックしてみてください。