WordPressの始め方を分かりやすく解説!こちらをクリック

【WordPressの見出し】正しい作り方と、読まれる見出し4つのコツ!

メディアの方向性
  • URLをコピーしました!
この記事をまとめ

WordPressの見出しについて解説!

見出しの正しい知識と、見出しが果たす役割、WordPressで見出しを作る方法を説明します。

また、SEO面やユーザビリティ面で最大限に効果を発揮するための、

上手な見出しを作るコツを4つ、紹介いたします!

サンツォ

「見出し」は記事の背骨みたいな存在!

よめちゃん

「見出し」の出来しだいでその記事の成功は左右されるんだよ!

サンツォ

WordPressを始めるなら正しい「見出し」の作り方はぜひマスターしておいてね!

本記事では次の点について解説いたします。

  • 見出しとは何か? 見出しを作るメリットは?
  • WordPressで見出しを作る手順の解説
  • 効果的な見出しを作る4つのコツ
目次

SEOに強くて、お洒落で、記事制作スピードも速いテーマ!
マクサンでも使っている超おすすめテーマ「SWELL」はこちら!

サンツォ
1976年生まれ。東京都出身。合同会社田舎暮らし代表取締役。複数の業界にて20年近くWebマーケティングの仕事に携わる。2013年より副業でブログを開始。 複数のブログ・SNSを運営した経験を活かし、ブログやアフィリエ イトのノウハウを発信する当ブログを開設。またブロガーのためのオンラインサロン「マクサン」の共同オーナーを務める。フォロワー10万人を抱えるInstagram「ベランダ飯」も運営。借金地獄のどん底からブログ一本で這いあがり、月収300~400万円を稼げるように。2020年2月には累計収益が1億円を突破。著書に『マクサン式Webライティング実践スキル大全』(大和書房)などがある。本名は吉岡 智将
マクリン
いや、俺なんてそんな、どこにでもいるただのマクリンですよ。

副業でガジェットサイト「マクリン」の運営を開始し、2019年12月に副業を株式会社makuriに法人化。2020年4月に合同会社レイテラスを設立し、コワーキングスペース「レイテラス」を開店。撮影スタジオ「レイテラススタジオ」もスタート。ブロガー向けオンラインサロン「マクサン」の共同オーナーをつとめる。

WordPressの見出しとは?

ブログ記事を書いている、ノートパソコンで作業中

まずは「見出し」とは何なのか?について、簡単に説明いたします。

見出しとは話題毎のタイトルである!

「見出し」とは、その話のトピック(話題)毎につけられたタイトルのこと。

通常、WordPressなどのWebサイトのコンテンツ(記事)では、1つのページのなかに複数の話題が存在しますが、

それぞれの話題の冒頭に「見出し」がつけられます。

よめちゃん

このページだと「WordPressの見出しとは?」や
「見出しとは話題毎のタイトルである!」などが見出しだよ。

サンツォ

見出しはその話題の要約であり、要点なんだよね!

見出しには見出しタグ(hタグ)を使う!

WordPressなどのWebサイトでは、「hタグ(見出しタグ)」というHTMLのコードを使って見出しを表示します。

WordPressの見出しタグのコード一覧
▲各見出しタグのHTMLコード

hタグを使ってWordPressに見出しを表示させる方法については、後ほどくわしく解説いたします。

見出しにはh1~h6の6種類がある!

「hタグ(見出しタグ)」にはh1~h6までの6種類があります。

h1 > h2 > h3 > h4 > h5 > h6 という強弱関係があり、h1がもっとも強く、h6がもっとも弱くなります。

WordPressの見出しの種類一覧
▲当サイトにおける、各見出しタグのデザイン

ちなみにWordPressのデザインテーマでは、h1は記事タイトルに使われることが多いので、本文中には使いません。

本文ではh2以降を使ってください。

なぜWordPressに見出しが必要?

ノートパソコンとコーヒーとノート

では、なぜ見出しが必要なのでしょうか?

この章では見出しの果たす役割や、見出しを入れるメリットについて解説いたします。

見出しがあると読みやすい!

すごく単純な理由ですが、見出しがないと読みにくいし、内容が理解しにくいんですよね。

見出しを入れた文章と入れていない文章の比較図

上の図を見ていただいても分かるとおり、

見出しもなにもなくダラダラと書きつづった文章は、読みにくいし内容も伝わりにくいですよね。

話題ごとに話に区切りをつけ小分けにして書くと、

読み手にとっても分かりやすいし内容も把握しやすいのです。

滞在時間や離脱率が改善する!

文章が読みやすくなるということは、ユーザーが記事をしっかりと読んでくれるということです。

つまりユーザーがそのページにいてくれる時間(滞在時間)が長くなったり、

別のページや別のサイトに逃げてしまう率(離脱率)が下がるという効果が期待できます。

結果、SEOにも優利に働く!

ユーザーがそのページに長く滞在したり、別のサイトに離脱しないということは、ユーザーが満足しているということですよね?

