The Cat's Pajamas

一人旅好きの趣味ブログ

はてなブログのデザインを手軽にお洒落に設定する方法【初心者ブロガー向け】

SPONSORED LINK

はてなブログのデザインの変更方法とは?

今回の記事では、はてなブログのデザイン設定を自分好みにする方法をまとめたいと思います。

既にデザインのカスタマイズを自力で行っている方には、とても初歩的な内容かもしれませんので、対象は

  • はてなブログを始めようと思っている人
  • はてなブログを始めたばかりの人
  • デザイン設定がさっぱり不明なはてなブロガー

と予め記しておきますね。

宜しければ、ブログ運営の参考にしてください。

Orange Flower

1、デザインテンプレートを使用する

まずお勧めするのは

  • デザインテンプレートを使用する方法

です。

はてなブログに登録されている無料のテンプレートを利用して、ブログのデザインをお洒落にすることができます。

設定方法も超簡単です。

  • ブログ管理画面を開く
  • 「デザイン」をクリック

f:id:eno1081:20181003005913j:image

そうすると左横にテンプレートの選択肢がたくさん出てくるので、好きなものを選びます。

おすすめはテーマストアのテンプレート

個人的にお勧めのテンプレートは

  • 公式テーマ以外のテーマ

です。

公式テーマは、少し野暮ったく、デザインも癖があるものが多いです。

好みのテーマが見つからない人も多いと思います。

なので一番下まで、公式テーマをスクロールします。

すると

  • 「テーマストアでテーマを探す」

という選択肢が出てきます。

f:id:eno1081:20181003005930j:image

これをクリックし、はてなブログのブロガーさんが独自に作成したオリジナルのテーマをインストールするのが一番おすすめです。

テーマストアでおすすめのデザイン

もしかすると

  • はてなブログは少しデザインがダサイ

というイメージを持っている方も多いかもしれません。

でも実は、綺麗でスタイリッシュなテンプレートは多くあります。

個人的に、おすすめなのは

  • Haruni(可愛い系)
  • Minimalism(ほのぼのシンプル系)
  • Innocent(シンプルカッコいい系)

ですね。

以下のリンクからデモサイトが見れますので、宜しければ参考にしてください。

「はてなブログお洒落じゃん!」

ってなりますよ。

test-test-test.hatenadiary.jp

minimalism-theme.hatenablog.com

moonnote.hateblo.jp

テーマインストールの方法

テーマのインストール方法も簡単です。

  • 「プレビューしてインストール」
  • ブログを選ぶ
  • 「このテーマをインストール」

で実装完了になります。

テーマは無料で利用できますので、心配しなくても大丈夫です。

2、スマホのデザインをレスポンシブに設定

続いて、スマホから見たときのデザインをお洒落にする方法です。

デザイン設定の管理画面の

  • スマホのマークをクリック
  • 一番下にある「詳細設定」をクリック
  • 「レスポンシブ設定」にチェックを付ける

これで保存するとPCとスマホのデザインが一緒になります。

f:id:eno1081:20181003005952j:image

先ほど紹介したテーマをきちんと設定していれば

  • スマホから見てもPCと同じお洒落なデザインになる

ということです。

たった数分で出来る作業ですので

  • はてなブログ初心者であれば最初に設定してしまうのが◎

だと思います。

3、はてなブログPROに登録する

次に紹介するのは、はてなブログPROを登録した後のブログカスタマイズの話です。

具体的にPROに登録すると

  • 変な広告を消せる
  • 配置できるアドセンスの数が増える
  • 独自ドメインが使える
  • 記事一覧形式にできる

他いろいろと利点があります。

より自分好みの細かなカスタマイズなども可能になります。

(当ブログもはてなPROで運営しています)

値段は順に

  • 2年コース:40%割引 14,400円(税込)600 円/月(税込)
  • 1年コース:30%割引 8,434円(税込)703 円/月(税込)
  • 1ヶ月コース:1,008円(税込)

無料体験も可能ですので、気になる方は試してみると良いと思います。

はてなPROに変えるベストタイミングは?

はてなブログPROに変更するタイミングで悩んでいる方も多いと思います。

個人的にお勧めなのは

  • 最初からPROでやる
  • 不安な場合はPV200~500/日

くらいのタイミングがおすすめです。

PROに登録後、独自ドメインを取得して設定すればGoogleアドセンスの審査を受けられます。

