見出しはWebサイトにとって重要な情報を検索エンジンやユーザーに教えるための重要な役割を果たす項目です。
今回はそんな見出しのデザイン方法を何パターンかご紹介します。また、SEO対策における見出しの効果についてお話したいと思います。
SEO対策についてはSEO集客の1つ、コンテンツSEOについてのまとめとSEO対策！最適なタイトル文字数と書き方をわかり易く解説をご覧ください。
見出しにこだわって魅力的で検索されやすいページにしましょう。
目次
ワードプレスでの見出しとは
WordPressの投稿画面のテキスト入力モードを「ビジュアル」にした際に左側に表示される「段落」がhタグになります。
見出し１がH1、見出し2がH2です。この機能を使えば、HTMLのコードが分からない方でも簡単に見出しを作成することができます。
ショートカットキーも用意されているので、こちらを活用することでプルダウンメニューを開く必要なくスピーディーに見出しの入力ができるようになります。
見出しをHTMLタグで書くと
<h1><h2><h3><h4><h5><h6>のタグにあたります。
記事のタイトル、大見出し、小見出しのようにHTMLのｈタグを使ってテキストを囲むことで認識させます。
H1タグは主に記事のタイトルに用いられ、検索エンジンはH1タグで囲まれたテキストを最重要項目として認識します。
よく「ブログ記事はタイトルが重要」と言われる理由の１つです。H2タグは記事の中の大見出し、その記事のテーマなどに使用されます。
H2タグに関連した情報をH3タグで囲むことで情報に優先順位を付けることができ読みやすい記事になります。
読者にとっても見出しを読んで全体のことを把握できるようなテキストを選択できれば、とっても読みやすいものになります。
見出しは重要？
記事を作成するにあたって、見出しを入れることは極めて重要です。
例えば、記事のタイトル（H1タグ）が「WordPressの始め方」だとします。そして、小見出し（H2タグ）に「レンタルサーバー契約」「ドメイン取得」「WordPressインストール」が入って、更にH3タグで「レンタルサーバー契約」の下に「プラン解説」などが入ってきます。
この見出しの分別によって、検索エンジンに「この記事はWordPressの始め方についての記事なんだ」ということが分かります。
検索エンジンに明確に記事が理解されていれば（明確なコンテンツが書けていれば）ユーザーが検索した時に、より表示されやすくなります。
見出しを入れずに記事を作成するということは、どんなに改行をして空白設けて文章を読みやすくしたとしても、検索エンジン側には「何が重要なのか」「何を言いたい記事なのか」ということが認識されにくくなってしまいます。
１つ注意点を上げておくと、ごく稀に「見出しのような装飾」をしている記事を見かけますが、これは見出しではないため、SEO的な優位性は生まれません。
しっかりと大切な部分をHタグで囲むことで、記事としての重要なポイントを伝えることができます。
見出しによるSEO対策
SEOの観点からみてみると、記事にアクセスを集める上で見出しを入れるということはもはや必須項目になります。
10年前のブログなどではそこまで重要視されていませんでしたが、昨今ではライバルになるブログサイトは少なからず存在するはずです。
上質な記事を書くことは大前提ですが、いくらテキストが良くても、それを検索エンジンが評価してくれなければ意味がありません。分かりやすい見出しを入れて、テーマそった明確な文章を書くことでユーザーにも確実に評価されます。
記事を気に入ってくれるユーザーが増えれば、結果としてアクセス数もアップしてAdSenseなどを活用している方は収益が増えます。
同じ記事でも、見出しを入れるのと入れないのでは結果が全く変わってくることを覚えておきましょう。
SEO対策をもっと知りたい方は「SEO集客の1つ、コンテンツSEOについてのまとめ」、「SEO対策！最適なタイトル文字数と書き方をわかり易く解説」、「ワードプレスSEO対策済のテンプレートテーマ20選」をご覧ください。
見出しをデザインするプラグイン
WordPressのデフォルトの状態では、見出しのデザインがとてもシンプル、というか簡素です。
Hタグの数値に準じて文字のサイズが変わるだけですので、そのまま使うと、例えば、記事の中である文章の文字サイズを大きくみせたり、ある文章の背景の色を変えるようなデザインのコンテンツを作成したとします。
この時、見出しに統一感のあるデザインがない場合、ユーザーの中には「どこで一段落が終わっているのか？」と感じる方も出てくるでしょう。
そこで、ここではWordPressの便利なプラグイン機能を活用してHTMLの知識がない方にも簡単に見出しのデザインを変更できる方法を紹介します。
AddQuicktagと追加CSS
AddQuicktag：https://ja.wordpress.org/plugins/addquicktag/
オリジナルのタグを簡単に作成できる便利なプラグイン「AddQuicktag」
このプラグインとワードプレスの「追加CSS」機能を活用することによって、見出しのデザインをおしゃれにすることができます。
それでは、設定していきましょう。
AddQuicktagをインストールして有効化したら「設定」→「AddQuicktag」とクリックして設定画面に移ります。
タグ入力する画面が表示されますので、下記のコードをその下の画像の箇所に入力します。
h2 <h2 id="danraku2"> </h2> h3 <h3 id="danraku3"> </h3> h4 <h4 id="danraku4"> </h4>
1度に1個のタグのみ登録できるのでh2タグを登録したら左下の「変更を保存」をクリックしてh3タグを同じ手順で入力します。
ちなみにH1タグは基本的に記事タイトルに使われますので、デザインをする必要は無いため、入力しませんでした。
全ての登録が完了したら「変更を保存」をクリックして設定は完了です。
次に「外観」→「カスタマイズ」の順にクリックしていきます。
テーマのカスタマイズ画面が表示されるので「追加CSS」をクリックしてCSSの入力画面を表示します。
追加CSSには下記コードを下の画像の箇所に入力します。
h2#danraku2{
}
h3#danraku3{
}
h4#danraku4{
}
各{}の中に見出しのデザインとなるコードを入力していきます。
初心者の方は「見出しジェネレータ」で作成したコードをコピーして使うと楽かと思います。
このように{}の中にコードを入力します。
コードの入力が完了したら「保存して公開」をクリックして作業は完了です。
これでタグを使うことができるようになります。
記事作成画面に進むと「Quicktags」という項目が追加されているのが分かります。
見出しに使いたいテキストをハイライトして「Quicktags」からタグを選択します。
これで装飾された見出しを入れることができました。
左がAddQuicktagで作成した見出し、右がデフォルトの見出しです。
見出しの下に赤いラインを引いて分かりやすい形になりました。
見出しを作成する便利ツール
見出しジェネレータ
http://web-dou.com/tool/css_gen_h.php
自分の好みの見出しを簡単に作成することができる便利なサイトです。
画面を下にスクロールすると見出しのカスタマイズ画面が表示されています。
こちらで見出しを作っていきます。はじめはイメージがわかない方も多いと思いますので、適当に設定してみて「ジェネレート」をクリックしてみましょう。
「ジェネレート」をクリックすると設定した見出しのプレビューとCSSのコードが表示されます。
このコードをコピーして「追加CSS」に貼り付けます。
コピーしたCSSを貼り付ける際の注意点が1つあります。
見出しジェネレータでは「.sample2」というクラス名がついています。
この名前を「h2#danraku2」に変更する必要があります。画像の赤枠のように「.sample」だった場所を全て「h2#danraku2」に変更します。
クラス名を変更することで見出しのデザインは正常に変更されました。追加CSSに記述する際はこちらの点に気をつけましょう。
見出しデザインのサンプルコード
http://www.keni-customize.net/custom-midashi-design-555/
上記のサンプルコードをCSSに追加で記述すれば、ワードプレスのデフォルトの「段落」機能を使うだけで、装飾された見出しが反映されます。
この方法ではプラグインを使う必要がないので、サイトに少しでも負荷をかけたくないと思う方にはおすすめの設定方法です。
上記サイトでは、見出しのテンプレートが沢山、アップされています。こちらから気に入ったデザインの見出しのCSSコードをコピーしましょう。
CSSコードは、このように全てコピーして構いません。
コピーしたCSSコードは、ワードプレス管理画面から「外観」→「カスタマイズ」→「追加CSS」の順で進み、「追加CSS」に貼り付けます。
ここで注意点。コピーしてきたCSSコードに注目すると分かると思いますが、こちらは全て「h3」タグで設定されています。
もしも「h2」タグでデザインを使用したい場合は「h3」となっている部分を全て「h2」に書き換えてください。
全ての書き換えが終わったら作業は完了です。
最後にプレビューを確認して、変更が反映されていたら「保存を変更」をクリックして完了です。
下の画像を見ると見出しが装飾されていることが分かります。
全ての見出しで同じデザインを採用するよりも、見出しごとにデザインを変更した方が「このデザインは小見出しだな」とユーザーが認識しやすいので、おすすめです。
見出しに吹き出し（矢印）を付けるプラグイン
CSS ARROW PLEASE
http://www.cssarrowplease.com/
とっても簡単に吹き出しが作れる便利なジェネレータです。
それでは各部分を細かく見てみましょう。
こちらはプレビュー画面です。下の設定画面を何かしら変更すると瞬時にこちらのプレビューされます。
こちらが設定メニューの画面です。
赤枠「Position」では、吹き出しの矢印の方向を指定します。
上から順に上、右、下、左となっています。
青枠は上から、矢印の大きさを指定する「Size」、吹き出しの背景色を指定する「Color」吹き出しの枠の太さを指定する「Border width」吹き出しの枠の色を指定する「Border color」となっています。
「Size」と「Border width」は数値を入力してEnterを押せば変更がプレビューに反映されます。
画面の右側にあるのはCSSコードです。こちらのコードをコピーしてワードプレスに貼り付けます。
こちら例としてカスタマイズした吹き出しです。右側のCSSコードを全てコピーします。
ワードプレス管理画面より「外観」→「カスタマイズ」→「追加CSS」と進んで「追加CSS」の中に先ほどコピーしたコードを貼り付けます。
これで使用準備は完了です。
ワードプレス投稿画面です。
ここで注意点。記事中に吹き出しデザインを挿入するには
<div class=”arrow_box”>テキスト</div>
のタグを入力する必要があります。このタグ内の「テキスト」の部分に文章を入力すると下記のように表示されます。
でも毎回タグを入力するのはストレスと感じる人は多いですよね。
そんな時は今回紹介した便利なプラグイン「AddQuicktag」の出番です。
管理画面より「設定」→「AddQuicktag」をクリックしてプラグインの設定画面を表示します。
下の画面のように入力します。
「吹き出し」の所は分かりやすい名前なら何でも構いません。
青枠上段には「<div class=”arrow_box”>」を入力して下段には「</div>」を入力してください。緑枠は一番右のチェックをクリックすることで全てにチェックされます。最後に「変更を保存」をクリックして設定は完了です。
投稿画面を開いて、今度はビジュアルエディタの画面にします。
通常通りテキストを入力したら、吹き出しに入れたいテキストをハイライトして「Quicktags」をクリックします。
すると先ほどプラグインの設定画面で登録した「吹き出し」タグが表示されますので選択します。
プレビューを見てみると、しっかりと反映されていることが確認できました。
これで設定完了です。次回からはタグを簡単に呼び出せるのでストレスなく作業することができます。
ここまでで、プラグインやツールを使っての見出しの設定方法を解説してきましたが、CSSの書き方をちょっと知っておく程度で見出しの変更くらいであれば実現できます。これを機会にちょっと覚えてみようかな、という方には下記の書籍がおすすめです。
著者：WINGSプロジェクト、宮本 麻矢
出版社：技術評論社
発売日：2017/6/15
インターネットでWebデザインを勉強したい方はWebデザインが独学できるサイト10選をご参照ください。
CSSを追加するときの注意点
見出しの編集などでCSSに変更を加える際はWordPressのバックアップを必ず取っておきましょう。
追加CSS内に記述する場合でも、今後、追加CSSの記述が増えてくる可能性もありますので、バックアップを取る癖をつけておくようにしましょう。
万が一、不具合が起きた時に対応できるようにしておくことはwebサイトの運営者として当然のことです。
CSSのバックアップの仕方が分からないと不安な方は単純に変更を加える前のCSSコードを全てコピーして保存しておくだけで大丈夫です。
その際は「どのバックアップが一番最新なのか」分かるように日付などをファイル名につけておくと良いでしょう。
見出しプラグイン＆ツールのまとめ
記事に見出しを入れることは、SEOの観点でもユーザーからの観点でも重要なことであると解説しました。
見出しを装飾することはSEOを的には直接関係はありませんが、読者の立場になって考えると、大切な工夫であることがわかると思います。
ブログを運営していく上で他の人のブログサイトの記事で、見出しのセンスが良いものがあると思わず目が止まります。
それだけ見出しは重要な要素ということですね。是非、あなたのブログにあった最適なデザインの見出しを見つけてみてください。