こんにちは、クスクスです。
実践２ヵ月のこの頃、ちょっとWEBでの文字修飾方法について調べたので、書いてみます。
はじめに言っておきますが、確かにサイトの色調、ボタンの色・サイズ・形、目に止まりやすいテキスト修飾というものはあります。
が、しかし、いくら飾ったところで元の記事が検索ユーザーさんの心に響かないものだったら結局読まれないので、飾るよりも中身の方がずっと大切です。
……とはいえ、（私のように）どうしてもちょっと修飾したくなる人もいると思いますので、よく使いそうな部分だけざっくりと解説してみますね。
とりあえず、まずは基本的な
テキスト文字を太字にする
テキスト文字のサイズを変える
テキスト文字の色を変える
テキスト文字に蛍光ペンのように色をつける
このあたりが、よく使われるところかな、と思いますので、この記事ではそのやり方を解説してみます。
今さら聞けない、タグってどう使う？
そもそもの基本知識として、htmlファイルで「この部分はこういう意味ですよ」という命令を施すには、当該文字列を「タグ」というもので囲みます。
<タグ名>文字列</タグ名>という感じです。
「/」が付いたタグ（</タグ名>）は、タグの命令を反映するのはここまでですよ、という指定（閉じタグ）です。
基本は<タグ名></タグ名>のセットで用いられます。
（ただし、改行を表す<br>や画像挿入に使う<img>などは、閉じタグなく使用できます。）
たとえばhtmlファイルに
と書くと、web上では
というように見えます。
ここまではいいでしょうか？
まあ、下に書く指定をコピペするだけでも装飾できるんですけど、どうやら反映させたい部分を命令のタグってので囲めばいいんだな、となんとなくでも理解いただけたらと思います。
現在の主流？外部CSSってナニ？
で、現在の主流の方法としては
htmlとは別に外部にCSSファイル（拡張子.cssのファイル）を用意してそのCSSファイルにスタイル情報をまとめて記述。
htmlファイル内の、スタイルを適用したい場所に「class」指定などを記述して読み込む。
という方法が取られています。
CSS？スタイル？class？？ 日本語でおk？
となったかもしれませんが、実はそれほど複雑な話ではないですので、ちょっとだけ付き合ってください。
この場合の「スタイル」というのはWebサイトのスタイル……レイアウト、見た目全般のことです。
見た目をどういう風にするか、定義を書きこんだものがスタイルシートです。
CSSとは、「カスケーディング スタイル シート」の略で、うーん、「みんなで使えるようにしたスタイルシートだよ」って感じでしょうか。
外部CSSとリンクしたすべてのページで、このCSSファイルに定義されたスタイルを読み込んで利用することができます。
何百ページもあるサイトでも外部CSSの記述をちょっといじるだけですべてのページの見た目を修正できる……というのが売りらしいんですが、まあ正直言ってPPCアフィリエイトでペラページを作っている分にはあまり関係ありません（笑）
では次に、「class」とは何でしょう？
名前の通り学校のクラスやグループ分けをイメージしてください。
外部CSSに、「赤文字クラスの奴はこういう装飾」「大文字クラスの奴はこういう装飾」などと定義しておいて、
htmlの本文（<body>～</body>内）の適用したい箇所にタグで「所属クラス」を指定することで、外部CSSに記述した装飾を適用することができます（WordPressの場合は、タグは「テキストモード」で記述します）。
テキストに対して
「キミは赤文字クラスね」
「キミは大文字クラスね」
「キミは……赤文字と大文字の両方のクラスに入ってていいや」
などと振り分けるわけです。
例を挙げると、外部CSSファイルに
.red {color:red ;}
.xl{font-size: 150% ;}
.marker {background-color:#ffff66;}
などと定義します
（意味は、「red」クラスの文字は赤くなってね、「xl」クラスの文字は1.5倍のサイズになってね、「marker」クラスの文字の後ろは#ffff66っていう色で塗りつぶすよ、という内容です。
「red」「xl」といったclass名は、自分のわかりやすい名前をつけるのでOKです）。
次に、html内で
<p class="red">
と記述すると、外部CSSの.redの指定を読み込んで、</p>で閉じるまでのその段落（パラグラフ）を赤字にします。
</p>
<div class="red xl">
</div>
（↑class名は半角スペースで複数記述して適用できます。）
これが基本的な適用方法です。
CSSに貼るだけですぐ使える参考例
私の場合、よく使うスタイル指定をテキストファイルにまとめて保存しておき、どのテンプレートを使う時にも追記して使うようにしています。
私がよく使う指定は
プチ解説：大体分かると思いますが、font-sizeが文字サイズ（正確には高さ）の指定です。％指定以外に、基本で見ているフォントサイズを1とした「em」で指定（1.５em、0.8emなど）や、ピクセル数指定の「px」（24px、10pxなど）で指定することもできます。
どれがいいのかというと……うーん難しいです。古いブラウザではpx指定だとブラウザの表示を拡大、縮小して見ているユーザーさんに意図通りのサイズで見せられないという話があったので％にしていますが、現状使われているブラウザでは特に問題なさそうな話も聞きます……お好みで。
background-color:は、後ろに「#○○○○○○」というカラーコード、ないし「yellow」「pink」といったカラーネームを付けることで、その色で背景を塗りつぶします。
太字は、<strong></strong>タグでも出来るのですが、<strong>は検索エンジンに「ここ重要っすよ！」と教える役目も（若干）担っているらしいので、キーワード的なものは<strong>で囲み、別にキーワードじゃないんだけど見た目的に太くしたいだけ、という場合はfont-weight: boldを使うようにしています。
プチ解説：中央寄せか、右寄せか、左寄せか、という指定。画像の配置にも使えます。
プチ解説：<br><br>など、改行タグをつなげて行間を空けるのは、構造的にはよろしくない……らしいです。
別にPPCアフィリエイトサイトではgoogle様の評価は関係ないので改行タグをつなげて見た目整ってればそれでいい、という考え方もあるのですが、一応行間調節の指定を使っています。
margin-topは上の行とどれだけ離すか（1.5emなら1.5文字分の高さ）、margin-bottomは下の行とどれだけ離すか、です。
<div class="mt2 mb2">とすれば上下の行と2文字分≒2行分空けることができます。
実際の適用の仕方
お使いのテンプレートのCSSファイル（WordPressなら「外観」＞「テーマの編集」＞「styleseet」等）の末尾、ないし文字修飾関連と思しき箇所に、上に書いたようなスタイル定義を追記してアップロードします。
そしてhtmlの装飾したい箇所に
<p class="class名">段落丸ごと適用したい場合</p>
<div class="class名">固まり丸ごと適用したい場合</div>
<span class="class名">改行せず一部だけ適用したい場合</span>
などとclass指定をして、適用させましょう。
（<p>と<div>にも微妙な使い分けがあるのですが、また別の機会に。）
外部CSSを用いない方法
classで読み込むのではなく、htmlファイルに直接記述する方法もあります。
htmlファイル内の、スタイルを適用したい場所に直接記述する。（その箇所にだけ適用）
<span style="font-size:150%; color:red;">
その場所だけ装飾
</span>
htmlファイル内の<head>～</head>の間にスタイル指定を記述する。（そのページ内の条件にあった箇所すべてに適用）
こちらは使用頻度低いと思うので省略。
よく使う修飾は外部CSSの方法で記述し、イレギュラー的な（そのページ、ないしその箇所だけの）スタイル記述は上の方法を使う、といった感じでしょうか。
同じclass名に複数のスタイル指定が存在した場合、こうした個別記載の指定の方が優先されるなど、いささかややこい優先度決定のルールもあるのですが、複雑なので割愛します。
もしうまく指定が適用されていない、という時にはそういった可能性もある、くらいに覚えておいてください。
イラストレーターとして
繰り返しになりますが、細かい装飾や構造うんぬんよりも、大切なのは内容です。
SEO的には構造がしっかりしていた方が評価が上がると言われますが、<br><br><br>みたいなサイトでも検索上位にあることもよくあります。
やはり検索エンジンの評価も中身がメインで、装飾や構造はおまけのようなものなのでしょう。
コーダーのような人は「美しいコード」にこだわったりしますが、正直言って売上とは関係ないと言っていい部分です。
こだわるのが楽しくてしょうがないならばそれもいいと思いますが、アフィリエイターとしての本質とは全然別のものです。
テンプレートを売りたい人は「このテンプレートにしただけで売り上げが2倍に！」みたいなことを書きますけど、美味しい料理をより一級品に見せてくれる、というようなことであって、まずい料理を美味しくしてくれるわけではありません。
アフィリエイターが気にすべきなのは、それがユーザーさんの「読みやすさ」につながっているか、紹介するものをより魅力的にわかりやすく説明する役に立っているかということ、あとは修正がしやすいかどうかということです。
……なーんてえらそうなことを言いながら、職業柄でしょうか、私は「どうも見栄えと内容がしっくりしない」ということが気になってしまうし、単純に調べてカスタマイズするのが楽しいんですよねーー。（笑）
まあ、多分に趣味的な領域です……。
ただし、
ユーザーさんがすっと入ってこれる（違和感を感じない）色味、
インパクトや共感を呼ぶヘッダー画像、
わかりやすく不快でないボタン画像、
といったものはユーザーさんの反応にかなり影響を及ぼしますので、イラストレーター兼アフィリエイターという視点からみるそういった部分も、折に触れ語っていきます。
