pick up
diver入力補助  見出し

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

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

この記事は新エディターGutenbergによるレビューです。旧エディターの解説ではないため旧エディターを使っている方は若干使用が異なります。

尚、その他の入力補助についての記事も記載しているページも多数リンクしていますので入力補助機能について学べるようになっています。

スポンサーリンク

DIVER入力補助「見出し」の使い方

見出しとは?

「見出し」とは上の[DIVER入力補助「見出し」の使い方]と記載された部分になります。見出しがあることにより記事の中で何について書かれているのかを一目でわかりやすくしています。

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

「見出し」にはいくつかの種類があり大きく分ければ3種類に分類されます。上の[DIVER入力補助「見出し」の使い方]の部分はH2という見出しタグで表示しています。

その下の「見出しとは?」の部分はH3という見出しタグになっています。一目でわかりますが大きさが違います。

見出しタグは順番に使うことによりコンテンツ内を移動しやすくなります。これはGoogle公式にも記載された検索エンジン最適化「SEO」のため重要な項目でもあります。

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

見出しの使い方

上の見出しはH3タグを使っています。上から順にH2、H3と使い使っています。この記事のタイトル部分はH1タグで記載されています。

イメージは「大見出し=H1」「中見出し=H2」「小見出し=H3」といった感じです。ここまでにこの記事は3つの見出しで書かれています。

この記事の目次をみていただければわかりますが見出しによっても記事が構成されています。文字の大きさや文字の記載位置など一目でわかりやすくなっていると思います。

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

見出しをきちんと入れる事によって見やすい記事になります。私も最初は見出しなどあまり気にせず記事を書いていました。

しかし、出来上がった記事を読むと何が言いたいのか見にくくわかりずらいことがわかりました。一目見ただけで記事を読む気がしません。

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

スポンサーリンク

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

WordPressでは通常、T「見出し」で見出しを入力します。

DIVERの「見出し」は通常「H=見出し」をクリックすることで見出しを入力します。

この見出しのデザインを変えたいときに「H=見出し」の入力補助を使えば見出しデザインを変更できます。

DIVERのカスタマイズでWordPressの見出しデザインを変更できますが入力補助を使えば入力補助のデザインを選ぶことが可能です。

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

入力補助の「見出し」はH「見出し」で入力してH2などに変更可能です。

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

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

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

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

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

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

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

見出し1「この見出しは枠線色=なし」「背景色=緑」「テキスト色=白」です

見出し2「この見出しは枠線色=黒」「背景色=青」「テキスト色=白」です

見出し3「この見出しは枠線色=上下のみ黒」「閉経色=オレンジ」「テキスト=白」です

見出し4「この見出しは枠線色=下側のみ黒」「背景色=赤」「テキスト色=白」です

見出し5「この見出しは枠線色=左端のみ黒」「背景色=黄色」「テキスト色=黒」です

見出し6「この見出しは枠線なし」「背景色=グレー」「テキスト色=黒」です

見出し7「この見出しは枠線色=右端のみ青」「背景色=水色」「テキスト色=白」です

見出し8「この見出しは枠線色=右端のみ黒」「背景色=ピンク」「テキスト色=白」です

見出し9「この見出しは枠線色=右の点部分=黒」「背景色=紫」「テキスト色=白」です

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

まとめ

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

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

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

スポンサーリンク
関連キーワード

Twitterでフォローしよう

おすすめ記事