そらいろくらげが浮き輪で海に浮いているイラスト

ブログに見出しを付ける

ブログを書く上でより読者にわかりやすく記事の内容を読んでもらうためには、記事に見出しを付けることが大切です。ほとんどのブログ記事は見出ししか見られていないというほど、見出しは重要な文章です。

ですが、まず「見出しって何?」「どうやって見出しを付けるの?」というところからして、わからないブロガーの方も多いのではないでしょうか。

かくいうくらげも、10年間ブログを書いてきてた中で見出しをブログに使い始めたのはここ1年以内です。
いろんなジャンルのブログを読んでいて、ふとあるブログを読んでいる時に見出しがあると読みやすいなと思ったのがキッカケでした。

そこで、見出しというものについて詳しく解説していきます。

見出しとは何か

新聞の1面に掲載されるような主要な記事においては最初に大きい字で見出しがあり、次にリード、次に本文が続くというスタイルがとられる。引用元:見出し – Wikipedia

Webでの見出しの場合は6段階に分かれていて、表記にはHTMLタグを使用します。

見出しの種類

<h1>大見出し。主にブログタイトルやサイト名、記事タイトルに使用。</h1>
<h2>中見出し。記事のタイトルもしくは記事内の大見出しとして。</h2>
<h3>中見出し。この記事で言うと”見出しとはなにか”見出しとは何か”の部分に当たる。</h3>
<h4>小見出し。この記事で言うと、”見出しの種類”に当たる。</h4>
<h5>さらに小さい小見出し。くらげ模様ではときどきしか使わない。</h5>
<h6>もーっと小さい小見出し。くらげ模様では全く使わない。</h6>

見出しの効果

見出しを付けると、各見出しごとに要旨がわかるため読みやすさが段違いに増します。特に文章が長くなる場合には、各章に分けてブロックを作ってあげることで、記事がまとまりやすくなるので、書く方にとっても書きやすくなります。
また、SEO対策にも有効と聞きます。おそらく、グーグルボットさんにとっても見出しがあることで読みやすくなるからでしょう。

見出しの付け方

ブログ記事への見出しの付け方は、HTMLタグを使用します。そのため、普段からウィジウィグエディタ(HTMLが表示されず、書いたものがそのまま表示されるモード)で書いている方はHTMLエディタに変えてください。
FC2ブログでは、編集ツール一番右側の”W”、Jugemでは<HTMLモード>、WordPressではテキストモードです。

見出しを使う上での決まりごと

見出しのH1~H6タグを使う上で、ひとつ決まりごとがあります。それは、H1からH6まで順番に使用するということです。H1を使った後にH3やH4を使うのはダメです。そんな使い方ではグーグルボットさんも困ってしまうし、読む側にとっても混乱してしまいます。使う回数に決まりはありませんが、順番は必ず守って使用してください。

どうやって見出しの文章を付ける?

見出しは、今書こうとしている内容の大まかな説明です。また、「見出しは6種類に分類される」といった具合に内容をさくっと明快に短く切り取ったものや、「見出しは、見る側にとっても書く側にとっても大切」といった具合に、その章の結論でも構わないと思います。

くらげの場合は、その文章の章や節で言いたいことを簡潔な言葉にまとめて付けるようにしています。自分が感じたことをまずそのまま文章にしてみてください。
たとえば、この節では見出しの文章はどのように考えて付けたらいいのかについて説明をしています。それをそのまま簡潔にまとめて見出しにしています。

最初のうちは大見出しだけでも充分です。試しに、今まで書いた記事に大見出しを付けてみてください。H3タグで文章をまとめるだけでも、かなりすっきりまとまった感がするはずです。そのうち、ブログ記事を書くときに見出しを含めた文章が浮かぶようになってきます。
それで慣れてきたら、大見出しだけでは足りない、この章は中見出しも入れたほうがいいかもしれないと感じるようになるはずです。そしたら中見出しを付けてみてください。

見出しの書き方

くらげ模様では、H1をブログタイトル、H2を記事タイトル、H3を記事の大見出し、H4を中見出しで使用しています。

これは記事のタイトルです

この見出しは大見出しで、見出しの文章を<h2></h2>というタグで囲っています。

これは大見出しです。

見出しとは、その記事がどういった内容であるかひと目でわかるようにするために、文章の頭につける標題のことをいいます。この文章の上にあるのは記事の大見出しで、見出しの文章を<h3></h3>というタグで囲っています。

これは中見出し

