おしゃれな見出しのデザインをWordPressで簡単に作ろう！

WordPressのサイトでアクセス数を上げるには、記事のビジュアルにこだわりたいものです。写真やバナーなどのグラフィック要素はもちろん、テキスト部分の見栄えも重要なポイントです。テキストの見やすさを向上させるには、段落の構成を考える必要があります。その際に、魅力的な見出しを挿入したいと考える人も多いでしょう。この記事では難しいコーディングなしで、簡単に見出しを挿入する方法と、見出しの挿入に使えるおすすめのプラグインを紹介していきます。

見出しとは

複雑な内容や密度の高い情報を伝えるための文章は長くなりがちです。正確に伝えようとするほど、説明は長くなります。その半面、文章が長くなるほど、ユーザーにとっては抵抗感が大きくなっていくのです。とくに、ウェブサイトでは、長文でスクロールが長くなるとサイトから離脱する原因にもなります。書籍などの紙メディアでも同じですが、ある程度の長さのある文章を読みやすくするにはコツがあります。それは、適当なボリュームに分割するという方法です。ユーザーの心理的な抵抗が少なくなるような分量に分割しておき、それぞれがコンパクトで読みやすいまとまりであると感じさせることが重要です。

その際に、単に分割するだけではなく、内容を簡潔に要約した文を付けておくと、読みやすくなります。いわば、読みやすく分割されたまとまりにつけられたタイトルです。このようなまとまりを「段落」と呼び、タイトルとなる文が「見出し」です。見出しがあると、その段落の内容の概略が一目瞭然になり、また、見出しだけを呼んでいくことでも、文章の全体像が把握できるようになる効果があります。すぐれた内容が書かれたウェブページであっても、読んでもらえなければ、ページが存在しないのと同じです。段落や見出しには十分に配慮する必要があります。

見出しを挿入するメリット

WordPressで作成されたウェブページに見出しを挿入するメリットには、以下のようなものが挙げられます。1つ目は、長文記事の場合に、記事全体にメリハリをもたせることができる点です。見出しはフォントや文字サイズを変えたり、文字色や背景色をコントロールすることができるため、長文をリズミカルな構成で表現できます。2つ目は、情報が階層化されるため、記事の重要度が伝えやすくなる点です。紙メディアでは、伝統的に「部・章・節・項・目」などに分けて見出しが付けられています。同じようにウェブページでも見出しの表現でどの階層に属しているかわかるようにしましょう。文章全体のなかでの重要度が明確になり、ユーザーの理解が深まる効果があります。

3つ目は、SEO対策として有効な点です。HTMLでは見出し用のタグが用意されていますが、このタグは検索エンジンのための情報を収集する「クローラー」も読み取っています。タグ付けによって情報が階層化されていると、サーチエンジンで検索結果を表示する際に上位に表示される可能性があり、アクセスを集めやすくなるのです。4つ目は、アクセシビリティが向上する点です。ウェブページに掲載された情報へのアクセスのしやすさを「アクセシビリティ」と呼びますが、見出しを設定しておくとアクセシビリティは格段に向上します。

見出し周辺のレイアウトは短い文が改行されて表示されるため、文の周囲に適当な間隔でスペースを作ることができます。このため、見出しはスッキリしたレイアウトのためには効果の大きい必須の要素といえるのです。また、長文であっても短いブロックに分割しておけば、長文を読むのが苦手なユーザーのストレス軽減効果もあるため、ユーザー層の拡大にも寄与する可能性があります。

見出しの挿入方法

ウェブページを作成する際の基本的な言語であるHTML（エイチ・ティー・エム・エル）には、見出しに関して便利な機能が実装されています。それは「見出しタグ」と呼ばれるものです。ウェブページに表示したい文章が長文の場合、読みやすさを考慮して段落に分けます。HTMLで段落の区切りに使うタグは「pタグ（ピータグ）」で

<p>段落の内容</p>

のように記述します。つまり、pタグの間に文章をはさみこむわけです。

なお、pとは英語のparagraph（段落）の略称です。見出しは、この段落の前に「hタグ（エイチタグ）」で囲まれた見出し表示用のコードを挿入します。hはheading（見出し）の略です。紙メディアの場合には、部・章・節・項・目などの順番で細かいまとまりになりますが、ウェブページでも同じように「h1」から「h6」までのタグが用意されています。hタグは数字が大きいものほど、下位の階層表示に使います。

たとえば、h1タグは最も強調されるため、タイトルや部や章などの大見出しに用います。h6タグを使えば、項や目など小見出しとして強調できるのです。なお、hタグもpタグと同じように、

<h1>見出しの内容</h1>

のようにテキストをはさみこんで使います。

見出しを簡単にデザインする方法

見出しはHTMLのコードを記述することでウェブページ上で強調表示が可能になりますが、WordPressでは見出し挿入用のプラグインが公開されています。プラグインを使用すると、プロ顔負けのおしゃれなデザインの見出しを、コードを書く必要なく簡単に挿入することができるのです。以下で、おすすめのプラグインを3つ紹介します。

1つ目は、AddQuicktagです。このプラグインを使うと、タグボタンを自分がよく使うタグにカスタマイズできます。WordPressの投稿ページの編集画面では、2つの編集モードが利用できます。
一般的なテキストエディタスタイルで入力する「ビジュアル」モードと、コードで入力する「テキスト」モードです。テキストモードでは入力エリアの上に、HTMLのタグの入力を簡単にするためのタグボタンが並んでいます。AddQuicktagを使うと、ここに自分の好きなタグを入力できるボタンを追加できるのです。

