WordPressで必要になるHTMLの知識

WordPressのサイトは、HTMLを使わず運用することもできますが、サイト自体がHTMLでできていることもあり、やはりある程度の知識はあった方が作業しやすくなります。また普段何気なく書いていた記事も、HTMLの構造が見えてくると文章もまとめやすく、SEOにも配慮できるようになります。

HTMLとは

HTMLというのは、文書ファイルの記述ルールのことで、インターネット上にあるほぼ全てのサイトがこのHTMLで書かれています。

HTMLの中で「これは見出し、これは段落」など見えない目印で意味づけがされています。その目印を「タグ」と呼びます。具体的には括弧「<」と「>」で閉じたものを指し、これらはブラウザ上では表示されません。

HTMLタグには２パターンあります。「範囲」を示すものと「単体」で動作するものです。

例えばページ用のタイトルは「<title>」というタグを使いますが、この一つの目印だけではどこまでが「タイトル」かわかりません。範囲を指定するため「</title>」とスラッシュを入れた終端を示すタグで囲みます。

もう一つ、「単体」で動作するものとしては「改行」があります。「<br>」というタグを使いますが、これはどこで改行するか指定するだけなので一つで済みます。

こうしたタグによって細かく意味づけされた文章がHTMLです。

またページ上には文章だけでなく、画像や動画、また操作上の動作などがありますが、あくまでもHTMLという文書ファイルがベースにあり、そこに記述された通りに画像や動画が読み込まれている、という形になっています。

GutenbergブロックはHTMLタグ

WordPressの投稿画面にHTMLは見えません。一つ一つブロックを選んで並べていくという方法で編集していきます。このブロックを使った入力方法には「Gutenberg（グーテンベルグ）」という名前がつけられています。

この「ブロック」を選ぶという操作によって「HTMLタグ」を選んでいることになります。

単に文章を書き始めることもブロック操作の一つで、そのブロックには「段落」を示す「p」というタグが設定されます。

その他「見出し」や「リスト」「区切り」なども全てHTMLタグです。それぞれどのように変換されるのか意味を知っておくと、ブロックを選びやすくなます。

覚えるべきHTMLタグ

SEOに最も重要な「タイトル」タグ

一つ目のHTMLとして、投稿画面の冒頭にある「タイトル」が重要です。

ここで入力したテキストは、ほとんどの場合「title」タグに設定され、同時にページ内の見出し「h1」としても利用されます。

「title」タグはページには表示されませんが、ブラウザのタブやブックマーク（お気に入り）で目にします。また「h1」タグは、そのページの中で一番大きな見出しです。

この二つのタグは、検索エンジンがページを評価する際、最も重視すると言われています。そのため単にページを見分けるだけのテキストとは考えず、人が見て興味を引くもの、かつページに関連した大切なワードを含めることを意識してください。

ただあまりに凝り過ぎて長くしたり不自然なものにすると逆効果です。よく考えてつけるようにしてください。

見出しタグ

上の「タイトル」でも書いた通り「h1」は見出し用のタグです。「h」と「数字」でできています。この数字は階層の順序になります。単に大きさを表す訳ではありません。一番上が「1」で一番下が「6」になります。

通常は「ページ（記事）のタイトル」が「h1」に設定されるため、本文中では「h2」から使用します。

特に文章を長く書くことに慣れている場合は、見出しの追加を意識すると文章が自然と読みやすいものになります。見出しだけ読めば内容が掴めるという形が理想です。

この見出しも検索エンジンから評価をされる大切なテキストになります。

また見出しは文章を分類し、階層分けするという役割があります。

まず「h2」を指定すると、そこからは「h2の領域」がスタートします。その中には「h3」だけが設置できます。そこで「h3」の領域が作られると、その中には「h4」だけが設置できます。
再び「h2」を追加すると、そこまでの「h2の領域」は終わり、新しい「h2の領域」が始まります。

• h2
  • h3
    • h4
• h2

このように階層を意識しながら、見出しをつけていきます。そのため「h3のデザインが好きだから、h3を使う」というのはNGです。そもそも見出しのデザインも、こうした階層構造を意識して作られていますので、この階層ルールに従って見出しを設定してください。

一つの方法としては、文章を書き始める前に「見出しの階層構造」を先に作っておくと、自然と文章もまとめやすくなり、読み手にも伝わりやすい記事になると思います。

段落と改行

投稿画面でテキストを書き始め、改行する（Enterを押す）と、その内容は「段落」になり、内部では「p」というタグがつきます。段落というのは一般的な意味と同じく「文章のまとまりを指し、最後に改行を入れたもの」です。

この「段落」を作るという意識がないと、Gutenbergの操作に流されて一文一文を段落にしてしまい、無駄に余白の多い記事が作られてしまうかもしれません。

通常段落は文章のまとまりのため、その中で改行はしません。HTMLで用意された「br」というタグは「強制改行」と呼ばれ、段落の中であえて改行するという場合に使用します。WordPressでは「Shift + Enter」を押すと段落内の強制改行になります。

また「br」タグについて下記の操作はNGです。

• 行間など縦の余白を操作する
• スペースや改行を使って文字をレイアウトする
• 表示領域の右端で起こる改行位置を微調整しようとする

端末によって表示領域は異なるため、自分の環境で綺麗に見えても他の環境ではレイアウトがかえって崩れる可能性があります。文章として意味のある改行を入れるようにしてください。

テキスト装飾は「太字」を使用

段落やリストを作成すると、その中のテキストを選択して装飾を加えることができます。といってもあまり種類はなく、日本語の場合は太字の「B」を使えばよいと思います。これは「strong」というタグをつけることになります。

あまりたくさん太字があると読みづらくなりますが、適度に使うと読み手が拾い読みできるようになります。また「strong」タグはSEOにも効果があるため、特に重要なワードや文章に使用してください。

「カスタムHTML」ブロックの利用

記事の中でHTMLを直接編集したい場合があります。その際は「カスタムHTML」というブロックを使用します。通常の段落の中には書けません（書いてもHTMLとしては機能せず、そのまま表示されます）。

サイト制作時に用意されたHTMLのパーツや、YouTubeなどでカスタマイズしたembedタグを貼り付ける際に利用します。

divとspanに注意

カスタムHTMLで注意する点は、当たり前ですがHTMLタグの記述を間違えないようにすることです。

始めにも書いた通りHTMLタグのほとんどは「領域」を示すため、開始タグと閉じタグを持っています。このセットを間違えるとページ全体のレイアウトが崩れる可能性があります。

例えば「<div>」と記述した場合、必ず対になる「</div>」という閉じタグが必要です。

この場合、二つある「div」のうち一つが閉じていないため、ほぼ確実にページレイアウトが崩れます。本文の外（下）にある全く別の「</div>」とセットになってしまうためです。特に「div」タグに注意してください。ページ全体のレイアウトに必ず使用されています。

---

HTMLを意識して正しい文法にすると、将来のデザインリニューアルが対応しやすくなるというメリットもあります。無理に余白を作ったり、独自のレイアウトにしてしまうと、リニューアルの際に後から一つ一つ修正が必要になってしまいます。

できるだけ各ブロック（=HTML）を素直に使い、文章としての正しい形を目指してください。