【ブログ】必須級!見出しの設定方法とそのメリットについて解説【WordPress】

技術系

どうもこんばんは、最近気象衛星の一台とビジネスフレンド契約を締結したさいほうへいきです!

みなさん、ブログを書け(唐突)

……まぁ冗談はさておき、みなさんはブログを書く時見出しを適切に設定していますか

「わざわざ設定する方法が分からない……」とか、「設定して何が変わるの?」とか、いろいろ疑問はあるかもしれません。

今回は、僕が僭越ながら見出しを設定する方法とそのメリットについて、ざっくり紹介させて頂こうと思います!

そもそも見出しとは?

見出しとは、辞書的定義に則ればこういうものです。

見出しとは、新聞を始めとする様々な記事、文章において内容の要点を非常に短い言葉にまとめ、本文より大きな字で章や節の最初に置かれる言葉。
見出し – Wikipedia(https://ja.wikipedia.org/wiki/見出し

いまいちピンと来ないかもしれませんね……。

この卵のブログなど、さまざまな記事において見出しというのは、書いてある内容を端的にまとめた、短くて目立つ言葉のこと。
具体的に例を挙げるならば、こういうものです。

これを見れば、読者はパッと「あ、この章ではシャトランジくんについて説明しているんだ!」などと理解することができます!

逆にこれがなく、いきなりツラツラと平文が配置してあった場合、いったい何についてのトピックを扱っているのか分からず、困惑しながら要点を探す羽目になります

また見出しは、よく入れ子構造で使われることもあります。
たとえばこんな感じです。

この場合、センチュリーくんに説明している文章のうち、特に名前の由来について解説しているんだな、と理解が進みます。
他のサイトのブログ記事などを見てみると、案外こういった入れ子構造がしっかりまとめられており、とても読みやすくなっているのが分かるかもしれません。

見出しの設定方法

では、実際にあなたの記事に見出しを設定していきましょう!

ワードプレスをビジュアルエディタで使っているか、コードエディタで使っているかでやり方が変わるので、両方についてそれぞれ解説していきます!

ビジュアルエディタの場合

ビジュアルエディタで見出しを設定するには、次のような手順を踏んでください。

まず、見出しに設定したい文を書きます。

たとえばこのスクリーンショットだと、『センチュリーくんっていったい誰?』という一文ですね。
見出しとそれ以外の文はきちんと改行を挟むようにしてください!

次に、左上の『段落』を選択し、『見出し2』に変えます。

すると文字が大きくなり、見出しの設定が完了しました!

これ以外にも見出しには1から6までが存在し、うまく活用することで先述の入れ子構造を作ることができます。
しかし見出し1の扱いには少し注意が必要です。詳しくは後ほど解説するので、ぜひ併せてご確認ください!

コードエディタの場合

コードエディタで見出しを設定するには、HTMLタグ<h2>を設定します。

だいたい次のような感じですね。

<h2>センチュリーくんっていったい誰?</h2>

コードエディタでは、とりあえずこれだけで見出しの設定が完了します!

あとはプレビューモードなどで表示が上手くいっていることを確認してください。

また、<h2>だけでなく<h3>や<h4>など、他のサイズの見出しを設定することで入れ子構造にすることもできます!

見出しを設定するメリット

では見出しを設定すると、どのような利点があるのでしょうか?

それぞれのメリットについて、簡単にまとめていきます!

記事内容が格段に分かりやすくなる

もっとも重要なメリットが、一目で内容が理解できることです!

先ほど挙げた例を再掲しますが、パッと見だけで「ああ、シャトランジくんについて解説してるんだ」という理解ができますよね!

逆に見出しを使わず、いきなり「シャトランジくんは、……」から長い文章を始めてしまうと、その後の長い文章に呑まれてあまり要点が分かりづらくなります。

人間というのはより目立つものに目が引かれるので、案外冒頭から律儀に読んでくれる、とは限りません。
一目見ただけで分からなかった場合、それだけで読むのをやめてしまうことも十分にあり得ます。

そのため、記事を読んでもらうためにも見出しの設定は必要不可欠なんですね。

もくじができる

実は、これも無視できないメリットです。

WordPressでは、見出しを適切に設定すると、ページ上部にもくじが自動生成されます

この記事の目次はこんな感じですね。

位置的には、いちばん最初の目次の真上に出来ていることがわかります。

もくじを利用すれば、どのような内容があるのかそれだけで理解できるうえ、それだけではなく読みたい箇所にすぐにジャンプできます
さらに、おおまかにどれだけのボリュームの記事があるのかも分かりやすくなります。

快適にブログを読むには、もくじの設定がとても重要なんですね

しかし、たまに変な箇所にもくじを配置している人がいるのですが、それではほとんど意味がありません。

というのも、もくじというのは一番冒頭にあってこそ効果を発揮するわけで、目次がページの下の方にあっても何の意味もありません

そのため、できるだけ上の方に最初の見出しともくじを設置し、見出しに含まれない導入文は数行にまとめることが大切です。

見出し1(h1)を使うのは非推奨?

少し前でも軽く触れましたが、実は最も大きいサイズの見出し1(h1)をいくつも使うことは原則禁止です!

なぜなら、「記事のタイトルが見出し1」という鉄則があるから
最も目立たせる必要のある記事タイトルは、ほかの見出しとは明確に区別されるべきです。

もし、ページ内の複数の章に見出し1を乱立してしまうと、あたかも複数の記事が乱立されているようにも見えてしまいます。

しかも、検索エンジンでの評価も下がってしまうなど、無視できないデメリットがいくつも存在します。

そのため、見出しを使う時のサイズは2からという鉄則をきちんと理解しておくのが大切です!

まとめ

以上、『見出しを設定するメリットと、その設定方法』の解説でした!

ぜひこの記事の内容を、みなさんの記事執筆にも役立ててみてください!

ちなみに、卵のブログでも使えるHTMLコードの簡単な解説はこちらにあります。ぜひどうぞ。

【個人的】とりまこれでOK!?WordPressのための超簡単HTML!!【卵のブログでも使える】
どうもこんにちは、さいほうへいきです!今回はどっちかというとまあブログ読者向けではない記事ですね。タイトル通り、WordPressでサクッと使えちゃうHTMLタグをいくつかご紹介していきます!選定基準は僕がここ卵のブログで使ったことのあるタ...

また、実は危険なのにやりがちな『インラインスタイル』の危険性の記事もあります。ぜひ読んでみてください!

【HTML】span styleで色付けするのは『禁じ手』!?インラインスタイルの危険性とは?【さいほうへいき】
どうもこんにちは、時計の針を眺めていたら視力が下がった気のするさいほうへいきです!僕はこちらの以前の記事で初心者向けのHTMLタグをご紹介しましたね。読んでくださった方もいるかもしれません。でも、この中で紹介した『色付け』の方法、実は禁じ手...

では、今回はこのへんで!
さいほうへいきでした!

コメント

タイトルとURLをコピーしました