ワードプレスのHTMLタグを徹底解説！

ワードプレスで記事を作成する場合、必ずHTMLタグを使用します。

HTMLタグは、「目次、見出しの作成」「文字の見た目を変える（太字や色）」「図表や画像を貼り付ける」など、読者に読みやすい記事を作成するためのもので、必須のものとなっています。

今回はワードプレス初心者の方に対して

・HTMLタグの基礎
・よく使うHTMLタグ集

について解説していきます。

5分ほどで読み終わると思うので、ぜひ覚えてみてください。

HTMLタグの基礎

HTMLタグは「ブログ記事等をWEBサイト上の画面に表示する」ためのHTML言語です。

HTMLタグは以下のような構造となっています。

「スラッシュなしの開始タグ」と「スラッシュありの終了タグ」で囲むことにより、囲まれた内容について、画面に表示したときの見た目等を変えることができます。

囲むタグ名によって、まったく違う表示内容になります。

例えば、今回の画像の例でいうと「<b>」は囲まれた内容を「太字で表示する」という意味です。

他にも

・<img> 画像を表示する
・<a href> リンクを表示する
・<table> 表を作成する
・<h> 見出し形式で表示する

などがあります。

よく使うHTMLタグを説明する前に

ワードプレスで記事を編集する方法として「ビジュアルエディタ」と「テキストエディタ」の２種類あります。

本記事では「テキストエディタ」を使っての編集方法をメインに説明していきます。

「ビジュアルエディタ」はHTMLタグを一切しようせず、見出しの設定や文字の装飾を行えます。

ただし、少し凝った文字の装飾や、図表を作成等ができないといったデメリットがあります。

特に図表の表示は、記事を作成するうえでよく使う表示方法となりますので、見た目の良い記事を作成したい場合は、「テキストエディタ」に慣れていくことをおすすめします。

テキストエディタが表示されないという方は「Classic Editor」のプラグインを導入しましょう。

よく使うHTMLタグ一覧

ワードプレスでよく使うHTMLタグについて説明していきます。

とりあえずここで紹介するHTMLタグさえ覚えておけば、記事作成には困らないかと思います。

見出しタグ – 「<h1>」～「<h6>」

「<h>」タグは「見出しタグ」のことです。

以下のような見出しを作成するときに使います。

見出しタグは<h1>～<h6>まであり、階層構造となっています。

例えば、メリットに関しての内容を書きたい場合、まず一番大きい見出しとして「<h2>メリット</h2>」を用意します。

メリットの下の階層として見出しを表示したい場合は、「<h3>〇〇</h3>」という順番に使うことで、読者に伝わりやすい記事を作成することができます。

注意点としてはワードプレスでは「h1タグ」は使用せず、「h2タグ」から順番に使用するようにしましょう。

ワードプレスで記事を書く際にタイトル部分が「h1タグ」として使用されます。

「h1タグ」は記事内に１つだけという決まりがあるため、「h2タグ」以降のものを使用していきましょう。

文字の太字表示 – 「<string>」「<b>」

文字を太字で表示したい場合は、「<string>」もしくは「<b>」を利用します。

こちらもよく使うタグのため、覚えておくと良いかと思います。

文字を太字にするショートカットキーも用意されているので、簡単に太字にすることができます。

「<string>」と「<b>」の違いは以下の通りです。

「<string>」はgoogle等の検索エンジンに文字の強調を伝えることができます。

「<b>」は検索エンジンに文字の協調を伝えたくない場合に使用します。

googleによると、「<string>」「<b>」どちらを使っても、SEO的には差はないとのことです。

わたしは念のため、「<b>」を使用するようにしています。

参考：Is there a difference between the “strong” and “b” tags in terms of SEO?

引用タグ – 「<blockquote>」

「<blockquote>」は「引用タグ」のことです。

参考文献や他サイトの口コミを引用する場合に、blockquoteタグで囲むことにより、引用、転載である文章であることを表します。

記事で商品紹介をしたときに、その商品が良い理由の根拠を示す場合に利用することが多いです。

文字の装飾

文字に色をつけたり、マーカーを引いたりする場合は、ショートカットキーが用意されているので、そちらを利用しましょう。

文字の色の変更等に関しては、初心者の方であれば、とりあえずショートカットキーさえ覚えておけば良いかと思います。

文字の色に関しては、2パターンくらい使えれば問題ありません。

例えば「読者に特に覚えてほしい文章」「注意点として訴えかける文章」の2パワーンを色分けするなどです。

文字の装飾としては、前述で紹介した「太字表示」（「<string>」「<b>」）を利用しても良いかと思います。

リンクタグ – 「<a>」

「<a>」は「リンクタグ」のことです。

リンクをクリックすると、指定したURLに飛ばすことができます。

上記の設定で、リンクをクリックした場合、そのページが指定されたリンク先に移動します。

以下の設定を追加することで、別タブにリンク先を表示できるようになります。

画像タグ – 「<img>」

「<img>」は画像を表示したいときに用いるタグです。

こちらに関しては、「メディアに追加」というショートカットキーがあるので、そちらを利用すると簡単に設定できます。

使い方は以下のとおりです。

①「メディアを追加」をクリックします。

②画像を選択します。

※画像を追加したい場合は、追加したい画像を「ドラック&ドロップ」

③画像サイズを選択して「投稿に挿入」ボタンをクリックします。

④ 「<img>」タグが設定されます。

表作成 – 「<table>」

表を表示した場合に「テーブルタグ」を利用します。

記事を書くうえで「テーブルタグ」を利用する機会は多いと思います。

表形式でまとめてあるほうが読者にとって視覚的に見やすくなるため、テーブルタグは是非覚えておきましょう。

テーブルタグに関してもっと詳しく見たい方は、こちらを参考にしてください。

参考：table (テーブル) タグの基本！表の作り方・tr、th、tdの使い方

最後に

ワードプレス初心者の方は、本記事で説明したHTMLタグを覚えておけば、記事作成に困らないかと思います。

HTMLを知らない方でも、簡単に覚えれる内容なので、ぜひ習得してください。