WordPressの運用にHTMLを使うことはほとんどありません。ただサイト自体がHTMLでできていることもあり、やはりある程度の知識はあった方が作業しやすくなります。普段何気なく書いていた記事も、HTMLの構造が見えてくると文章もまとめやすく、SEOにも配慮できるようになります。
ここでは、HTMLについてすべてを覚える必要はないので、WordPressに特化したものだけをまとめてみます。

そもそもHTMLとは

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

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

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

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

<title>WordPressで必要になるHTMLの知識</title>

もう一つは、例えば「改行」です。「<br>」というタグを使いますが、これはどこで改行するか指定するだけなので一つで済みます。

文章の途中で<br>
改行を入れます。

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

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

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

まずは投稿画面の冒頭にある「タイトル」が重要です。

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

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

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

ただあまりに凝り過ぎて長くしたり不自然なものにすると逆効果です。本文を書き終わった後などによく考えてつけるようにしてください。

GutenbergブロックはHTMLタグ

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

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

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

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

見出し

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

通常は「ページ(記事)のタイトル」が「h1」に設定されるため、本文中では「h2」から使用することが多いと思います。

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

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

見出しの階層

見出しは単に文字を強調するというものではなく、文章を分類し、階層分けするという役割があります。

まず「h2」を指定すると、そこからは「h2の領域」が作られます。その中には「h3」だけが設置できます。そこで「h3」の領域が作られると、その中には「h4」だけが設置できます。
再び「h2」を追加すると、そこまでの「h2の領域」は終わり、新しい「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>
  <h2>…</h2>
  <p>…</p>
</div>

この場合、二つある「div」のうち一つが閉じていないため、ほぼ確実にページレイアウトが崩れます。本文の外(下)にある全く別の「</div>」とセットになってしまうためです。

特に「div」タグと「span」タグに注意してください。この二つは文法的な意味を持たないため、ページ全体のレイアウトによく使用されます。

テーブル

Gutenbergでは「表」を作ることもできます。表は「table」というタグを使います。

ただしこのGutenbergのブロックでは凝った表は作れません。これを書いている時点ではまだヘッダとなる「th」タグを意図した場所に設置できません。

このtableというタグはそもそも少し複雑で、セルの中に入れる内容に応じて横幅が変化するなど、設計自体が難しいものです。モバイルでは横幅が画面を溢れる可能性もあります。

できれば「表」はあまり使用しない方がよいと思います。将来も踏まえ「リスト」や通常の「段落」テキストによる表現で代用する方が無難です。使用する場合も2列までとするなど横幅をある程度制御し、モバイルでも問題のないものを作成してください。

引用

文字通り、他で記載された文章などを引用するためのものです。「blockquote」というHTMLタグがつきます。この中に記載したものは「引用であり、自分の文章ではない」という意思表示になります。Gutenbergのブロックでは「引用元」を入力欄も用意されています。

一般的な表現としては、インデントされるなどし本文とは差別化されます。ただこれも見出しと同様に「このデザインを使いたいから引用を選ぶ」というのはNGです

文献の引用など本来の使い方以外にも、他サイトの紹介や、一般に公表しているものを引用するという意味で自ら企画するイベント情報などに利用してもよいと思います。


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

できるだけ各ブロックを素直に使い、文章としての正しい形を目指してください。その方がメリットが多く、将来の面倒も避けやすくなります。