【コピペで楽勝!】はてなブログでカスタマイズするべき7つのこと

マノアキラ(@AkiraMano)です。

「はてなブログってカスタマイズする必要ある?」
「はてなブログをコピペだけでカスタマイズしたいけどコードは?」

今回は、こんな疑問を解決する内容です。

この記事の内容を実践することで、はてなブログのカスタマイズが簡単にできますよ!

僕は現在WordPressでブログを運営していますが、実際にはてなブログ時代に行っていたカスタマイズ方法なので参考にして下さい!

本記事の内容
  • はてなブログをカスタマイズする理由
  • はてなブログでカスタマイズするべき7つのこと

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

【コピペで楽勝!】はてなブログでカスタマイズするべき7つのこと

ブログでWordPressを利用している方はそもそも自由度が高いことから、初心者の方でもある程度のカスタマイズをしている方が多いですよね。

逆に、はてなブログを利用の方は、テーマを選べばある程度のデザインが出来上がるため、あまりカスタマイズしている人が少ないように感じます。

はてなブログをカスタマイズするべき理由は、以下のとおりです。

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

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

正直、デフォルトのはてなブログは読みにくいですね。

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

上記のとおりです。

ブログをやるからには、誰かに記事を読んでもらうためにやるわけなので、読み手のことを考えなければいけません。

読み手のことを考えることのできないブログは、すぐに離脱されて読まれませんので、読みやすくカスタマイズすることが必要です。

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

はてなブログは、デフォルトだと素人っぽいですね。

デフォルトのはてなブログの人は、「初心者かな?」とすぐにわかってしまいます。

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

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

初心者が運営しているブログだと、「なんだ初心者か…」といって記事まで読み進めてくれない場合もあります。

最初にハッタリをかますことで記事まで読んでくれる可能性が広がりますもで、ぜひカスタマイズしておしゃれに見せましょう!

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

はてなブログでカスタマイズするべき7つのこと

【コピペで楽勝!】はてなブログでカスタマイズするべき7つのこと

はてなブログの人は、以下の7つをカスタマイズしましょう!

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

カスタマイズが面倒だと思っていたり、難しいと思っている方がいるかもしれませんが、基本的にGoogleで調べてコピペすればOKです。

僕が使っているコピペ参照サイトとともに、それぞれ解説していきますね!

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

まず、スマホとPCはデザインを分けていますか?

PCでのカスタマイズとスマホでのカスタマイズは初期設定だと別々に作業しなければいけません。

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

管理画面より、以下の設定をしましょう。

<管理画面より>

  1. デザイン
  2. スマートフォン
  3. 詳細設定
  4. レスポンシブデザインにチェック
以上で、PCデザインとスマホデザインは一緒になります。

PCで見るときっちりデザインされていても、スマホで見るとデフォルトのままの人がわりと多いですね。

ブログをスマホで見る人が多いので、スマホのデザインは重要になります

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

基本的に、はてなブログの文字サイズは小さいですね。

テーマにもよりますが、なぜか「14px」や「15px」が多いです。

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

方法は、以下の手順になります。

<管理画面より>

  1. デザイン
  2. カスタマイズ
  3. {}デザインCCS
  4. 「.entry-content p {font-size: 16px;}」 をコピペ

以上で、ブログフォントサイズは「16pxになります。

もし、16pxでは小さいという方がいたらコード内の数字を変えればOKです。

できれば、「16px」か「17px」が良いと思いますよ。

ちなみに、このブログは現在「16px」となっていますので参考にしてください。

フォントを変更

フォントのサイズと合わせて、フォントも変更するのがおすすめです。

「フォントなんてどうでもいいじゃん?」と思うかもしれませんが、フォントを変更してみるととても読みやすくなりますよ。

こちらのサイトでは「メイリオ」になっており、読みやすくて気に入っています。

カスタマイズ方法は、フォントサイズ変更や見出しデザイン変更と同じく「{}デザインCCS」に下記のコードを入力してください。

/ *フォントの設定 * /
body {
font-family: “メイリオ”, Meiryo, “游ゴシック”, “Yu Gothic”, YuGothic, “Hiragino Kaku Gothic ProN”, “Hiragino Kaku Gothic Pro”, “MS ゴシック”, sans-serif;
}

こちらのコードを入力するとフォントが「メイリオ」に変更され、もし無理な場合は「游ゴシック」になる、といった感じです。

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

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

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

