(adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-4486288884285125", enable_page_level_ads: true });

Dear bro

この地球上のどこかにいるわたしと同じことで困っているあなたへ

【簡単】はてなブログの見出しをカスタマイズする方法【コピペでOK】

f:id:dearbrother:20181113171743p:plain

こんにちは、さだしです。

ブログにとって見出しはとても重要で、それは読者にとってだけでなくSEOの面でも、重要です。

はてなブログの見出しって最初の設定では、ただの太字で少し味気ないですよね。この記事でははてなブログの見出しのカスタマイズ方法についてご紹介します。
※そもそも見出しってなに?というかたにもわかりやすい記事になっています。

この記事の読者
  • 見出しってそもそもなに?という人
  • はてなブログで見出しをカスタマイズしたい人
この記事の内容
  • 見出しは読者だけでなくSEOにも重要
  • はてなブログでの見出しのカスタマイズ方法
  • おしゃれな見出しサイト紹介

4分ぐらいでサクッと読めるので見ていきましょう(。・д・)ノ

見出しは読者だけでなくSEOにも重要

ブログを始めたばかりの人にありがちな間違いが、見出しは大きくして太字にしたらOKというものです。僕はブログを始めて2ヶ月ぐらいはこの間違いをしていました。

これは半分正解で半分間違いです。なぜなら読者を意識できているが検索エンジンを意識してないからです。

文章中の見出しは本来、読者が内容を理解しやすいようにするためにあるので、ビジュアル的にわかりやすくするのはとても大切なことですが。

見出しを検索エンジンにわかるようにしてあげる

しかし、Web上で記事を書く場合にはもう一つ意識すべきものがあります。

文字を太くして大きくしても、検索エンジンはそれが見出しと認識できません。検索エンジンに見出しを理解させてあげるのがhタグと呼ばれるものです。

hタグの付け方

各ブログサービスにはhタグを簡単に挿入できるボタンが用意されています。

はてなブログの場合、見出しにしたい文字を選択してオレンジ枠で示している『見出し』からhタグを挿入できます。例えば大見出しを選ぶと文字にh3タグがつきます。

f:id:dearbrother:20181113172508p:plain

これで検索エンジンにも見出しだということが伝わるようになりました。

はてなブログの各見出しに対応するhタグ 

はてなブログの見出しは以下のように設定されています。

  • 大見出し=h3
  • 中見出し=h4
  • 小見出し=h5

これは見出しのデザインをカスタマイズする際に必要な情報になってきます。

各見見出しの使い方

またhタグについて初心者が間違えがちなのが、一つ目の見出しにh1タグ、二つ目の見出しにh2タグ、というようにhタグを見出しの番号を表すものとして使うものかと考えてしまうことです。
※一年前の僕です(笑)

実際の正しい使い方は下記です。 f:id:dearbrother:20181113172649p:plain

はてなブログではh1はタイトルにh2はブログ説明に使われてるので本文で使えるのはh3からとなっています。

中見出しや小見出しは必要がなければ使わなくてもいいです。僕は小見出しまで使うことはほぼ0ですね。

はてなブログで見出しをカスタマイズする方法

はてなブログではデフォルトの見出しはビジュアル的には太字で大きくなるだけなので、ちょっと味気ないです。どうせなら色とか形つけておしゃれなデザインにしたいですよね。

見出しをカスタマイズするためにすることは簡単で、はてなブログのCSSに見出しのサンプルコードを貼り付けるだけです。つまりコピペでOK。

説明見ながらでも5分ほどでできると思いますので、一緒に進めていきましょう。

実際に見出しをカスタマイズしてみる

イメージとしては、以下のように太字だけの見出しに色と形をつけてみます。 f:id:dearbrother:20181113172729p:plain

カスタマイズ手順①サンプルコードをコピー

以下のコードをコピーします

.entry-content h3 {
padding: 4px 10px; color: #111; background-color: #f0f0f0; border-left: 8px solid #2d70a4;
}

カスタマイズ手順②はてなブログで見出しを編集する場所

次にはてなブログの自分の[管理画面]から[デザイン]をクリックします。

次にスパナのマークをクリックします。 ※スマホの方はブラウザでPC版表示にするとスパナマークがでてきます。 f:id:dearbrother:20181113172830p:plain

カスタマイズ手順③コピーしたサンプルコードを貼り付け

最後に[デザインCSS]をクリックして先ほどコピーしたコードを貼り付けて[変更を保存する]ボタンをクリックすると完了です。

f:id:dearbrother:20181113172923p:plain

記事の編集画面に戻り、最初の方に紹介した方法で好きな文字に大見出しをつけてみてください。デザインが適応されているはずです。

先ほどのコードはh3を指定していたので大見出しにデザインが適応されていますが、カスタマイズしたい見出しに応じてコードのhを選んでください。。

おしゃれな見出しサイト紹介

見出しのデザインって一度気になりだすと、お気に入りを追求したくなるのかなーと思います。僕も憧れのブロガーさんと同じ見出しを使いたくて、一時間ぐらいさがしまわりました(笑)

せっかくですのでおしゃれな見出しのコードをまとめているサイトをご紹介しますね。68個も見出しがあるのでお気に入りのものが見つかりやすいかと思います。

saruwakakun.com

もし好みのデザインが見つからなかった場合は[見出し CSS]で検索してみてください。見出し○○選のようなサイトが沢山見つかりますので。



せっかくブログをやってるなら、少しCSSを勉強して自分で見出しを作るのも面白いかもしれませんね。

以上になります。

いいブログライフを(。・ω・)ゞ