ユーザーの満足度が上がれば、結果的に検索エンジンにも評価されるため、SEO面でも有利に働くことになります。

サンツォ

上手な見出しを作ることで集客にも収益にも良い影響があるんだよ!

WordPressで見出しを作る手順

ブログのCSS、デザインのカスタマイズ

この章では、実際にWordPressで見出しを作成する方法を紹介します。

旧エディターでも新エディター(ブロックエディター、Gutenberg)でもやり方は同じです。

ビジュアルエディター/ブロックエディターの場合

まずはビジュアルエディター(旧エディター)、またはブロックエディター(新エディター)での見出しの作り方です。

STEP
見出しにしたいテキストを選択
見出しの作り方、見出しにしたいテキストを選択

WordPressの管理画面から、投稿の編集画面を開き、

見出しにしたいテキスト(またはブロック)を選択します。

STEP
見出しを選択
見出しの作り方、見出しを選択

段落を見出しに変更します。

変更の仕方はご利用中のエディターやテーマによって違います。

STEP
h2~h6を選択
見出しの作り方、h2~h6を選択

見出しタグの種類(h2~h6)を選択します。

STEP
見出しの完成
見出しの作り方、見出しの完成

これでWordPressの見出しが完成しました。

念のため下書き保存し、プレビューで確認してみてください。

テキストエディタ/HTMLの場合

次にテキストエディター、またはHTMLでの見出しの作り方です。

STEP
見出しにしたいテキストをhタグで囲む
見出しの作り方、見出しにしたいテキストをhタグで囲む

通常のテキストは段落タグ<p></p>で囲まれていますが、これを見出しタグ<h2></h2>に変更します。

見出しタグはh2~h6までありますので、状況に応じて最適なものを設定してください。

STEP
見出しの完成
見出しの作り方、見出しの完成

これでWordPressの見出しが設定されます。

念のため下書き保存し、プレビューで確認してみてください。

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

Webサイトのデザイン、レイアウト

WordPressの見出しのデザイン(装飾)を変更したい場合、どうすればいいのでしょうか?

テーマの設定でデザインを変更する方法

もっとも簡単な方法は、ご利用中のデザインテーマの設定を変更する方法です。

CSSなどのコードをいじらずにデザインや色味などの装飾を一括で変更できます。

※テーマによってはデザインを変更できないものもあります。またテーマによって設定方法は異なりますので、各テーマのフォーラムなどでご確認ください。今回は「Swell」の場合で説明します。

STEP
WordPress管理画面
WordPressの見出しのデザイン変更_テーマ設定1

WordPress管理画面の左メニューから「外観」→「カスタマイズ」へと進みます。

STEP
設定画面を開く
WordPressの見出しのデザイン変更_テーマ設定2

「投稿・固定ページ」→「コンテンツのデザイン」へと進む。

STEP
変更する見出しを選択
WordPressの見出しのデザイン変更_テーマ設定3

見出し全体のキーカラーを変更したり、

見出し2~4(h2~4)それぞれのデザインパターンを変更することができます。

STEP
デザインパターンの選択
WordPressの見出しのデザイン変更_テーマ設定4

デザインを変更したい見出しを選び、プルダウンの中から希望のデザインを選択します。

STEP
見出しデザインの変更完了
WordPressの見出しのデザイン変更_テーマ設定5

「公開」のボタンを押下するとデザイン変更が反映されます。

サンツォ

テーマによってはデザインが変更できないものも多いよ。その場合は次に紹介するCSSを使って変更してね!

CSSでデザインを変更する方法

見出しのデザイン(装飾)はCSSで変更することもできます。

難易度はあがりますが、自由自在に見出しデザインをカスタムすることができます。

CSSにくわしくない方は、後述する参考サイトからCSSをコピペすることもできるので、そんなに難しくありません。

ぜひチャレンジしてみましょう。

STEP
WordPress管理画面
WordPressの見出しのデザイン変更_テーマ設定1

WordPress管理画面の左メニューから「外観」→「カスタマイズ」へと進みます。

STEP
追加CSSを開く
WordPressの見出しのデザイン変更_CSS1

「追加CSS」を選択します。

ご利用のテーマによって項目のラインナップが違うことがありますが、流れは同じです。

STEP
CSSを追記する
WordPressの見出しのデザイン変更_CSS2

CSS部分(黄色枠)に見出しコードの記述を追加することで、デザインを変更することができます。

サンツォ

見出しのコードは次に紹介する参考サイトから好きなデザインを選んで
上記の追加CSSのところにコピペすればOK!

STEP
CSSの反映が完了
WordPressの見出しのデザイン変更_CSS3

CSSをコピペしたら、「公開」ボタンを押下します。

これで見出しデザインの変更が完了しました。

(参考)見出しデザインの参考になるサイト

CSSにくわしくない方は、見出しデザイン(装飾)のCSSを紹介しているサイトがあるので、ぜひ参考にしてみてください。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

WordPressの見出しCSS参考サイト1

