はてなブログでカスタマイズするべき7つのこと【初心者でも簡単】

デフォルト状態のはてなブログはオシャレではありません。

見栄えの悪いブログは読みにくいため、最後まで読まれずにページを閉じられます。

しかし、この記事で解説する『はてなブログでカスタマイズするべき7つのこと』を実践すれば、オシャレで読みやすいブログに早変わり。

コードをコピーするだけなので、誰でもすぐに実践できます。

読者に優しいブログを作るだけでなく、オシャレなブログで自身のモチベーションもあげてください。

はてなブログをカスタマイズする2つの理由

WordPressは自由度が高いため、初心者の方でもカスタマイズをしている人が多いです。

逆に、はてなブログはデフォルトでも最低限のデザインができているため、多くの人がカスタマイズを怠っています。

しかし、はてなブログこそカスタマイズした方がいい理由は、以下の2つです。

• デフォルトだと読みにくい
• デザインが同じなので素人っぽい

デフォルトだと読みにくい

はてなブログはデフォルト状態のデザインだと読みづらいです。

理由は以下の2つあります。

• 字が小さい
• フォントが読みにくい

読み手の気持ちを考えれば、読みやすいブログにすることは大切です。

すぐに離脱されるようなブログを運営していても、ブログを運営する意味もありません。

読みやすいブログは、読者のためにもあなたのためにもなります。

はてなブログを読みやすくするには、カスタマイズが必須です。

デザインが同じなので素人っぽい

はてなブログのデフォルトデザインは、素人丸出しです。

デザインがみんな同じなので、すぐにわかりますよね。

1. 初心者が書いた記事
2. 達人が書いた記事

あなたが他の人のブログを開いた時、上記のどちらにより興味が湧きますか？

達人だからといって情報の質が高いとは限りませんが、興味を持たれなければ読まれません。

記事を読んでくれる可能性を広げるためにも、カスタマイズしてデザイン性の高いブログを作りましょう。

はてなブログでカスタマイズするべき7つのこと【初心者でも簡単】

では、具体的にカスタマイズするべきポイントを紹介します。

すべてコピペで完了できるので、ぜひ実践してみてください。

• スマホとPCのデザインをそろえる
• フォントを変更
• ボックス（囲み線）
• 蛍光ペン式アンダーライン
• 目次デザイン（テーマによる）
• 記事タイトル・見出しデザイン
• フォントサイズを16px以上に変更

スマホとPCを同じデザインにそろえる

まずはじめに、スマホとPCを同じデザインにしておきましょう。

はてなブログのカスタマイズは、初期設定だとPCとスマホを別に作業しなければいけません。

しかし、レスポンシブデザインのテーマであれば、PCデザインをいじるだけでスマホにも反映されます。

管理画面の詳細設定より、レスポンシブデザインにチェックを入れてください。

1. デザイン
2. スマートフォン
3. 詳細設定
4. レスポンシブデザインにチェック

ブログはスマホで読む人が多いので、PCだけカスタマイズしても効果は薄いです。

必ず、スマホのデザインもチェックするようにしてください。

フォントを変更

フォントは、読みやすいさを向上させるための重要なポイントです。

フォントを変更するだけで読みやすいだけでなく、あっという間にオシャレな雰囲気に変わりますよ。

今回は、読みやすいと評判の『メイリオ』に変更する方法を紹介します。

方法は、『{}デザインCCS』にコードを挿入するだけなので簡単です。

1. デザイン
2. カスタマイズ
3. {}デザインCCS

管理画面から上記の順に選択し、下記コードをコピペしてください。

コードを挿入するとフォントが『メイリオ』に変更され、無理な場合は『游ゴシック』で対応します。

もし、他のフォントを使用したい場合には、「font-family:」の後の部分に希望のフォントを入力してくださいね。

ボックス（囲み線）

文字ばかりの文章は読者にストレスを与えます。

ブログ記事には、ボックスをうまく組み込むと読みやすいですよ。

ボックスとは下記のような囲み線のことです。

はてなブログに導入するには、CCSとHTMLにコードを挿入します。

まずは下記サイトから、好きなデザインのボックスを選んでください。

