実はカンタン！WordPressでHTMLを使ってみよう

2017.4.8　 2018.12.8 投稿・編集 用語

WordPressはHTMLを知らなくてもブログ感覚でページを作っていくことができますが、それでも多少知識がある方が便利な場面もあります。投稿画面にはHTMLをゴリゴリ書いていくこともできる「テキストエディタ」の機能もありますので、ちょっと学んでみませんか？

HTMLは何のためにあるの？

ひとことで言えば「文書の構造を明示的に記すタグ」です。

構造なんて言うととっつきにくいかもしれませんが、Wordなどのワープロソフトを思い浮かべてみてください。文書の要素に対して「見出し」「強調」「段落」といった構造を指定すると、文字が大きく・太字になるなど、あらかじめ設定された書式（スタイル）で表示されます。

見た目にわかりやすくなるだけでなく、見出しから目次を作るなどシステム側でも構造を理解しやすくなるメリットがあります。単に文字のポイント数を大きくして太字にしても見出しらしくはなりますが、それでは自動的に目次を作ることもできませんし、文書が長くなれば書式を統一させるのも一苦労です。

そのような文書構造をWEB上で表現するためのものが、HTML（HyperText Markup Language）です。

ページを作るときに「見出し」「強調」など、パーツに対して構造（タグ）を指定しておくと、ブラウザが適切な書式で表示してくれます。検索エンジンもタグを読んでページの構造や重要な部分を判断してくれます。

ワープロソフト同様に、構造を指定せずに文字の大きさや太さを指定することもできますが、それでは検索エンジンにページの中でどこが重要かなど文書の構造を伝えることができません。正しいHTMLでなくても表示はされますので即問題があるということではありませんが、知っているとページを作るスピードも速くなりますのでぜひ続きもお読みください。

HTMLの基本

• タグは<h1>ように<>で囲む。
• 開始タグと閉じタグがペアになっている（例外あり）。閉じタグにはスラッシュが付く。
• タグは入れ子にできる。ただし、<h1><h2></h1></h2>のように互い違いにはできない。
• 必ず半角英数字を使う。

とりあえずこれだけ頭に入っていればOKです。

WordPressの投稿画面でHTMLタグを使う

WordPressの投稿画面（ホームページの本文エリア）で使うことを前提にすれば、それほどたくさんのタグを知らなくても大丈夫です。まずは４つだけ。

１．見出しタグ

<h2>ここに見出し2</h2>
hはheadingの略です。h1〜h6まで使えますが、たいていのページはh3かh4くらいまであれば十分です。WordPressではタイトルが自動的にh1に割り当てられます。

２．段落タグ

<p>ここに段落テキスト</p>
pはparagraphの略です。WordPressではタグで囲まれていないテキストは段落として判断され、自動的に<p></p>タグが付きます。（テキストエディタで<p></p>タグが見えていない場合でも、ブラウザがそのように判断してタグを付けます）

３．改行タグ

ここで改行したいのです。<br>
brはbreakの略です。改行したい場所に<br>を記述します。閉じタグはありません。<br>を入れれば強制的に改行できますが、スマホのように画面が小さいと、行の途中で頻繁に改行されて見づらくなることもありますので配慮が必要です。

４．強調タグ

文章の途中で<strong>強調したい文字</strong>を囲みます。
WordPressのビジュアルエディタでは「B」のボタンをクリックすると<strong>が適用されます。使いすぎるとうるさくなりますのでほどほどに。

とてもカンタンですね。
もう少し作り込むならこちらも↓

箇条書き（番号なし）

<ul>
<li>箇条書き１</li>
<li>箇条書き２</li>
</ul>

ulはunordered listの略。order（順番）がun（ない）なので、順不同リストということになります。箇条書きの中身を<ul></ul>で囲っています。

箇条書き（番号あり）

<ol>
<li>箇条書き１</li>
<li>箇条書き２</li>
</ol>

olはordered listの略。上記のulが順不同だったのに対し、こちらは箇条書きの先頭に１，２と番号が自動的に振られます。

引用

<blockquote>
この部分は引用です。この部分は引用です。この部分は引用です。
</blockquote>
blockquoteで囲うことで引用であることを明示できます。ビジュアルエディタでは「”（ダブルクオテーション）」のボタンです。

実体参照

&nbsp;（non-breaking space）
こちらはおまけといいますか、WordPressのビジュアルエディタで編集していると意図しない場所に空行が入ってしまうことがあります。そんなときにテキストエディタに切り替えるとたいてい「&nbsp;」が入っています。こちらを消せば余分な空行は消えます。

実際の見た目はこんな感じになります。

上記はあえてタグが見えるようにしていますが、実際には以下のように表示されます。タグで囲むだけでこんなにスッキリまとまるのですから便利ですね。

見出し2

段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト

段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト

見出し3

段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト

• 箇条書き１
• 箇条書き２

見出し2

段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト

1. 箇条書き１
2. 箇条書き２

この部分は引用です。この部分は引用です。この部分は引用です。この部分は引用です。この部分は引用です。この部分は引用です。この部分は引用です。この部分は引用です。この部分は引用です。この部分は引用です。

段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト段落テキスト

WordPressのテーマにはあらかじめスタイルが設定されています。

いかがでしたか？　ひとつひとつ「文字はこの大きさにして」「太字にして」と設定しなくても、htmlのタグで囲むだけで統一のとれたページを作ることができます。

WordPressのテーマにはテーマそれぞれのデザインに合った書式（スタイル）が設定されていますので、ぜひ積極的にhtmlタグを使ってみてください。

Tweet

Pocket