2つ目は、Simple Custom CSSです。WordPressのテーマを直接編集せずにCSSをカスタマイズできるプラグインです。WordPressでは、画面のレイアウトについてテンプレートが用意されており、それを「テーマ」と呼んでいます。同じコンテンツでテーマを自由に差し替えできることがWordPressの特徴のひとつなのです。さらに、そのテーマのカスタマイズも自由なのですが、通常はphpなどのコーディングの知識が必要になります。Simple Custom CSSを使うと、テーマのコードを編集しないので、アップデートしてもCSSの編集部分が上書きされない利点があります。

3つ目は、Table of Contents Plusです。これは、h1~h6までのhタグに応じて記事の目次を自動生成してくれます。目次とは、各段落の見出しをまとめて一覧表示にしたものです。Table of Contents Plusで生成した目次は、サイドやボトムエリアに目次として表示できます。

見出しを挿入するうえでの注意点

長文コンテンツを持つウェブページでは、見出しは必須アイテムです。ただし、乱用するとかえってページ全体がバラバラな印象を与えることがあります。見出しを挿入するうえで、以下の2つの注意点を意識するとよいでしょう。

1つ目は、サイトデザインの統一感を損なわないような見出しのデザインを考えることです。複数のウェブページで構成されるウェブサイトでは、テーマカラーを使ったデザインが一般的に行われています。サイト全体の統一感を感じさせるために、コンテンツのイメージに合った共通の色やトーンを各ページのデザインに用いるのです。ページの中で見出しは最も目を引く要素のひとつなので、テーマカラーを活かしたデザインにしましょう。

2つ目は、わかりやすいからといって、見出しを使いすぎないことです。文章は段落ごとに主張すべき内容を含んでいるので、見出しの作成が可能です。だからといって、すべての段落に見出しをつけてしまうと、かえって全体像がわかりにくくなることがあります。読みやすい分量に段落分けしたとしても、いくつかの段落をまとめて、1つの見出しを考えることも検しましょう。

見出しの挿入・デザインをするためには

WordPressで見出しを挿入したり、デザインを考えるにはElementorというプラグインがおすすめです。見出しを細かくデザインしようとすると、普通はHTMLやCSSの知識が必須です。ところが、Elementorを使えば、コーディングの知識や経験は不要になります。たとえば、トップページや個別記事のカスタマイズが「ドラッグ＆ドロップ操作」で簡単に編集できるようになるのです。

具体的な操作は、まず「プラグインを追加」で「Elementor Page Builder」をインストールして有効化します。管理画面で新規に固定ページなどを追加すると編集画面になり、そこに「Elementorで編集」ボタンが表示されます。これを押すと、Elementorで編集する画面に移るのです。編集画面は2つのエリアに別れていて、左側のコラムには「編集要素」と呼ばれるボックスが並んでいます。この中に、コラム、画像、動画や今回の記事のテーマになっている見出しが用意されているのです。そして、右側にはページの表示イメージがあります。

ページの作成は、左側のコラムにあるボックスを、右側のページの「ウィジェットをここにドラッグ」と書いてあるエリアにドラッグ＆ドロップする操作を繰り返します。こうして、ページの上から必要な要素を落とし込んでいきます。順番の変更もドラッグ＆ドロップでできるので、とにかく要素を入れ込んでみて、あとで取捨選択すればよいでしょう。直感的な操作性が抜群に優れたプラグインといえます。

Elementor以外で挿入された部分を変更したいとき

Elementor以外で挿入された部分を変更したいときには、より細かい操作が可能なVisual CSS Style Editorを使ってみましょう。Elementor同様に、コードを書かずにCSSを編集できます。インストールするには、まず「プラグインを追加」で「Visual CSS Style Editor」を選んで有効化します。インストール済みプラグインのリストや管理画面の左コラムには「YellowPencil」と表示される点に注意しましょう。具体的な編集作業は「外観」をクリックすると表示される「YellowPecil Editor」を使います。

このエディターを起動すると、編集したいページを選ぶ画面が表示されます。このとき「編集タイプ」として、そのページだけを編集するか、テンプレートを作成するか、サイト全体に適用するかが選べるのです。編集タイプを選んだら、具体的に編集するページをプルダウンメニューから選択します。ここに表示されるファイルのリストには、WordPressの管理画面から編集可能な固定ページや投稿ページだけではなく、ログインページなども含まれます。

たとえば、パスワードを設定しているサイトであれば、まずログインページが表示されるのですが、デフォルトではWordPressのアイコンが使われています。これを会社のロゴマーク等に簡単に変更できるのです。Visual CSS Style Editorでは、phpなどのコーディングの知識がないと難しい操作を感覚的にできる点が最大の特徴です。とくにWordPress初心者には扱いやすいプラグインといえます。

まとめ

ユーザーに有益な情報を持つサイトでは、どうしても長い文章を掲載する必要が出てきます。その際には、適切な見出しを記事内に挿入することでユーザビリティを向上させることができるのです。さらに、見出しがあるとウェブサイトの情報を検索エンジンに反映させるプログラムであるクローラーが情報を収集しやすくなり、SEO対策としての効果も期待できます。通常、見出しの挿入にはHTMLやphpなどのコーディングの知識が要求されることが多いのですが、プラグインを使えば簡単に見出しの編集が可能になります。

実際、WordPressの編集プラグインにはさまざまなものがあります。直感的な操作性という点からは、見出しの編集についてはElementorがおすすめです。また、Elementor以外の部分も含めたトータルな編集やデザインにはVisual CSS Style Editorが便利です。