はてなブログで記事の見出しをお洒落に変更する方法と3つのメリット

こんにちはー。管理人のピヨ猫でーす。

ブログやホームページの見出しって皆おしゃれにしてるよねーー。
僕は、はてなブログでブログを書いてるんだけど、はてなブログで見出しをおしゃれにする方法ってあるのかなー

疑問がある

はてなブログでも見出しを変えることが出来るよ。見出しは見た目だけでなく、SEO対策にもなるから、しっかり設定しておいた方が良いよ。これからやり方を説明するね。

記事の説明です

 

1.見出しってなーに

見出しはブログやホームページの文書の段落を記すもので、HTMLで以下の様に記載します。

【HTML】

  • <h1>h1 見出し</h1>
  • <h2>h2 見出し</h2>
  • <h3>h3 見出し</h3>
  • <h4>h4 見出し</h4>
  • <h5>h5 見出し</h5>
  • <h6>h6 見出し</h6>

はてなブログのデフォルトの場合、見出しはブラウザ上で以下の様に表示されます。
間違えました。はてなブログの見出しの表示は、自身のはてなブログに適用しているテーマによって違います。見出しは例えば以下の様に表示されます。

【表示】

見出し

2.はてなブログで見出しの表示を変更する方法

はてなブログで見出しの表示を変える場合は、
管理画面のデザイン → カスタマイズ → デザインCSS にてCSS(スタイルシート)を設定します。
【はてなブログでCSSを設定する方法】

はてなブログでCSSを設定する方法

はてなブログでCSSを設定する方法

CSSはHTMLのタグ(例. <h1>, <h2>, ・・・)のブラウザ上での表示スタイルを記述できるもので、例えば、CSSを以下の様に記述すると、

h3 {
background: linear-gradient(transparent 70%, #a7d6ff 70%);
}

<h3>h3 見出し</h3>の表示が以下の様に変わります。

CSSの適用例

CSSの適用例

3.使える見出しCSSのテンプレート

CSSをゼロから作るのは難しいので、見出しCSSのテンプレートを提供してくれているサイトからCSSを貰うのが良いです。

参考として、見出しCSSのテンプレートを豊富に提供しているサイトのリンクを掲載します。

https://saruwakakun.com/html-css/reference/h-design

h2~h6までのhタグのCSSの組み合わせ例を掲載します。

h2 {
color: #6cb4e4;
text-align: left;
padding: 0.5em;
border-top: solid 2px #6cb4e4;
border-bottom: solid 2px #6cb4e4;
background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}

h3 {
background: linear-gradient(transparent 70%, #a7d6ff 70%);
}

h4 {
padding: 0.5em;/*文字周りの余白*/
color: #494949;/*文字色*/
background: #fffaf4;/*背景色*/
border-left: solid 5px #ffaf58;/*左線(実線 太さ 色)*/
}

h5 {
border-bottom: solid 3px #cce4ff;
position: relative;
}
h5:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}

h6 {
position: relative;
display: inline-block;
padding: 0 55px;
}
h6:before, h6:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 1px;
background-color: black;
}
h6:before {
left:0;
}
h6:after {
right: 0;
}

※ はてなブログではh1タグはブログタイトルで使われており、ブログ本文で使うことはないので、上記のCSSにh1タグは記述していません。

上記CSSを適用した場合の各hタグ(見出し)の表示イメージ
↓↓↓
CSS見出しサンプル

4.はてなブログに見出し設定をする際の注意点

h2から使う。h1は使わない

「はてなブログ」ではh1はブログタイトルに適用されているので、ブログ本文はh2から使って下さい。

h2から順番に使う(h1、h3、h4・・・の順に使う)

見出しタグは順番に使って下さい。飛び飛びだと自分が後で見辛いのと、見出し構成が良くないブログはGoogle検索エンジンが良い評価をしてくれません。

◆ 良い例

  • <h2>第一章</h2>

  • <h3>第1節</h3>

  • <h3>第2節</h3>

  • <h2>第二章</h2>

  • <h2>第三章</h2>

    ◆ 悪い例①:同列のセクションのhタグが違う

  • <h2>第一章</h2>

  • <h3>第二章</h2>

  • <h4>第三章</h2>

    ◆ 悪い例②:hタグの番号が飛んでいる

  • <h2>第一章</h2>

  • <h5>第1節</h3>

  • <h5>第2節</h3>

  • <h2>第二章</h2>

  • <h3>第1節</h3>

  • <h3>第2節</h3>

  • <h2>第三章</h2>

シンプルなテーマを使う

はてなブログのテーマは、テーマ自体でhタグのスタイルを決めているものがあります。その場合、デザインCSSで設定したスタイルとテーマのスタイルが競合して予期しない表示をすることがあるので、自分で見出しの設定をしたい場合は、使うテーマはシンプルなものが良いと思います。

Markdown形式でブログを記述する

はてなブログは編集方法から「見たまま」「はてな記法」「Markdown」「HTML」編集が選べます。
http://help.hatenablog.com/entry/editing-mode?_ga=2.72114707.1806816549.1554901108-1347204791.1543927465

しかし、見出しをきちんと設定する場合は、「Markdown」形式をお勧めします。
「見たまま」編集はお手軽な反面、HTMLを意図しない形で記述される場合があり、せっかく綺麗に見出しを設定したものが壊れるかも知れないのでお勧めしません。
他は何れでも良いのですが、見やすさ、他のブログへの移行のしやすさを考えると、「Markdown」形式が良いです。

5.見出しを設定することのメリット

見出しを設定することの3つのメリット

  • 見た目が綺麗で読む側が読み易い (人に優しい)
  • SEO対策になる(AIに優しい)
  • 自分が後で見て見易い(自分に優しい)

人にも自分にもAI(Google検索エンジン)にも優しい見出し設定を心がけましょう!!
最後は無理やり当ブログのタイトルのAIに繋げたかっただけですm( )m

それでは、少しでも本記事がお役に立てたら幸いです。

f:id:shibayu2002:20190310112521j:plain

成果を出し続けるための王道SEO対策実践講座 [ 鈴木良治 ]

価格:2,138円
(2019/4/10 22:59時点)
感想(0件)

広告




スポンサーリンク
広告




広告




シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
広告