はてなブログで「見出し」をデザインしてみた

こんばんは。ハヤト（@hayato_k0315)です。

今日は、早速「はてなブログ」で見出しをデザインしてみました。見出しをつけるとブログの記事が綺麗で整然として見えるのでお勧めです。また、適度に見出しをつけて記事を書くとSEO的にも有効みたいですよ。

見出しのデザイン方法

はてなブログで見出しをデザインするためには、CSSを編集しなければなりません。

［管理］→［デザイン］→［カスタマイズ］→［{}デザインCSS］でCSSの編集画面に移動します。そこでコードの末尾に下記のコード追加してください。

【コード】

h3{
font-size: 110%;
margin:10px 0px;
padding:0 0 3px 9px;
border-left:10px solid #0000ff;
border-bottom:1px dotted #0000ff;
}

h4{
font-size: 105%;
margin:10px 0px;
padding:0 0 3px 9px;
border-left:8px solid #0000ff;
}

コードを入力したら「変更を保存」します。これで記事で見出しを使用したいときは、一時的に「HTML編集」を選択して<h3>や<h4>囲うとその部分が見出しになります。

例えば、HTML編集で<h3>見出し3</h3>とすると下記のように表示されます。

見出し3

 プレビューすると見出しがデザイニングされているのが分かります。あとは元通り「見たまま編集」で記事を書き進めてください。

 ちなみに<h4>見出し4</h4>とすると、

見出し4

になります。

見出しをデザインする記事は、以前別ブログでも書いたことがあります。

細かいデザイニングはこちらをご参照ください。

⇒　ブログの「見出し」をデザインする－Blogger　アメブロ－

Bloggerなどでは<h3>まで使用していたのですが、はてなブログは<h1>と<h2>までしか使用されていなかったので、<h3>から使用することができて便利です。

はてなブログでは<h1>はタイトルに、<h2>はブログの説明文に使用されているようです。

ほとんどのブラウザでは右クリックで「ソースを表示」すればそのブログの構成を確認できます。お時間があったら試してみてください。