top3

アフィリエイトでHTMLタグを使い文字に色をつけるなど装飾する方法

Pocket

2118589853_61142eab2e
記事を書くときには読者が文章をよみやすくするための工夫をしなければなりません。そのために一番手っ取り早いの、文字を装飾したり、目立たせたりすることです。


ワードプレスのデフォルトのエディタ画面を使うのはもちろんですが、それ以外にも最低これだけは知っておきたいHTMLタグを紹介したいと思います。


AddQuicktagというプラグインを併用することで、スムーズにタグを使うことができます。

※HTMLタグを記事内に表示させる場合はこちらのサイトでタグを変換すると便利です。

※今回ご紹介するタグのすべては、大文字の「”」となってますが、小文字の「”」に変えてからお使いください。



記事を見やすくするためのHTMLタグ


1,色を付ける

<font color=”文字の色“>言葉</font>

「文字の色」に好きな色のHTMLをいれ、「言葉」に色を付けたいと言葉をいれます。文字の色はコチラのサイトを参考にしてください。


例:<font color=”#ff0000″>赤</font> ⇒ 

  <font color=”#0000ff”>青</font> ⇒ 

  <font color=”#008000″>緑</font> ⇒ 


この色を使ったほうが良いという決まりはありませんが、注意や危険を促す「赤」を使っていればOKでしょう。もちろん使ってみたい色がある場合は、それを使ってみましょう。



2,文字の大きさを変える

<font size=”数字“>言葉</font>

「数字」には大きさのサイズを、「言葉」には大きさを変えたい文字を入れます。


例:<font size=”1″>言葉</font> ⇒ 言葉
  <font size=”2″>言葉</font> ⇒ 言葉
  <font size=”3″>言葉</font> ⇒ 言葉
  <font size=”4″>言葉</font> ⇒ 言葉
  <font size=”5″>言葉</font> ⇒ 言葉
  <font size=”6″>言葉</font> ⇒ 言葉
  <font size=”7″>言葉</font> ⇒ 言葉


同じサイズの文字がズラーっと並んでいる中に、サイズが違う文字があると、どうしてもそこに目が言ってしまいませんか?文章を読ませる工夫として使いたいところですね。



3,文字の背景に色をつける

<font style=”background-color:″>言葉</font> 

「色」に好きな色のHTMLを入れ、「言葉」に背景色を入れたい言葉をいれます。


例:<font style=”background-color:#FFFF00″>黄色の背景色</font> 
  ⇒ 黄色の背景色

  <font style=”background-color:#ff0000″>赤の背景色</font> 
  ⇒ 赤の背景色

  <font style=”background-color:#0000ff”>青の背景色</font> 
  ⇒ 青の背景色



※ちなみに僕が使っているこの色は、<span class=”box-yellow”>この色</span>というタグですが、これは「賢威」というテンプレートを使っているからこそ使えるタグです。



背景色は文字の色を変えるよりもパンチが効いてる印象ですよね。使っている人に多いのは、やはり「黄色」でしょう。


「黄色と黒」を危険を促す色に最も適しているので、<strong>タグと併用するとすごく目立ちます


単色だと色が強すぎるので、以下のように淡い色を使ったほうが読みやすいと思いますよ。

例:<font style=”background-color:#fffacd”>lemonchiffon</font>
  ⇒ lemonchiffon

  <font style=”background-color:#e6e6fa”>lavender</font> 
  ⇒ lavender

  <font style=”background-color:#ffc0cb”>pink</font> 
  ⇒ pink




4,アンダーライン(下線)を付ける

<u>言葉</u>

例:<u>アンダーライン</u> ⇒ アンダーライン


色を付ける人に比べると、使っている人は少ないと思うのでオススメです。



5,アンカーテキスト(nofollow属性)

<a href=”URL“>言葉</a>

「URL」に飛ばしたいリンク先を、「言葉」には任意の言葉を。

例:<a href=”http://www.yahoo.co.jp/”>yahoo</a> ⇒ yahoo


リンクを飛ばす場合は上のような、アンカーテキストという形をとりましょう。


また、このままだとリンクジュース(リンク先に自分のパワーを与えてしまうようなイメージ)を与えてしまうので、それほど防ぐためにnofollow属性(rel=”nofollow)をつけましょう。


<a href=”http://www.yahoo.co.jp/” rel=”nofollow”>yahoo</a> 
  ⇒ yahoo


見た目はyahooにリンクを送っているだけですが、rel=”nofollowをつけているか、つけていないかで意味合いが変わっています。


参考になった記事にお礼の意味をこめて、リンクジュースを送るという考えは人間関係としてやっぱり気持ちがいいですが、とりあえずリンクを送る場合はrel=”nofollowをつけようかな、という考えでも悪くないと思います。

(面倒な方は<a href=”リンク先” rel=”nofollow”>言葉</a>を使えばOKです)



6,見出しを付ける

<h3>言葉</h3>


記事内に見出しを付けることでアクセントができ、ブロックごとにまとまった文章を作ることができます。


<h3></h3>の他に<h4></h4>も使えるようになると、さらに細かくブロック分けをすることができますね。



タグの使いすぎには注意をする!

以上の6つを使えるようにすれば、十分読みやすい記事が書けるんじゃないかなと思います。


ただし、これらを使う場合は最低限にとどめましょう。


よく学生の頃に大事な箇所にマーカーをつけようとして、気がついたら文章のほとんどのページにマーカーをつけてしまったという経験がありませんか?(笑)


あくまでも目立たせるために使用していることなので、完成したらプレビュー画面で確かめる、というクセをつけておきましょう。


2 Responses to “アフィリエイトでHTMLタグを使い文字に色をつけるなど装飾する方法”

  1. […] たいところです。 ユーザーが「おぉ!」と思う言葉、読んでみたいと思われる言葉…このあたりを意識しておくことにしましょう。 見出しの作り方は、こちらを参考にしてください […]

  2. […]          (参考すると良いサイトはこちら) […]

コメントを残す

サブコンテンツ