ブログでよく使うHTMLタグとWordPressの標準タグ解説

ハンドサイン

ブログを書くときに使われる HTML タグは、どんなものがあるんだろう? WordPress の標準で付いているタグも何に使うか分からなくて、触った事がないって人も多いんじゃないかな?

って事で、今回はブログなどでよく使う HTML タグと WordPress の標準で付いている HTML タグの解説をしよう。もちろん無料ブログでも使えるし、文章の表現方法も広がるからコピー&ペーストして使ってみてね。

 

文字の装飾

文字を太字にするhtml

文字を太字にして、重要な部分を強調するタグは <b> タグと <strong> タグがある。

<b> は見た目のみを太字にし、<strong> はキーワード的にも重要な文章だとクローラに伝えるタグとなる。

ただし、<strong> を多用するのは考えもの。<strong> の使い過ぎでペナルティーを受けている事案もあるから、多く使う場合や、見た目だけ太字にする場合は <b> を使おう。

因みに WordPress では「b」というボタンがあるけど <strong> のタグが付くよ。

<b>ここが太字になる</b>
<strong>ここが太字になる</strong>

 

文字を斜体にするhtml

文字を斜体にするタグは <i> タグと <em> タグがある。

<i> は見た目のみを斜体に<em> はキーワード的にも重要な文章だとクローラに伝えるタグとなる。

斜体にする <em> と太字にする <strong> は、SEO的にも強調するキーワードとなるが<strong> の方が <em> より強い強調とされている。(どちらにしろたいした効果ではないんだけどね)

因みに WordPress では「i」というボタンがあるけど <em> のタグが付くよ。

<i>ここが斜体になる</i>
<em>ここが斜体になる</em>

 

文字に色をつけるhtml

文字に色をつける場合は <font color> タグを使い、色の指定は色の名前かカラーコードを入力するんだ。

例えば赤色にしたい場合は <font color=”red”> か、<font color=”#ff0000″> と表記する。

因みにリンクの色は基本的に青色だし、青色の文字装飾はリンクと間違えてしまうから控えた方が良いね。

<font color=”red”>ここが赤色になる</font>
<font color=”#ff0000″>ここが赤色になる</font>

 

※カラーコードを調べられるサイト

html-color-codes色の見本やカラーピッカーから、カラーコードを取得できるサイト。

html color codes

 

文字サイズを変えるhtml

文字サイズの変更は <font size> タグを使おう。数値は1~7まで指定できて、3が標準となる。

例えば、font size=”1″ font size=”3″ font size=”5″ …という感じ。

<font size=”5“>ここのフォントサイズがになる</font>

 

文字に下線を引くhtml(強調)

文字に下線を引く場合は <u> タグを使おう。強調の意味で使うんだけど、リンクにも下線が引かれるから、まぎらわしい使い方はNGだね。

例えばこんな感じは、もろにリンクになってしまう。

装飾の多い文章は読みづらいし、僕が文字の強調するときは <b> か <strong> をメインに使うから <u> はあまり使わないかな。

<u>ここに下線が引かれる</u>

 

文字に下線を引くhtml(追記)

記事を公開した後、時間が経ってから追記する場合は <ins> タグを使おう。見た目は下線が引かれるだけなんだけど、内部的には後から追加した部分だと示す形になる。

また、WordPress の「ins」ボタンでは datetime の属性が付いている。
<ins datetime=”2014-05-15T07:51:24+09:00“>
表記はこんな感じ

追記した日にち時刻タイムゾーン(日本は+09:00)を入力すると、その時に追記した事が内部で分かるようになる。

<ins>ここに追記の文章を書く</ins>

<ins datetime=”2014-05-19T07:51:24+09:00″>2014年5月19日7時51分24秒タイムゾーン+9時間で追記</ins>

 

文字を打ち消すhtml

文字を打ち消すときは <del> タグか <s> タグを使う。<del> は取り消し、言い直しのときに使うかな。例えば、「君は集中力がない切り替えが早いな」といった使い方。

<s> は時間の経過などで、正しかった情報が正確ではなくなった時や関連性がなくなった時に使うタグ。例えば、「SEOではツールでリンクを増やすだけで簡単に検索順位を上げられますと、現在ではペナルティーを受けてしまいます」…という感じ。

