[WordPress]Diver入力補助「見出し」の使い方[Gutenberg]編

ばにら営業部長

こんにちは、今回は見出しについて解説するよ

この記事はWordPress初心者の方がテーマを選ぶ際の参考になるようにWordPressテーマDIVERについて解説しています。

Diverにはいろんな入力補助機能があり今回はその中の「見出し」についてレビューします。

この記事はブロックエディターGutenbergによるレビューです。

旧エディターの解説ではないため旧エディターを使っている方は若干使用が異なります。

Diver入力補助「見出し」の種類と使い方

見出しとは？

「見出し」とは上の[Diver入力補助「見出し」の使い方]と記載された部分になります。

見出しがあることにより記事の中で何について書かれているのかを一目でわかりやすくしています。

SEOでも見出しは重要で順番通りに使うことできちんと評価されます。

初心者の場合は通常順番通り使うと思いますが見た目で判断してH2からではなくH3の後にH2が来たりする人も入るようです。

記事の見出しH2の中に小見出しとしてH3の見出しがくれば問題ありません。

次の内容ではまた見出しのH2が来て小見出しとしてH3がくれば問題ありません。

見出しには大きさの種類があります。種類については次の見出しで解説しています。

ばにら営業部長

見出しは一目見ればすぐにわかるよね。

見出しの種類

WordPressでは見出しの大きさの種類があります。

大きさの違いはH1からH6まで6段階あり通常はH2を使う事が多くH2の見出しの中で見出しを使う場合にH3などを使います。

見出しのH1についてはタイトルがH1になるため文中では使うことはありません。

ほとんどのテーマがH1についてはタイトルに使われているため通常の見出しではH2からになります。

このコンテンツでも[Diver入力補助「見出し」の使い方]の部分はH2という見出しタグで表示しています。

その下の「見出しとは？」の部分はH3という見出しタグになっています。

一目でわかりますが大きさが違います。

見出しタグは順番に使うことによりコンテンツ内を移動しやすくなります。

これはGoogle公式にも記載された検索エンジン最適化「SEO」のため重要な項目でもあります。

見出しがバラバラであればSEOの検索順位の評価も下がるため順番通り使う必要があります。

ばにら営業部長

見出しは順序立てて使うことでSEOに需要な役割を果たしているんだね

見出しの使い方

上の見出しはH3タグを使っています。上から順にH2、H3と使い使っています。

この記事のタイトル部分はH1タグで記載されています。

イメージは「大見出し＝H1」「中見出し＝H2」「小見出し＝H3」といった感じです。

ここまでにこの記事は３つの見出しで書かれています。

この記事の目次をみていただければわかりますが見出しによって記事が構成されています。

文字の大きさや文字の記載位置など一目でわかりやすくなっていると思います。

このように、一目で何が書かれた記事なのかわかりやすくするためのものが「見出し」になっています。

見出しをきちんと入れる事によって見やすい記事になります。

管理人も最初は見出しなどあまり気にせず記事を書いていました。

しかし、出来上がった記事を読むと何が言いたいのか見にくくわかりずらいことがわかりました。

一目見ただけで記事を読む気がしません。

見出しはきちんと順序立てて使うことでユーザーに見やすい記事が書けるため読みやすくなります。そのための「見出し」です。

Diver入力補助「見出し」とは見出しのデザインを作成するための入力補助機能です。

Diverの見出しデザイン

上の黄色い部分はDiverの見出しデザインを他の部分と変更しています。

見出しのデザインを変えたいときはDiver入力補助の見出しからデザインを変更できます。

入力補助で見出しを選ぶと投稿画面の設定に見出しのデザインが表示されますので好きなデザインを選ぶ事が可能です。

下記では見出しのデザインを入力補助でどのように設定するのかを解説します。

（注）この「見出し」の解説は新エディターGutenbergでの解説です。旧エディターと若干違います。

入力補助の「見出し」のデザイン設定方法

それでは入力補助の「見出し」のデザインを確認していきましょう。

新エディターGutenbergでのDIVERの入力補助の設定は「下の画像の右端」のブロックで設定できます。

ブロックを下にスクロールすれば色の設定も可能です。

種類は全部で９種類あります。カラーは枠線、背景、テキスト、それぞれ11種類＋カスタムカラーが選べます。

また「見出し」の詳細設定も可能です。

「見出し」詳細設定とは[div][H2][H3][H4][H5]に見出しタグを変更することが出来ます。

下の見出しは全て[ div ]タグで表示しています。

見出しのデザインは豊富にありますね。DIVERではこのように簡単に見出しのデザインを変更することが可能です。

まとめ

Diverの入力補助を使った「見出し」の設定は簡単に出来ます。カスタマイズをする場合は通常はカスタマイズのデザイン設定２で見出しの設定が可能です。

しかしDIVERの入力補助を使えばわざわざカスタマイズをしなくても記事の更新中にすぐに見出しのデザインや設定を変更できるというメリットがあります。

また新エディターGutenbergの場合はブロック検索ですぐに「見出し」の変更が可能です。ブロックごとに設定できるため修正や削除も簡単です。

合わせて読みたいDiver入力補助まとめ

[WordPress] Diver入力補助の使い方まとめマニュアル！[Gutenberg]編

2020.9.1

ばにら営業部長こんにちは！ばにら営業部長です WordPressテーマDiverの入力補助機能を解説しているコンテンツはたくさんあるけどいまいちわからない事ってありますよね。 それ...