ワードプレスの編集で使うHTML【これだけ覚えれば記事作成できる】

ワードプレスの編集（文章作成）で使うHTMLタグは、それほど多くはありません。

また、ワードプレスの場合はボタンをクリックするだけで形を整えていくことができます。わざわざHTMLタグを手で入力しなくてもよいわけです。

しかし、HTMLタグがどのような意味で、目的で使われているのかを知っておく必要はあります。

この記事では、ワードプレスの編集で使うHTMLについて解説します。

ワードプレスの編集で使うHTMLとは

要素	HTML
見出し	<h2>～</h2> <h3>～</h3>
段落	<p>～</p>
リンク	<a href=”https://…”>～</a>
画像	<img src=”https://…”>
箇条書きリスト	<ul> <li>～</li> <li>～</li> </ul>
番号付きリスト	<ol> <li>～</li> <li>～</li> </ol>
表	<table> <tr><th>～</th></tr> <tr><td>～</td></tr> </table>
範囲	<span>～</span>
ブロック	<div>～</div>

見出し

h2タグの中で使う小見出し

<h2>見出し</h2>
<h3>h2タグの中で使う小見出し</h3>

<h*>タグは、見出しに使われます。hとはheadlineの略です。

h1タグは、多くのテーマが記事のタイトル用に割り当てています。なので、本文中ではh2、h3を使って書いていきます。

h2タグ：本文中の見出し
h3タグ：h2タグの中で使う小見出し

もちろんh4タグ、h5タグを使用しても構いません。ただし、記事の見出しがあまり細かくなると、話題の区切りがわかりづらくなります。現在はスマホで読まれることが多いので、h3タグまでにとどめると読みやすくなります。

リンク

出典：Amazon

ワードプレスで副収入！テックアカデミー公式ページはこちら

出典：<a href="https://...">Amazon</a>
ワードプレスで副収入！<a href="https://...">テックアカデミー公式ページはこちら</a>

aタグは、リンクテキストを配置するときに使われます。aとはanchorの略です。hrefとはhypertext reference（ハイパーテキスト参照）の略です。

内部リンク：サイト内のほかの記事を参照したり、参考記事をリンク。
外部リンク：ほかのサイトの画像を貼ったら「出典：リンク」。ほかのサイトから文を引用したら「引用：リンク」。またはアフィリエイトリンク。

画像

<img src="https://blog.anchoco.me/html5.png">

imgタグは、画像を配置するときに使われます。imgとはimageの略です。srcとはsourceの略です。

アフィリエイトリンクを貼るとimgタグが付帯します。アフィリエイトリンクのimgタグはASP側のアクセス解析に使われています。

箇条書きリスト

ワードプレスで使われる言語

マークアップ言語：HTML
スタイルシート言語：CSS
プログラミング言語：PHP

ワードプレスで使われる言語
<ul>
<li>マークアップ言語：HTML</li>
<li>スタイルシート言語：CSS</li>
<li>プログラミング言語：PHP</li>
</ul>

ulは、箇条書きリストに使われます。ulとはunordered listの略です。

番号付きリスト

サイト収益化の手順

広告を選定する
ジャンルを選定する
キーワードを選定する

サイト収益化の手順
<ol>
<li>広告を選定する</li>
<li>ジャンルを選定する</li>
<li>キーワードを選定する</li>
</ol>

olは、番号付きリストに使われます。olとはordered listの略です。順番・順序のあるリストに使用します。

ワードプレスでは、多くのテーマが記事内の目次でも使用しています。

ワードプレスの無料テーマCocoonではショートコード[toc]で目次が出力されます。プラグイン「Table of Contents Plus」で目次を出力することもできます。これらの方法で出力された目次の正体は番号付きリストです。

表

タグ	意味
tr	table row
th	table header
td	table data

<table>
<tr><th>タグ</th><th>意味</th></tr>
<tr><td>tr</td><td>table row</td></tr>
<tr><td>th</td><td>table header</td></tr>
<tr><td>td</td><td>table data</td></tr>
</table>

tableは、表に使われます。tableとは表を意味する英語です。

thタグは表の見出し行に使われます。見出し行を必要としない場合はthタグを省いても構いません。各行のth・tdタグの数は合わせる必要があります。

表は見やすい反面、スマホで表示すると画面から見切れてしまうことがあります。列の数が多い場合は、改行を使うなど工夫して列を3～4列くらいまでにとどめるとスマホでも見やすくなります。

段落

吾輩は猫である。

名前はまだ無い。

<p>
吾輩は猫である。
</p>
<p>
名前はまだ無い。
</p>

pは、本文中の段落を示すのに使われます。pとは、paragraph（段落）の略です。

ワードプレスでは、文章を改行すると自動でpタグが入るようになっています。

範囲

太字
赤太字

<span style="font-weight: bold">太字</span>
<span style="color: red; font-weight: bold;">赤太字</span>

spanは、ワードプレスでは主に文字の装飾に使われています。spanとは範囲のことです。

spanで囲った文字をCSSで装飾します。

文字サイズ

大きい文字

<span style="font-size: 32px;">大きい文字</span>

spanで囲った文字のサイズを変更できます。

pxの値を小さくすれば、もちろん小さい文字にすることもできます。ただ、Googleが小さい文字を好まないので、SEOに配慮するなら小さい文字は使わない方がいいでしょう。

囲み枠

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

<div style="border: dashed 2px;">
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</div>

divは、ワードプレスでは主に文字の囲み枠として使われています。

重要な箇所・リストを囲って目立つようにデザインすることができます。

テーマによっては内部リンクカードやアフィリエイト用ボタンなどにも使用されています。

まとめ

ワードプレスの編集で使うHTMLタグは、それほど多くない。
見出し、リンク、画像、箇条書きリスト、番号付きリスト、表、段落、範囲、囲み枠を知っておけばよい。

ワードプレスで使われるHTMLやCSSをしっかり習得すれば、サイトを読みやすいデザインにできます。

デザインの整ったサイトは、記事の信頼性にもつながり、収益化しやすくなります。

プログラミングスクールのテックアカデミーには、ワードプレスをマスターできるコースがあります。

収益の生まれるサイトを目指すならHTML/CSSを短期間でしっかりマスターして、収益で取り返すのも一つの方法です。

テックアカデミー公式ページはこちら

リンク