HTMLタグwordpress必須のモノ基本まとめ

WEBサイトを構築していく中で、HTMLタグを理解していくのは必然の努力です。
最初はなかなか抵抗があったり難しいと思いますが、
意識的に利用しているとやりながら慣れていくものなので、
是非頑張って使っていきましょう。

WORDPRESSサイト運営にあたり、頻繁に使うであろうHTMLタグをまとめます。

こちらのページをブックマークしておいて、
いつでも確認できるようにしておくとサイト運営がスムーズです。

引用・転載タグ

<blockquote>～</blockquote>
「～」で囲まれた部分が引用・転載であることを表します。

blockquote引用タグは、比較的長めの文章を引用・転載する際に使用します。
改行を必要としない程度の短い文章を引用・抜粋する際には、
<Q>タグを使用します。

インデントさせることが目的の場合は、
blockquoteタグを使用しないでスタイルシートを使用します。

<div style=”margin: 10px”>～</div>などと記述します。

リンク先を新しいウインドウで開かせるタグ

「 target="_blank"」

記述の頭に「 」の半角スペースが必要です。

ちなみに「 target="_blank"」と同じような用途の「 target="_new"」がありますが、
「 target="_blank"」だとクリックする度に毎回新しいページが別ウインドウで展開されますが、
「 target="_new"」は、1つの新しいウィンドウは展開されますが、
その後のリンク先は最初に展開されたウィンドウ上に置き換わって表示されます。

別ウインドウでページを開くタグは、サイトのPVは増えていくのですが、
WEBに詳しいユーザーからはうざがられる可能性もあるので
ケースバイケースで利用していきましょう。
（右クリックなどで自分で別窓表示を実行することもできるので）

このリンクをたどらないnofollowタグ

「 rel="nofollow"」「 rel="nofollow noopener"」

「nofollow」は、「このページのリンクをたどらない」や「このリンクをたどらない」
といった指示を検索エンジンに与える手段の1つです。

(Google web master ガイドラインより）

このnofollowタグの意味は、サイト上に特定のウェブサイトへのリンクを貼った場合、
通常だと、検索エンジンのクローラーはそのリンクを辿って
リンク先ウェブサイトを訪問するのですがnofollowタグを挿入しておけば、
クローラーが、そのリンク先に訪問するのを無視します。

表記方法としては以下のような記述となります。

<a href="https://support.google.com/webmasters/bin/answer.py?hl=ja&answer=96569" target="_blank" rel="nofollow">Google web master ガイドライン</a>

上記のように記述していきます。
半角スペースが記述の頭に必要になるのが注意です。

これらのHTMLタグを使う場合は、
それぞれを利用する意味をよく考えて使う必要があります。

アフィリエイトリンクに使うsponsoredタグ

「 rel="sponsored"」

「nofollow」属性も加えて同時に記述も可能。
「 rel="noffolow sponsored"」という記述も可能です。

アフィリエイトリンクや広告リンクに使用を推奨されているタグです。
（Googleが推奨）

リストタグulとolの使い方

「リストタグulとol」は箇条書きリストなどに使用するhtmlタグです。

「ul」（・のリストタグ）
「ol」（番号付きリストタグ）

上記のような区別があります。
箇条書きのリストタグはHTMLを整理する意味があるので
ただ単にそのままキーワードを並べるよりページのHTML記述が
検索エンジン対策上有利となります。

ただそのまま以下のように記述するよりも最適化されています。

有名プロレスラー一覧
・アントニオ猪木
・ジャイアント馬場
・大仁田厚

上記のように「・」などで直接記述するよりも
「ul」リストタグを使って記述した方が、検索エンジン上有利です。

「ul」タグの使用方法

有名プロレスラー一覧

• アントニオ猪木
• ジャイアント馬場
• 大仁田厚

上記のような場合は以下のようにリストタグ記述します。

有名プロレスラー一覧
<ul>
<li>アントニオ猪木</li>
<li>ジャイアント馬場</li>
<li>大仁田厚</li>
</ul>

ちなみにキーワード部分を太文字にする場合は、以下のような記述となります。
<ul>
<li><b>アントニオ猪木</b></li>
<li><b>ジャイアント馬場</b></li>
<li><b>大仁田厚</b></li>
</ul>

「ol」タグの使用方法

有名タレント一覧

1. 田原俊彦
2. 近藤真彦
3. 野村義男

上記のような場合は、以下のように記述します。

有名タレント一覧
<ol>
<li>田原俊彦</li>
<li>近藤真彦</li>
<li>野村義男</li>
</ol>

ちなみに太文字にする場合は、以下の記述となります。
<ol>
<li><b>田原俊彦</b></li>
<li><b>近藤真彦</b></li>
<li><b>野村義男</b></li>
</ol>

ウェブ上にhtmlタグを表示させる場合・特殊文字

通常HTMLタグで使用される「<」「>」「/」「=」「”」などをそのまま記事ページで使用すると、
インターネットブラウザがタグと誤認してしまい、テキストとして表示できません。

そのような特殊文字をWEB上で表示する記述を以下に記載します。

• <は、&lt;
• >は、&gt;
• "は、&#34;

それぞれ上記のように記述すると表示されていきます。

ショートコードなどで使用するなどをそのまま記述すると
ブラウザ上にはテキストとして表示されないですが、

[html]と”[“を2つ重ねて書けば、
表示されたりします。

注意事項

上記htmlタグを、コピー・ペーストでそのまま使う場合、
「”」の部分が、ウェブの表記の特性上全角に変換されていますので、
記述する際に、その部分を半角に変更して下さい。
2013年7月19日更新で特殊文字記述に変更しました。
そのままコピペで利用できます。