※(独自ドメインではない無料のはてなブログでは審査を受けることはできません)

参考までにGoogleアドセンスの収益は

  • 1万PV:~3,000円
  • 5万PV:3,000~15,000円
  • 10万PV:15,000~30,000円

が目安となります。

つまり200PV/日のアクセスがあれば、途中でブログを止めない限り1年間で確実に費用は回収できるはずです。

さっさとPROに登録してアドセンス審査を受けるのが◎

Googleアドセンスといえば、ブロガーなら誰もが利用したい定番サービス。

しかし、アドセンスの審査は簡単ではありません。

特に記事数が増えれば増えるほど、不合格の原因がわからず訂正ができなくなり、非常に苦労します。

ちなみに当ブログの場合は、PV50000/月を超えてから1年半審査に受からず、軽く10万円以上のブログ収入を逃してしまいました。

www.nekopajamas.net

PROにしようか悩む気持ち、すごくわかります。

でも、個人的な意見ではありますが

  • 赤字になっても大した金額ではない
  • ブログが伸びる前に独自ドメインに切り替えた方がダメージが少ない(ドメインを変えると一時的にPVは下がる)
  • アドセンスの審査は早く受ければ受けるほど受かりやすい

です。

なので、思い切って最初からPROでやるのも◎だと思います。

それくらい私は、はてなブログを利用するならPRO一択だと考えています。

4、自分好みにHTMLとCSSでゴリゴリ改造する

以上で説明した

  1. はてなのデザインテーマ利用
  2. レスポンシブ設定〇
  3. はてなPRO登録

を行ったうえで、さらに自分好みに細かい調整をしたい人は、自分でコードをデザイン設定に貼り付けていきます。

ここから上級者篇ですね。

好みのカスタマイズをしているはてなブロガーを探す

まずおすすめしたいのは

  • 好みのカスタマイズを行っているはてなブロガーを探す

という方法です。

ぱっと訪れて「この人のデザイン素敵だ」と思ったら、はてなブロガーかどうかをチェックします。

はてなブロガーであれば原理的にカスタマイズは可能なはずです。

その方のブログの記事の中に

  • ブログのカスタマイズに関する記事がないかチェック

してみてください。

参考になる情報があるかもしれません。

ちなみに私は

というはてなブログのデザインに憧れてます。

内容の濃さもさることながら、シンプルで美しく使い勝手の良いデザインが光るはてなブログです。

「こんなブログがはてなブログで作れるんだ」

という気づきがあります。

憧れのはてなブログですね。

tsukuruiroiro.hatenablog.com

サルワカを賢く活用

はてなブログだけでなく、あらゆるブログのカスタマイズ(サイトデザイン)において非常に参考になるサイトも1つ紹介したいと思います。

です。

有名なサイトですので、既にご存知の方も多いと思います。

saruwakakun.com

このサイトでは、初心者にもわかりやすくHTMLやCSSのデザインコードを公開・説明しています。

(コピペも自由にできます)

自分の気になるパーツのデザインにとても役立ちますので、一度チェックしてみてください。

ちなみにこのサイトの運営者さん。

実は先ほど紹介したLITERALLYの管理人と同一人物です。

両方参考になりますので(笑)合わせてご参照ください。

5、HTMLとCSSの基本を学べる本

次におすすめなのが

  • 本を1冊買ってサイトデザインの基本を知る

という正攻法です。

最初はよくわからず

  • Googleで変えたい部分のコード(HTMLやCSS)を検索
  • コピーして、適当に貼る
  • なんかデザイン変わった!➡嬉しい

で終わります。

しかし、どんどんブログのカスタマイズが進むにつれて

  • コピペして貼ったコードでごちゃごちゃ
  • 失敗してデザインが崩れても直せない
  • 何が必要で何がいらないのかさっぱり

となる方も少なくないでしょう。

(実際、私はそうでした)

そこでおすすめするのが「HTML5&CSS3レッスンブック」という本です。

私はこの本を1冊やっただけですが、その後適当にコピペしていたデザインのためのコードの見え方が劇的に変わりました。

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 
  • なにもわからな初心者でもOK
  • カラーでわかりやすい
  • 短時間でさくっと学べる
  • 必要最低限の知識が身につく

非常におすすめの本です。

ちなみにこの本も、先ほど紹介したLITERALLYでおすすめされている1冊です。

本当に役に立ったので、個人的には

  • 変にネットで情報を探して、楽をしようとするとかえって遠回りになる