この文章のすぐ上にあるのはH4という中見出しです。見出しの文章を<h4></h4>というタグで囲っています。

このように、見出しタグを付けています。タグを付けたときは、その見出しの最後にかならず</h3>というように閉じタグを入れてください。そうしないと、その後に続く文章がすべて見出しになってしまいます。

見出しをデザインする

見出しは、テンプレートによってすでにデザインが加えられていたり、ただ文字の大きさを変えるだけの場合もあります。そのまま使っても問題ありませんが、デザインが気に食わなければ自分好みに変えることができます。
デザインするのに必要なのが、CSS(スタイルシート)です。FC2ブログの場合は、”テンプレートの設定”から行います。

以下は、くらげ模様の実例です。H3は端っこのくらげが画像になっています。

h3 {
background: url(http://kuragemoyou.com/wp-content/uploads/Blog-ICON_20140712215129                                           cfa.png)        /*背景は、サーバーに上げたこの画像で*/
no-repeat left center;    /*画像の繰り返しはなし。横位置は左側で縦位置は中央揃え*/
font-size: 18px;             /*フォントサイズは18pxで*/
color: #424242;            /*フォントの色。この英数字がカラーコード*/
margin: 5px auto;          /*外側の余白*/
padding: 10px 0px 3px 50px;       /*内側の余白*/
border-bottom: 2px solid #5FC7ED;       /*下の棒線。2pxの太さで。色指定。*/
}
h4 {
position:relative;                        /*配置上のおまじない*/
padding:4px;                         /*テキストの内側の余白。これが詰まると狭苦しく感じる*/
padding-left:18px;                     /*テキスト左側の余白*/
font-weight: bold;                /*太字*/
font-size: 16px;                   /*文字の大きさ*/
background-color: #8ED4ED;   /*下地の色。*/
color: #fff;                                /*文字の色*/
border-radius:3px;                    /*角丸の大きさ*/
-webkit-border-radius:3px;        /*各ブラウザで表示させるためのおまじない*/
-moz-border-radius:3px;
}
h4:before{                          /*左側の白い縦棒の表示について*/
content:'';                   /*文字列入るよ*/
height:25px;               /*高さは25pxで*/
width:2px;                  /*幅は2pxで*/
display:block;             /*表示形式のおまじない*/
position:absolute;       /*配置上のおまじない*/
top:5px;         /*上5pxで*/
left:4px;                     /*左4pxで*/
background-color:#fff;         /*下地は白で*/
border-left: 4px solid #fff;    /*左側に4pxの大きさで色は白だよ*/
border-radius:3px;               /*角は4pxの大きさで*/
-webkit-border-radius:3px;   /*Firefoxさん、角丸3pxで表示よろしく。*/
-moz-border-radius:3px;      /*Google Chromeさん、角丸3pxで表示よろしく。*/
}

ふだん、HTMLやCSSに馴染みのない方にとっては思い切り暗号です。でも、これはすべて他のサイトで書いてあったコードをそのまま拝借させて頂いたものです。なので、難しいことはまったくしていません。
command+FもしくはContorol+FでH2などの見出しを検索し、その部分を書き換えています。

参考にしたサイト

H3の画像付きの見出しにするのに参考にしたのが、こちら。
ブログが作りたい!|見出しの先頭に背景画像を表示する:CSS小技

H4はこちらのサイトにあったコードを拝借しました。
CSSで作る見出しデザイン | Web’Notes

ネットで、「見出し CSS」や「見出し デザイン」などで検索すると、い〜っぱい出てきます。いろいろなデザインを試してみるのもよいでしょう。
ただし、スタイルシートをいじる場合は、最初にテンプレートを複製しておくのをお忘れなく。一度いじって保存したら元に戻せません。複製の方法がわからなければ、スタイルシートのコードを全てコピーしてメモ帳やテキストエディタに貼り付けておいても大丈夫です。

見出しデザインの色について

タグのデザインで使用する色に関しては、カラーコードのサイトをいろいろ参考にしてみるとよいでしょう。
color:#00afec;の部分の英数字を変えると、色が変わります。

色でよく使うサイト。
HTMLカラーコード
配色の見本帳

締めくくり

見出しに付ける文章を考えるのは慣れです。書いているうちに浮かんでくるようになります。また、デザインをいじるのも最初はわけが分からなくて難しいのですが調べたり動かしているうちに覚えます。
なので、まずは何はともあれやってみてください。

コメントを残す


This site uses Akismet to reduce spam. Learn how your comment data is processed.

goToTop