ブログ記事に見出しをつける

みなさん、こんにちは。


当ブログではいままで記事を書くにあたって記事内に見出しを特につけたりすることはありませんでした。
いろいろなブログの書き方的なページを見てみるとSEO的にどうなのかは微妙な所ですが、やはり見出しは付けたほうが良いようです。

見出しをつけた方が読者は読みやすいからです。

見出しをつけると記事の構成がまとめやすいので書きやすくなるとの話もあります。
タイプしながら内容考えているような自分には、見出しを考えて記事の構成を考える習慣が必要なのかもしれません。


さて、Bloggerで見出しをつける場合は下の画像のように入力画面で見出し内容を選択できます。

これをHTML入力画面で確認すると

<h2>見出し</h2>

<h3>小見出し</h3>

<h4>準見出し</h4>

とh2タグからh4タグまでが見出しとして使用されているのがわかります。

一方、当ブログ内で現在どのように見出しタグが使用されているかソース表示をして調べてみました。

<h2 class='date-header'><span>2016年4月13日水曜日</span></h2>
<h2 class='title'>徒然草検索</h2>
<h2 class='title'>言語設定</h2>
<h2 class='title'>徒然草のフィードを購読する</h2>
<h2>自己紹介</h2>
<h2>ブログ アーカイブ</h2>
<h2>ラベル</h2>
<h2 class='title'>スポンサードリンク</h2>
<h2 class='title'>Amazon 売行きBEST3</h2>
<h2 class='title'>楽天グループお勧め商品</h2>
<h2>徒然草 お勧め記事 BEST5</h2>

<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/blog-post_13.html'>ゆっくり寝ていたいけど&#12289;仕事に出かける</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/blog-post_18.html'>ゆっくり寝ていたいけど&#12289;釣りにでかける</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/blog-post_53.html'>ゆっくり寝ていたいけど&#12289;桜を見に出かける</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/blog-post_10.html'>いきなりビリヤードのゲーム画面が表示される&#65281;&#65281;ウィルス&#65281;&#65311;</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/postfix.html'>postfixで送信メールを転送する</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/04/blog-post.html'>本当のやさしさとは</a>
</h3>
<h3 class='post-title entry-title' itemprop='name'>
<a href='http://hro-blog.blogspot.jp/2016/03/blog-post_27.html'>日立の梅&#12288;あんず&#12288;桜&#12288;そして菜の花</a>
</h3>

h2タグは投稿記事の日付やガジェットのタイトルに使用されています。
h3タグは投稿記事のタイトルに使用されています。

記事内で使用する見出しタグは階層から考えていくとh4タグを使用することになります。
見出しタグの階層とは下記のように

<h1>--</h1>
<h2>---</h2>
<h3>---</h3>
<h3>---</h3>
<h2>---</h2>
<h3>---</h3>
<h4>---</h4>
<h4>---</h4>
<h3>---</h3>
<h2>---</h2>

h1の次に来るのはh2、h2の後に来るのはh3というように順番を守らなければいけません。

h1がブログタイトル「徒然草」、h2が記事投稿日、h3が投稿記事タイトルとなっていますので記事内の見出しはh4の準見出しを使用するのが順当です。

Bloggerの入力画面ではh2から記事内に設定できますが、h2とh3は使用を控えたほうが良いようです。（SEO的には・・・・）


作成画面で自動で作られる準見出しは、デザイン的に見た目があまり芳しくありません。
CSSを使用してカスタマイズしたいと思います。

h4タグ自体はBloggerの投稿記事内のコメントの部分にも使用されているので、h4タグ自体は変更せずにCSSを設定してh4タグにclassとして適用していきます。

テンプレート→カスタマイズと進み

上級者向け→CSSを追加　と進みます。

以下を、カスタム CSS 追加 の欄に加て、ブログに適用をクリックします。

.h4style{

 font-size: 18px;

 font-weight: normal;

 margin: 5px 0;

 padding: 5px 0 5px 10px;

 background: #eee;

 border-top: 1px #777 solid;

 border-bottom: 1px #777 solid;

 border-left: 8px #777 solid;

 border-right: 1px #777 solid;

}

HTML入力画面で

<h4 class='h4style'>見出しデザインを変更する</h4>

と入力します。

以下が入力例です。

見出しデザインを変更する

見栄え良く表示されているでしょうか。


次回からはキチンと見出しを作成して記事を書きたいと思います。


ではでは～☆ミ