『{}デザインCCS』に、希望のCCSコードをあらかじめ挿入。

記事編集画面で、実際に使用する箇所にHTMLコードを挿入すれば実装できます。

初心者でも簡単なので、お気に入りの囲み線でブログを読みやすくしましょう。

蛍光ペン式アンダーライン

はてなブログの下線は、シンプルすぎて使い物になりません。

強調すべき箇所を目立たせられないので、ほとんど意味がないからです。

しかし、蛍光ペン式アンダーラインを使えば、効果的に目立たせるだけでなく、オシャレなブログに早変わりします。

蛍光ペン式アンダーラインは、『マーカー』と呼ぶこともありますね。

詳しくは、『はてなブログで蛍光ペン式アンダーラインを使う超簡単な方法【1分で完了】』に記載してあるため、簡単に方法を紹介します。

管理画面の詳細設定の『headに要素を追加』に、下記コードを挿入してください。

あとは、記事編集画面で斜体ボタンを押すだけで蛍光ペン式アンダーラインを使えます。

目次デザイン（テーマによる）

次に、目次デザインをカスタマイズしましょう。

PCデザインではテーマによってある程度カスタマイズされていますが、スマホデザインはデフォルト状態である場合が多いです。

目次のデザインも、『{}デザインCCS』にコードを挿入するだけで簡単です。

具体的に、目次デザインできるCCSコードを記載しているサイトを2つ紹介します。

目次ひとつでオシャレなブログの印象を与えるので、ぜひカスタマイズしておきましょう。

ちなみに、現在の目次を気に入っている場合や、スマホをPCと同じレスポンシブデザインにしている場合は問題ありません。

記事タイトル・見出しデザイン

次に、記事タイトルと見出しデザインをカスタマイズしましょう。

とくに、見出しデザインは記事のメリハリをつける上で大切です。

他のカスタマイズ方法と同じく、『{}デザインCCS』にコードを挿入してください。

具体的に僕が参考にしたサイトを2つ紹介します。

上記のサイトのコードは「h1」や「h3」となっていますが、それぞれカスタマイズしたい箇所を下記のように変えましょう。

• 記事タイトル → h1
• 大見出し → h3
• 中見出し → h4
• 小見出し → h5

WordPressの方は「h2」が大見出しですが、はてなブログの場合はスマホデザイン時のブログタイトル説明欄です。

はてなブログの人も大見出しをh2に変更した方がSEO的にも有利なので、HTMLコードを使っての変更をおすすめします。

フォントサイズを16px以上に変更

フォントサイズを16px以上にすることで、格段に読みやすくなります。

はてなブログは14pxや15pxのテーマが多く、小さくて読みづらいからです。

Googleは16px以上を推奨しており、SEOにも影響が出るので必ずカスタマイズしましょう。

他と同じく、『{}デザインCCS』に下記コードを挿入してください。

もし16pxでも小さいと感じるのであれば、数値を変更するだけで変更できます。

ちなみに、当ブログではPCが16.5px、スマホは16pxなので参考にしてください。

まとめ：はてなブログをコピペでカスタマイズ【初心者でも簡単】

はてなブログのカスタマイズは、初心者でも簡単にできます。

デザイン性の高いブログは読みやすさを格段に向上させるので、ぜひ実践してみてください。

• フォントを変更
• ボックス（囲み線）
• 蛍光ペン式アンダーライン
• フォントサイズを16px以上に
• 目次デザイン（テーマによる）
• 記事タイトル・見出しデザイン
• スマホとPCのデザインをそろえる

とはいえ、はてなブログのカスタマイズ性には限界があるのは事実です。

過剰なカスタマイズはサイト表示スピードを落とし、読者の離脱を促します。

しかし、Wordpressを使えば、デザイン性とサイトスピードの両立が可能です。

ブログを続けるのであれば、Wordpressへの移行をおすすめします。

実際に両方使った感想や、具体的な移行方法は下記をご覧ください。

» はてなブログとワードプレスはどっちがいい？【両方使った僕の結論】

» はてなブログからWordPress(ワードプレス)への移行を画像付きで解説