WordPressで知っておくと役に立つ基本的なHTML

WordPress（ワードプレス）でブログ記事を作成する時に、知っておくと便利なHTMLタグの解説です。

ブログを書く時にはビジュアルエディタ（記事作成画面のテキストで無い方）を利用することが多いと思いますので、通常はHTMLタグを意識する必要はありません。

ですが別のサービス（アフィリエイトなど）で生成されたHTMLタグを記事内に設置したり、またウィジェットに直接HTMLを記述する場合があります。

そのような時に基本的なHTMLを知っておくと、間違いが防げます。それでは以下、HTMLタグの基本です。

HTMLタグの基本

HTMLタグは

というカッコに囲われています。

<タグ>◯◯◯</タグ>

基本的には上記のように、開始タグとスラッシュが付く終了タグをワンセットで使います。

◯◯◯

開始タグと終了タグの中には、上記例の「span」のように同じ文字列が入ります。

上記例「 」のように、終了タグの無いHTMLタグもあります。この場合は単独で使用します。

なお上の例では と の2つを挙げました。これらの違いはスラッシュ（とその手前の半角スペース）が付いているか付いていないかですが、現在主流となっているHTML5ではどちらの書き方でも問題はありません。

文法上は厳密な定義があるかもしれませんが、少なくともブラウザで表示する時はどちらでもエラーになりません。WordPressで出力される時は、スラッシュ付きの場合が多いようです。

ここまでがHTMLの基本。以下、WordPressで良く使うHTMLタグです。

リンクを指定するaタグ。

基本的には

<a href="https://www.yahoo.co.jp/" target="_blank">ヤフー</a>

のような形でHTML内に記載。「href」の後にリンク先のURLを指定します。「target=”_blank”」が指定されている場合は、リンク先のURLが新規ウィンドウまたは新規タブで開きます。

通常はhrefとtargetを記載するだけで良いのですが、WordPressでは「rel=”nofollow noopener”」のような指定が自動的に付加されることがあります。

「nofollow」は、hrefに指定したリンク先を検索エンジンがたどらないように、という指定です。

「noopener」は、リンク先でリンク元（この場合はあなたのページ）を参照できなくするためのものです。「noreferrer」という指定が付いていることもあります。

ここでは詳しい説明は省きますが、セキュリティ上の理由でWordPressが自動的に付加している、と考えてください。

リンクの修正はビジュアルエディタでも可能ですが、テキストエディタからaタグの内容を修正する必要がある場合は、上記を参考にしてみてください。

文章内の見出しをあらわすテキストを囲うためのタグがhタグです。

<h1>見出しレベル1</h1>
<h2>見出しレベル2</h2>

のようにhのあとには1～7までの数字が入ります。ちなみにこのセンテンス（段落）の見出し「hタグ」の文字は、h2タグで囲まれています。

WordPressでは一般的にタイトルに設定された文言がにh1（最上位の見出し）で囲まれています。なので本部中で設定される見出しはh2以下が多いでしょう（※利用しているテンプレートによって異なる場合もあります）。

aタグと同じぐらい使用頻度の高いタグがimgタグ。HTML内で画像を表示するために利用されるタグです。

<img src="https://～中略～○○○.jpg" alt="説明テキスト" width="100" height="100" />

上記のような指定が一般的です。終了タグは必要ありません。

<img src="https://～中略～○○○.jpg" />

このような簡易な表記でも画像は表示されます。ですがその他の情報もあった方が、HTML的には親切ではあります。

「src」には画像ファイルのパス（画像ファイルの置き場所＋画像ファイル名）を指定します。「alt」属性には画像内容を説明する適切な文章を入れます。空でも構いませんが、「alt=””」のような記載は残しておいた方が良いでしょう。

「width」「height」にはそれぞれ画像ファイルの幅・高さのピクセル数を入力します。「px」などの文字は不要です。width・heightを指定しておくと、画像表示のスピードを上げることができます。

ビジュアルエディタでテキストを選択し、入力フォームの上にある「B」マークのボタンを押すと、選択したテキストがstrongタグで囲まれます。

<strong>○○○</strong>

strongタグは囲ったテキストを「強調」するものです。囲われた文字は、基本的に見た目が太字になります（テンプレートやスタイルシートの指定によっては太字にならない場合もあります）。

以上、ワードプレス（WordPress）でブログ運営をするときに知っておくと便利なHTMLの基本、でした。

基本的に直接HTMLを編集しなくても記事の作成は可能です。ですが外部サービスのHTMLソースを挿入したり、テキストエディタ（WordPressの）から文字列を編集する時に、これらのHTMLソースを理解しておくと何かと役に立ちますよ。

本ブログはレンタルサーバー「エックスサーバー」にて稼働中です。