WordPressの見出し設定！ 正しいルールやデザインの変更方法
wpinori3745
この記事を読むと分かること！
- SEOを意識した見出しを設置する為のルール
- WordPressの見出しブロックの使い方
- WordPressでの見出しデザインの変更方法
- 一部の見出しだけを変更する方法
「見出しはどのようなルールで、どうやって設定するの？」
「WordPressサイトの見出しデザインをオシャレにしたい」
「見出しデザインの色を変えたい」
この記事を見ていただいてるということは 現在、こういった悩みを抱えていませんか？
見出しは読み手の興味を引き付けるためにとても重要ですので、ぜひこだわってください！
この記事ではWordPressの見出しデザインを変更する方法を紹介しますので、参考にしてください。
初心者でも簡単に実践できる見出しの変更方法を紹介しています！見出しは目立つだけでなく、サイトのイメージに合うデザインにするよう心がけましょう。
SEOを意識した見出しを設置する為のルール
見出しタグを使用する順番を守る
- h1はページに1回だけ使用する
- h2 → h3 → h4…と、大きい見出し→小さい見出しの順で使用する。
WordPressではページタイトル（固定ページのタイトル、投稿ページのタイトル）がh1として設定されますので、作成するページに使用できるのはh2～h6になります。
見出しを使用する時は順番を守り、例えばh2→h4の順番で使用せず、h2→h3→h4の順番で仕様しましょう。
SEO対策
h1には必ず狙いたいキーワードを含めましょう。また、検索エンジンとユーザーが混乱しないよう、必ず使用する順番を守りましょう。
見出しの内容はシンプルに、ユーザーが読みやすい構成にする
- 目次のような構成を意識する
- 見出しを読めば、記事の内容が伝わる見出しを作る
見出しの内容はシンプルに、見出しを読めば記事の内容が伝わり、ユーザーが自分の読みたい個所を直ぐに見つけられるような内容にしましょう。特に、スクロールしながら流し読みするユーザー にとって、見出しにキーワードがあると理解しやすくなります。
SEO対策
ユーザーが読みたい記事を見つけすくすることで、読みたい記事を見つけたユーザーがサイトに留まり、滞在時間が長くなります。その結果、「ユーザーにとって良いサイト」と判断されSEO対策となります。
見出しの中にキーワードを自然に盛り込む
- 検索されやすいキーワードを入れる
- キーワードを無理に詰め込み過ぎない
Googleなどの検索エンジンは見出しを重要な要素として評価 します。
見出しにキーワードを入れることで、「このページは○○について書かれている」と検索エンジンに伝わり、関連する検索結果に表示されやすくなります。ただし、不自然に詰め込みすぎると逆効果（読みづらい・検索エンジンに低評価を受ける）なので、自然な形でキーワードを入れること が大切です！
SEO対策
キーワードリサーチをして、検索されやすい単語を盛り込むのが重要！
見出しにユーザーが検索しそうなキーワード を入れることで、多くのユーザーが検索するため、検索結果に表示されやすくなります。
見出しのデザインを統一する
- フォントや大きさ、色を統一する
- 強調したい部分は太字や色を使い、読みやすいデザインにする
- サイトのイメージにあったデザインにする
見出しデザインを統一することで、読みやすく、ユーザーがサイト内で迷子にならないようにします。また、サイト全体の統一感を出し、信頼性を高めることができるためです。
SEO対策
検索エンジンだけでなく、ユーザーが読みやすくなることもSEO対策の一部 です。
ユーザーの興味を引き付けることで滞在時間が長くなり、「ユーザーにとって良いサイト」と評価されるためです。
WordPressで見出しデザインを設定する手順
WordPressで見出しを設定する時は「見出しブロック」を使用します。
今回はテーマ「Lightning」を使用して説明しますが、「見出しブロック」の追加や、見出しの種類の指定方法はどのテーマでもほとんど同じですので、他のテーマをご使用の人も参考になると思います。ただし、デザインの指定（見出しの色や、大きさ、太さの指定など）はテーマによって若干違います。
見出しのブロックを追加する
①「＋」マークをクリックすると、小窓が開くので②検索欄に”見出し"と入力する。下に見出しブロックが表示されるので③「見出し」をクリックする。
①「H2」マークをクリックし、②見出しの種類を選択する。
①見出しの内容を入力したら設定が完了。
見出しをデザインする
見出しのスタイルを指定する
画面右の①「スタイル」から好きなスタイルをクリックする。
※選択できるスタイルはテーマによって異なります。
見出しの色を指定する
画面右の①「色」から「テキスト」をクリックし、下図の②をクリックする。
③色ボードをクリックして色を選択する、又は色コードを直接入力する。
見出しの色を一部だけ変更する
①見出しの文字色を変更したい個所を選択し、②∇をクリックする。
③「ハイライト」を選択する。
④色を指定する。
見出しの大きさを指定する 方法１
画面右の①「サイズ」のS、M、L、XLのいずれかをクリックし、フォントサイズを指定する。
見出しの大きさを指定する 方法２
画面右の下図①のマークをクリックし、②フォントサイズを入力する。
見出しの大きさを一部だけ変更する
①見出しの文字の大きさを変更したい個所を選択し、②∇をクリックする。
③「インライン文字サイズ」を選択する。
④文字サイズを指定し、⑤「適用」をクリックする。
見出しの太さを指定する
画面右の①「タイポグラフィ」をクリックし、②「外観」を選択する。
外観の③「デフォルト」横の∇をクリックして、④太さを選択する。
見出しの文字間隔を指定する
画面右の①「タイポグラフィ」をクリックし、②「文字間隔」を選択する。
③「文字間隔」を指定する。
WordPressで見出しデザインを変更する２つの方法
WordPressの管理画面で見出しを変更する
管理画面の中に見出しのデザインを設定する項目があるテーマについては、管理画面で簡単に見出しデザインを変更することができます。ご使用のテーマの管理画面を確認し、見出しを変更する項目がある場合は、管理画面で見出しを変更してください。
本記事では人気テーマのSWELL、Cocoon、Lightningについて紹介します。
SWELL
SWELLの見出しデザインは管理画面の「投稿・固定ページ」＞「コンテンツのデザイン」の「見出しのデザイン設定」で変更できます。
画像引用：SWELL公式サイト
変更できる見出しは見出し2～4で、それぞれ自由に選択することができます。色は見出し２～4で同一になります。詳細はSWELL公式サイトを参照してください。
Cocoon
Cocoonには管理画面に見出しを設定するための項目がありません。ですのでCocoonで見出しを変更したい場合は、後述の「CSSで見出しを変更する」を参照してください。
Lightning
Lightning無料版には管理画面に見出しを設定するための項目がありません。ですのでLightning無料版で見出しを変更したい場合は、後述の「CSSで見出しを変更する」を参照してください。
Lightning有料版の見出しデザインは管理画面の「外観」>「カスタマイズ」>「Lightning デザイン設定」画面で指定が可能です。
画像引用：Lightning公式サイト
Lightning有料版は見出し1～6に加えて、サブセクションやフッターのフッターの見出しについても指定をすることが可能です。また、デザインの種類も20種類以上ととても豊富です。詳細はLightning公式サイトを参照してください。
CSSで見出しを変更する
CSSの知識がある人や、テーマが用意したデザイン以外の見出しデザインに変更したい場合はCSSで変更することが可能です。WordPressでCSSを記述する方法は2つ（テーマエディタ、追加CSS）あり、どちらかにCSSを書くことで見出しデザインを変更できます。
今回は例として、Lightning無料版の「追加CSS」にCSSコードを書いて見出しデザインを変更する方法をご紹介しますが、SWELLなど、他のテーマでもブロックエディタを使用していれば同じ方法で変更できます。
Step1 変更したい見出しのCSS情報を確認する
画面上で右クリックし、表示されたメニューから①「検証」を選択する。
②
をクリックした後、③フォント変更したい見出しをクリックすると、④クリックした要素のHTMLコードの背景が青くなり、⑤現状のCSS情報が表示されるので、コピーする。
Step2 「追加CSS」にCSSコードを記述する
管理画面の①「外観」＞②「カスタマイズ」＞③「追加CSS」を選択する。
④コピーしたコードを貼り付け、変えたい個所を変更して、⑤「公開」をクリックする。
上の線がオレンジになり、下の線が消えました！
参考情報
borderの指定方法
見出し要素 ｛
線の場所： 線の太さ 線の種類 色コード;
}
＜線の場所＞
border:上下左右の全ての線
border-top: 上の線 border-bottom:下の線 border-left:左の線 border-tight:右の線
＜線の太さ＞
数字が大きくなるほど太くなる
＜線の種類＞
solid:１本線 double：２重線 dashed:破線 dotted:点線
※線を消したい時
例）上の線を消す border-top: none;
例）上下左右の全ての線を消す border: none;
WordPressで1部の見出しだけデザインを変更する方法
ここまで紹介した見出しデザインの変更方法は、h2全て、h3全てなど、対象の見出し全てを変更する方法になります。
ここでは一部の見出しだけを違うデザインに変更する方法を紹介しますので、ポイント的に違うデザインにしたい時などに試してみてください。
今回はLightning無料版を使用してご紹介しますが、SWELLなど、他のテーマでもブロックエディタを使用していれば同じ方法で変更できます。
Step1 変更したい要素にクラス名をつける
ブロックエディタを開いて①変更したい見出しをクリックして選択し、画面右側のサイドバーで、②「ブロック」＞③「⚙マーク」＞④「高度な設定」をクリックする。
⑤「追加CSSクラス」にクラス名を入力し、⑥「保存」をクリックしたらクラス名の付与は完了。
参考情報
クラス名をつける時のルール
使える文字
- 半角の英数字、ハイフン（ – ）アンダーバー（ _ ）
命名のルール
- 頭文字はアルファベット（数字や記号はNG）
- アルファベットは大文字と小文字が区別される
Step2 CSSを記述して見出しデザインを変更する
WordPressにはCSSを記述できる箇所が2か所（テーマエディタ、追加CSS）ありますが、今回は「追加CSS」に記述する手順で説明します。
管理画面の①「外観」＞②「カスタマイズ」＞③「追加CSS」を選択する。
④クラス名とコードを記述し、⑤「公開」をクリックして完了。
まとめ
WordPressで見出しデザインを変更する主な方法は「管理画面で変更」「CSSで変更」の2つです。
また、一部の見出しだけデザインを変更したい場合はCSSで変更します。
Webサイト制作の初心者は、まずは管理画面でデザインが変更ができないか、確認してください。管理画面では変更できなかったり、管理画面でのデザイン変更では満足できない場合は、CSSを使用して見出しを変更してください。
見出しを変更するだけでサイトのイメージはガラリと変わりますので、閲覧者の興味を引きつける手段の１つとして試してみませんか？