簡単な装飾から、手の込んだ個性的な装飾まで、WordPressの見出しデザインを68個も紹介している記事です。

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld

WordPressの見出しCSS参考サイト2

シンプルなデザインを中心に、50パターンの見出し装飾が紹介されている記事です。

HTMLとCSSのコピペですぐに実装できる見出しデザイン14選 | UX MILK

WordPressの見出しCSS参考サイト3

個性的で面白いな見出しデザインを14個紹介している記事です。人とは違う装飾にしたい方にはおすすめです。

効果的な見出しを作る4つのコツ

ブログ運営に役立つツール、サイトを紹介

ここまでに説明したように、WordPressの見出しはその記事の背骨ともいえる大切な存在。

上手な見出しを作ることができれば、ユーザーの満足度を向上させるとともに、SEOにも好影響があります。

つまり集客や収益の増加にもつながるということですね。

ここでは見出しのメリットを最大限に発揮する、効果的な見出しを作るコツを紹介します。

見出しだけでも伝わるように!

  • 内容の要点になっている
  • 論理的な話の順序になっている
  • 短くシンプルな言葉にする

見出しのもっとも大切な役割は、ユーザーに話の内容を正しく分かりやすく伝えることです。

そのためには、見出しがその本文の要約&要点になっている必要があります。

また、相手に話の内容を正しく理解してもらうには、話の順序も大切ですよね。

見出しの順序は論理的に破綻のない、わかりやすい順序になっている必要があります。

また、長ったらしい見出しはパッと見でなにが書いてあるのかが頭に入ってきません。

目次などでも改行されて表示されるので見にくいです。

なので見出しは短くシンプルなものにするようにしましょう。

結論を先に!詳細は後に!

  • 読者は早く結論を知りたい
  • 初めから詳細を伝えても読まれない
  • 検索意図に応えてあげる

見出し構成(話の順序)を考えるときは、なるべき結論を先にもってくるようにしましょう。

なぜならネット検索で訪問してくれたユーザーは、私たちが想像する以上にせっかちで、答えを早く知りたがっています。

記事の中身を最初から最後までじっくり読むなんてことは絶対にしてくれません。

だから「結論を先に!詳細は後に!」がWordPressの見出し構成を考える際の鉄則なのです。

結論を先にするということは、ユーザーが検索した目的(検索意図)に素早く応えてあげるということです。

検索意図をかなえる記事は検索エンジンにも評価されやすく、結果的に集客の増加にもつながります。

検索意図については、下記の記事にくわしく解説しています。

言葉の階層をそろえる!

  • 言葉の親子関係に注意する
  • h2~h4くらいまでの入れ子構造にする

初心者が意外とできていないのがこれ。

言葉の階層がそろっておらず、分かりにくい見出し構成になっているパターンです。

WordPressの見出し上手な例と下手な例

上記の例のとおり、言葉の階層がそろってない見出し構成(右の例)は何を言っているか分からないですよね。

よめちゃん

構成要素は同じなのに…

サンツォ

順序を強弱をまちがえると
こうもわかりにくくなるんだね…

見出し構成を考える際は、言葉の親子関係に注意して見出しを作る必要があります。

見出しタグは h2 > h3 > h4 という強弱関係を意識しつつ、入れ子状態の見出し構造にしましょう。

h5以下はあまり使うことはないですし、あまり見出しを増やしても逆に読みにくくなりますので、

なるべくh2~h4までの間で作るようにしましょう。

強弱をつけたデザインにする!

  • 見出しだとわかる強いデザインにする
  • h2 > h3 > h4の強弱をデザインに反映させる
  • デザインの統一感を意識する

見出しのデザイン(装飾)にも気を配る必要があります。

見出しの強弱関係がわかりにくいデザイン、見出しとわかりにくいデザイン、統一感のない見出しデザインではかえって文章を読みにくくしてしまいます。

本文の装飾(強調、太字、色味)よりも弱いデザインだと、それが見出しだとわかりにくくなってしまいます。

見出しは見出しとわかるような、強いデザインにするようにしましょう。

また、h2 > h3 > h4 の順でしっかりと強弱をつけたデザインにしてください。

サイト全体との統一感も大切です。

使っている色数が多かったり、装飾パターンが多すぎると、何が大切なのか?それが見出しなのか?ただの本文装飾なのか?が分からなくなってしまいます。

サイト全体でつかう色味や装飾パターンに統一感をもたせ、ストレスのないデザインを意識しましょう。

WordPressの見出しまとめ

ノートパソコンで床に座って作業

本記事ではWordPressの見出しについて解説しました。

見出しは記事の背骨の役割を果たす、とても大切な存在です。

見出し次第で、その記事の読みやすさは大きく変わってしまいます。

結果的にユーザーの満足度や、検索エンジンの評価にも影響を与えます。

あなたのWordPressサイトの集客・収益は、見出しの作り方にかかっているといっても過言ではありませんね。

ぜひ本記事を参考に、正しい見出しの作り方や、効果的な見出し構成の作り方を学んでいただければ幸いです。

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次