<s>取り消し、言い直しの文章</s>
<del>正確性、関連性がなくなった文章</del>

また、WordPress の「del」ボタンでは、先程説明した「ins」ボタンと同じく datetime の属性が付いているよ。

 

リンクを貼るhtml

通常の貼り方

リンクを貼る場合は <a> タグを使い、リンク先の URLリンク表示させるテキストを入力しよう。

<a href=”リンク先のURL“>リンク表示させるテキスト</a>

 

例えば、yahoo へのリンクを貼る場合は
<a href=”http://www.yahoo.co.jp/”>yahooのトップページへ</a>と、表記すれば yahooのトップページへ と表示される。

別タブでリンクを開くhtml

別タブでリンクを開く場合は <a> タグに target=”_blank” を挿入しよう。

<a href=”リンク先のURL” target=”_blank”>リンク表示させるテキスト</a>

 

リンクに吹き出しを挿入するhtml

リンクにカーソルを乗せると吹き出しで補足説明が出たりするよね。

これは <a> タグに title を挿入しているから。表記は以下の通り。

<a href=”リンク先のURL” title=”ここに補足説明を入力する”>リンク表示させるテキスト</a>

 

画像にリンクを貼るhtml

テキストリンクではなく、画像にリンクを埋め込みたい場合は、先程の「リンク表示させるテキスト」を画像にするだけで良い。画像を表示する HTML タグは <img src=”画像のURL” /> だから、表記は

<a href=”リンク先のURL”><img src=”画像のURL” /></a>

…となる。画像の alt 属性については次で説明するよ。

 

画像の表示

先程説明した通り、画像の表示は<img src=”画像のURL” />でできる。

でも、検索エンジンのクローラーは何の画像を使用しているのかまでは読み取る事ができないので alt 属性を使うと良い。alt 属性とは、何についての画像かを説明する部分になり、表記は…

<img src=”画像のURL” alt=”画像の説明を記述” />

…となる。

 

見出しを入れるhtml

見出しを入れる事で見やすいブログにできるし、SEO にも役立つ。

ブログテンプレートで見出しの装飾が違ったりもするけど、見出しを入れて、どこに何の情報があるか分かりやすくすると便利だね。

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>

 

箇条書きにするhtml

箇条書きにする場合は全体を <ul> タグ、または <ol> タグで囲い、一つ一つのリストを <li> で囲うように表記する。<ul> タグは並列表示、 <ol> タグは順序付きの表示となる。

<ul> の表記例
<ul>
<li>リンゴ</li>
<li>バナナ</li>
<li>イチゴ</li>
</ul>

  • リンゴ
  • バナナ
  • イチゴ

<ol> の表記例
<ol>
<li>起きる</li>
<li>歯磨き</li>
<li>朝ごはん</li>
</ol>

  1. 起きる
  2. 歯磨き
  3. 朝ごはん

 

引用文を挿入するhtml

引用文を挿入するときは <blockquote> のタグを使おう。 WordPress では「b-quote」のボタンだね。

このタグで囲んでいる部分は引用文とされ、ブログテンプレートによっては背景の色が変わって引用部分と分かりやすくなったりもするね。

<blockquote>ここに引用文章を記入する</blockquote>

 

ソースコードを記入するhtml

僕はエンジニアではないのでそれほど使用しませんが、ブログにソースコードを記入する時は <code> タグを使います。

<code>ソースコードを記入</code>

 

続きを読む表示を入れるhtml

カテゴリーやタグ、アーカイブなどでジャンル分けされたログを一覧で表示している場合、記事の初めの抜粋文章が書かれているブログがあるね。設定方法は様々だけど「続きを読む」と、表示するには<!–more–> タグを使うと良い。

記事の頭から <!–more–> タグの部分までを抜粋して、続きを読むなどの記事へのリンクが貼られる形になる。

 

おまけ、タグ挿入が素早くできるWPプラグイン

ボタン一つで面倒な HTML タグを挿入してくれるプラグイン、Add Quicktag 。 WordPress ユーザーなら必ず入れているプラグインなんじゃないかな?

AddQuicktagプラグインの設定から、使用頻度の高い HTML タグを登録しておくだけで、投稿画面に HTML 挿入ボタンが追加されるスグレモノ。
Add Quicktag

 

サブコンテンツ
オンラインカジノの始め方

コメントを残す

このページの先頭へ