意外とこのカスタマイズをしていない人が多く、見出しが単なる大文字のようになっている人を見かけます。

特に、見出しデザインは記事のメリハリをつける上で大切ですので、気をつけてくださいね!

方法は以下のとおり、とても簡単です。

<管理画面より>
  1. デザイン
  2. カスタマイズ
  3. {}デザインCCS
  4. 「好きなデザインのCCSコード」をコピペ

「好きなデザインのCCSコード」には、Googleで調べるとCCSをまとめてくれている人がいるのでそれをコピペでOKですよ。

例えば、以下のサイトがとても参考になります。


コピペで簡単!CCSではてなブログの見出しをカスタマイズ

CCSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選


上記のサイトから、好きなデザインを選んでCCSをコピペしましょう。

コピペで完了するので、専門知識がなくても簡単にできます。

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

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

WordPressの方は、「h2」が大見出しですね。

はてなブログでは「h2」は、スマホデザイン時のブログタイトル説明欄になります。

* はてなブログの人も「大見出し → h2」に変更した方がSEO的にも有利です。HTMLコードを使って変更しましょう。

目次デザイン(テーマによる)

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

PCデザインでは、テーマである程度カスタマイズされていますが、スマホデザインは皆無である場合が多いです。

前述した、スマホをPCと同じレスポンシブデザインにしてあれば問題ありませんが、スマホとデザインを分けたい方や、テーマの目次が気に入らない人向けに参照サイトを紹介します。

下記のサイトがおすすめです。


こちらもCCSをコピペするだけでOKなのでとても簡単です。

ちなみに、現在の目次を気に入っている方は特に問題ありません。

ボックス(囲み線)

ブログの説明に囲み線を入れ、内容をまとめるとグッと読みやすくなります。

こんな感じのやつです。

カスタマイズ方法は、以下のとおりです。

<管理画面より>
  1. デザイン
  2. カスタマイズ
  3. {}デザインCCS
  4. 「好きなデザインのCCSコード」をコピペ
<ブログ編集画面>
  1. HTML編集
  2. 挿入箇所に「好きなデザインのHTMLコード」をコピペ

あらかじめデザインしてあるコードを紹介してくれているサイトがありますので。以下に紹介します。


とても簡単なので、お気に入りの囲み線を見つけてブログを読みやすくしましょう

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

はてなブログで、デフォルトのアンダーラインを使っている人いますか?

はてなブログのデフォルトのアンダーラインでは、残念ながらまったく強調にはなりませんね。

おすすめは、斜線ボタン一発で蛍光ペン式アンダーラインを挿入する方法です。

こんな感じのやつです

このカスタマイズ方法は、下記の記事にまとめてあります。

以下、具体的な手順です!

<管理画面より>
  1. 設定
  2. 詳細設定
  3. 検索エンジン最適化「headに要素を追加」
  4. コードをコピペ
コピペするコードは  下記になります。
<style type=”text/css”>
article em{
font-weight:bold;
font-style: normal;
margin:0 0.1em;
padding:0.1em 0.2em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 60%, #ffd700 60%) !important;
}
article i{
font-style:oblique !important;
}
</style>

以上で、斜線ボタンを押すだけで蛍光ペン式アンダーラインを挿入することができますよ!

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

まとめ:はてなブログをコピペでカスタマイズしよう

【コピペで楽勝!】はてなブログでカスタマイズするべき7つのこと

「はてなブログでカスタマイズするべき7つのこと」について解説しました。

繰り返しですが、はてなブログをカスタマイズするべき理由は以下のとおりです。

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

ブログデザインは、記事を読んでもらうためにとても重要になります。

せっかく頑張って書いた記事を読んでもらうためにも、いち早く読み手に優しいカスタマイズをしていきましょう!

この記事が参考になれば幸いです。

関連記事

(adsbygoogle = window.adsbygoogle || []).push({});マノアキラ(@AkiraMano)です。「ブログって毎日更新した方がいいの?」「ブログを毎日更新をするコツは?」今[…]

ブログを毎日更新するメリットやコツ
関連記事

(adsbygoogle = window.adsbygoogle || []).push({});こんにちは、マノアキラ(@AkiraMano)です。ブログを毎日更新しており、通算記事数は250記事くらいです。[…]

ブログ初心者の目標設定