という気付きにもなりました。

サイトデザインに興味がある方は、最初の1冊としても大変おすすめです。

▶HTML5&CSS3レッスンブック

6、テーマカラーを決めておくと◎

次にサイトデザインを行う上で、知っておくと良い色の話です。

  • 自分のブログテーマカラー(色調)を決める

のがおすすめです。

ちなみにこのブログは、青緑を基調にしています。

自分の好きな色ということもありますが、Googleアナリティクスで分析したところ、当ブログの訪問者が男女比5:5ですので、あまり性別を感じさせない色にしようと心がけています。

同じように、自分のブログの訪問者の傾向(性別・年齢など)を確認して、テーマカラーを決めるのもおすすめです。

色のコードは

のようなチャートから随時好きな色を選んでも良いと思います。

下のサイトの記事も、非常に役に立ちます。

tsukuruiroiro.hatenablog.com

デザイン本を買って、気分をあげるのもお勧めです。

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉

 
ノンデザイナーズ・デザインブック [第4版]

ノンデザイナーズ・デザインブック [第4版]

 

7、スマホとPCのデザインを分ける方法

最後に、スマホのデザインとPCのデザインを分ける方法を紹介します。

先ほど紹介した

  • レスポンシブ設定をクリックしない

とPCとスマホのデザインが完全に分離されます。

f:id:eno1081:20181003015457j:image

こうするとスマホのデザインは、下のようなはてなデフォルトのものになります。

(こういうタイプのブログに見覚えがある方も多いと思います)

f:id:eno1081:20181003003210j:image

この場合の注意点は

  • はてなデフォルトのスマホデザインから、すべて自分でコードを入れてカスタマイズしないと綺麗なデザインにならない

という点です。

逆に言えば長所は

  • 或る程度CSSとHTMLが判れば、他のブログと被らないオリジナルのデザインにカスタマイズできる

ということです。

また

  • アドセンスの配置をPCとスマホで変えることができる

という利点もあります。

はてなブログのアドセンス配置に関しては「はてなブログでアドセンス収益UP*自動的に2つ記事内設置する方法【まとめ】」という記事を参照ください。

www.nekopajamas.net

※こちらは現在(2018.10)当ブログが行っている方法になります。

細かなカスタマイズは「はてなブログをスマホで見たときのトップページ*簡単カスタマイズ方法【コピペOK】」という記事を参考にしてください。

(ただし情報が古いので、またリライトしたいと考えています)

www.nekopajamas.net

デフォルトからのカスタマイズは、時間もかかりますし、なかなか苦労も多いので、特に拘りがなければ、一番最初に紹介したはてなストアのテーマを利用するのが一番だと思います。

ただブログへの愛着は強くなるかもしれません!

まとめ

ということで今回の記事では、はてなブログのデザイン設定についてまとめてみました。

内容は

  • テーマストアのテーマを利用するのが◎
  • その後、レスポンシブ設定にするとPC=スマホのデザインになって楽で綺麗
  • はてなPROは早めに入った方がいい
  • サルワカさんのサイトがおすすめ
  • HTML5&CSS3レッスンブックで基礎を学ぶと劇的にコード内容がわかる
  • PCとスマホのデザインを分けたかったら、レスポンシブ設定をクリックしない

というものでした。

自分自身が以前わからなかった点も含めて、まとめたつもりです。

ちなみに

  • はてなブログとWordpressどっちにすべき?

という問題に関しては個人的には

  • 今から始めるならWordpressにする

とお答えしておきます。

理由は

  • お洒落なテンプレートが多い
  • 細かなデザイン設定ができる(自由度高め)
  • はてなブログにしても、どのみち有料プランに入ることになるから

です。

PROの値段を考えると、Wordpressと変わらない(むしろ安い?)かと思います。

ちなみに、ワードプレスに関しても

  • 無料ではなくきちんと初期費用は払った方が結果、遠回りにならない

と個人的には思います。

はてなブログは手軽に始めやすいという利点もありますので、両方利用してみるというのも◎かもしれませんね。

以上はてなブログのデザイン設定について悩んでいる方の参考になれば、幸いです。

それでは、最後まで記事を読んでくださり有難うございました

HTML5&CSS3レッスンブック

HTML5&CSS3レッスンブック

 
ブログに関する他の記事

www.nekopajamas.net

www.nekopajamas.net
www.nekopajamas.net