こんにちは。村田です。
アフィリエイトを始めたばかりの頃や、ネットで何か情報発信をしていこうと思ったばかりの頃というのは、記事を投稿するのでも一苦労・・・
なんてことはよくあると思います。
ネットでなんかしらの記事を書いていくのであれば、基本的に文字の装飾は必須です。文字がまったく装飾されていない文章というのは、読みにくくなる可能性が極めて高いです。
ただ、『どうやって装飾したらいいのか分からない』という声も非常に多く聞きます。
そこで、今回は僕がアフィリエイトサイトやブログを運営する上で使っている最低限知っておいた方がいいと思った文字装飾タグを一覧で紹介します。
HTMLやCSSは本当は理解した方が良いのですが、初めのうちに理解しようとすると挫折するので、とりあえずコピペして使えるようになりましょう。
それからでも理解は遅くありません。
目次
HTMLタグの基本
大前提として、HTMLタグは装飾したい部分の前後を囲むことで適用されるということを知っておきましょう。
他の難しいことは知らなくてもいいので、とりあえずこれだけを押さえます。
そして、HTMLタグは、＜＞のようなカッコを使って記述されるものです。
囲い方は、＜＞をはじめとして、終わりを＜/＞という風に記述します。
文字サイズの変更
文字のサイズを<font size="5">大きく</font>する。
size=のあとに続く数字は、1～7の整数値です。
3をベースの大きさとして、数字が小さくなれば文字も小さく、数字が大きくなれば文字も大きくなります。
上記のfontタグを使うのが最も簡単で一般的な方法ですが、使っているテンプレートによっては正確に反映されないことがあります。
これはテンプレートのなかに初めから組み込まれているCSSなどが原因です。
原則として、HTMLよりもCSSの指示が優先されますので、文字に対してCSSによる指定がなされている場合には反映されません。（例えば、記事に書く文字サイズはすべて12pxとテンプレートのCSSファイルで指定されているなど）
この場合には、CSSで記述すると反映されます。
文字のサイズを<span style="font-size: 170%;">大きく</span>する。
style=の後がCSSの記述です。
100%をベースの大きさとして、縮小したい場合には100%以下の数字を、拡大したい場合は100%を超える数字を記述します。
文字の太さや色を変える
太さを変える
文字を<b>太く</b>する。
strongタグとの使い分けなどがよく議論されますが、見た目上太字にしたいという場合にはbを使っておくのがもっともシンプルで簡単です。
文字の色を変える
文字の色を<font color="red">赤く</font>する。
文字の色はfontタグを使って記述します。
color=の後に英語で色の名称を記述するか、もしくは色のコードを記述します。
色のコードというのは、『#000000』のようなシャープと数字で構成されている文字列のことです。（ちなみに#000000は黒色）
色のコードはWEB色見本 原色大辞典のようなサイトで検索することができます。
ちなみに、文字の色に関しても反映されない場合は以下のように記述すると反映されることがあります。
文字の色を<span style="color:red;">赤く</span>する。
下線や打消し線
打消し線
文字を<s>打ち消す</s>
文字を打ち消すために使うタグです。
すでに正確ではない情報や、間違っている情報に対して使うようにします。
下線
文字に<u>下線を引く</u>
いわゆるアンダーラインです。
太さを変えたい場合には、基本的にCSSを使って記述します。
例えば、
文字に<span style="border-bottom: 2px solid;">下線を引く</span>
のような感じです。
2pxというところの数字を大きくすれば太くなりますし、その後のsolidをdottedにすれば点線になります。
蛍光ペンのような装飾
文字に<span style="background-color:#ffff66;">蛍光ペン</span>を引く
蛍光ペンを引いたように装飾するためには、CSSを使って、background-colorを指定します。
文字の色と同様に、色のコードか色の名前を英語で記述することで反映されます。
ちなみに、以下のように文字の下半分だけを装飾すると、少しオシャレな蛍光ペンになります。
文字に<span style="background:linear-gradient(transparent 60%, #ffff66 60%);">蛍光ペン</span>を引く
タグは重ねて使えます
色んな文字装飾を見てきましたが、これらのタグは重ねて使用することができます。
例えば、赤い太文字にしたいのであれば、
文字を赤太文字にする
文字を<font color="red"><b>赤太文字にする</b></font>
というような感じです。
HTMLタグだけでも装飾することはできるけどSEO的にはCSSも使った方が良い？
ここではCSSもstyle属性を使ってHTMLに記述しましたが、SEO的にはCSSファイルを用意し、HTMLタグでの記述は最小限に抑えたほうがいいといわれています。
HTMLでの記述はシンプルな方が良いということですね。
ですので、WordPressを使っている場合にはCSSファイルに新しくコードを追加し、それをHTMLで呼び出すという手順になります。
つまり、CSSファイルとHTMLファイル２つの編集が必要になるということです。
ですが、
『何いってんの？』
『言ってる意味わかんないんだけど』
って方は特に気にせず、上のタグをコピペして使ってください。
CSSへ記述したいという方は、以下を参照してください。
CSSファイルに詳細を記述し、HTMLで呼び出す方法
それでは最後に、CSSファイルに追記して文字装飾を行う方法を解説します。
すべてをCSSで書くことも出来ますが、HTMLで書いたほうが明らかに簡単なものもありますので、このページでCSSを使って記述したもののみ取り上げます。
少しでもSEOのことを考えて、HTMLの記述をシンプルにしたいと考えている人や、少し慣れてきてCSSファイルもいじれるようになったという人はやってみてください。
文字サイズ
文字のサイズを<span style="font-size: 170%;">大きく</span>する。
これをCSSを使って記述すると・・・
CSSファイル
.test01 {
font-size:170%;
}
HTML記述
文字のサイズを<span class="test01;">大きく</span>する。
文字の色を変える
文字の色を<span style="color:red;">赤く</span>する。
これをCSSで記述すると・・・
CSSファイル
.test02 {
color:red;
}
HTML記述
文字の色を<span class="test02;">赤く</span>する。
蛍光ペン
文字に<span style="background-color:#ffff66;">蛍光ペン</span>を引く
これをCSSで記述すると・・・
CSSファイル
.test03 {
background-color:#ffff66;
}
HTML記述
文字の色を<span class="test03;">赤く</span>する。
文字に<span style="background:linear-gradient(transparent 60%, #ffff66 60%);">蛍光ペン</span>を引く
これをCSSで記述すると・・・
CSSファイル
.test04 {
background: linear-gradient(transparent 60%, #ffff66 60%);
}
HTML記述
文字に<span class="test04">蛍光ペン</span>を引く
まとめ
いろいろ書きましたが、初めはCSSの記述もHTMLに直書きして良いと個人的には思っています。
何故なら、初めのうちはテンプレートもころころ変える傾向にあるからです。
CSSファイルに記述をすると、テンプレートを変えたときにすべてが適用されなくなってしまいます。
これはテンプレートを変えたことによってCSSファイルも変わってしまうからで、当たり前のことなのですが、初めのうちは結構混乱します。
だからこそ、あまりSEOとかHTMLの記述に神経質にならないでHTMLに直書きで良いと思います。
正直、SEOに影響があるといっても個人的には誤差の範囲だと思ってます。
⇒
