ブログを書く時によく使うCSSの記述方法｜アフィリエイト初心者でもパワーブログで販売力アップ

ブログシステムは従来から難関であったHTMLとCSSの知識が
なくても自分のサイトが作れる優れものなんですよねぇ…

知らなくてもブログを書くのにも何不自由なく出来るわけだから
覚える必要もないと思ってる人が多いのかも知れません。

だけど、アフィリエイトをやってるなら知らないよりは知ってたほうが
何かと便利なHTMLとCSSの記述法なのですが…

知りたい覚えたいって思いますか…

あなたはパワーブログを作りたいと思ってるわけですよね…
それじゃ少しずつ簡単なものから覚えていきましょう。

よく使う文字サイズと太さや色の指定方法

ブログの入力システムは基本的にビジュアルモードとHTMLモードがあって
どちらかのモードで書くわけなんですけど…

無料ブログサービスだとあまり気にしないで入力出来るように
なってますよねぇ。まっ、ここに落とし穴があるわけなんですけど…

ファンブログの場合は「改行を有効にする」にチェックを入れてると
記事にテーブルタグなんて使ったらとんでもないことになってしまいます。（笑

そして、表の線の色はCSSで指定してあるので直接指定しなきゃいけない…
結構面倒な所もあるんですょ…実際には。

便利だと思ってる文字の設定なんですが、これが不要なタグを増やしてるんですょ…

どういう事かと言うと…

上記に赤の太文字で書いてる文字の設定なんですがこれをCSSで指定すると…

<span style="color:#CC0000;font-weight:bold;">文字の設定</span>

これでいいんですけど、便利だと思われてる文字設定で指定すると…

<span style="color:#CC0000;"><span style="font-weight:bold;">文字の設定</span></span>

スパンタグを余分に作ってしまうんですょ…（；´Д｀）
フォントサイズまで変更したらスパンタグが３つになってしまう…

そんなに要らないのに無駄な記述をしてるんですょ…実際には。

まっ、検索エンジンがどのように評価するかは知りませんが
出来るならばスマートに書きたいと思うのは私だけかなぁ…

実際にCSSで記述してみましょう

■ フォントカラーを指定する
<span style="color:#CC0000;">文字の設定</span>
色を指定する場合、プロパティの値は他の指定方法もあるのですが
オーソドックスな16進数で指定したほうが良いかと思います。

■ フォントサイズを指定する
<span style="font-size:14px;">文字の設定</span>
サイズを指定する場合、プロパティの値に使う単位にも色々とあります。
私は基本的にピクセル(px)を使っています。

■ フォントウェイトを指定する
<span style="font-weight:bold;">文字の設定</span>
フォントウェイトを指定する場合、プロパティの値はnormal , lighter , bold , bolder があります。
実用的に使うのは bold ではないでしょうか…

■ 文字の背景色を指定する
<span style="background-color:#FFFF44;">文字の設定</span>
ラインマーカーを引いたように文字に背景色を指定できます。

記事を書くときに覚えておけば役に立つCSSの指定方法です。
上手に使いこなして文章を読みやすく書くこともユーザビリティのひとつではないでしょうか…

編集後記

HTMLやCSSを最初から勉強するとなると何をどう勉強すれば良いのか
わからない人が多いと思います。

難しく考えないで、記事を書く場合によく使う記述法から覚えましょう。
理屈は後から徐々に分かると思います。

今回ご紹介した記述法の中で、<span 〜〜 > という記述の仕方をしましたが
これは文章の中の一部分を変えたい時に使う記述の仕方なんです。

ブログ記事を書く場合に記事部分は既にひとつの段落になっていて
その段落を複数の段落に分けて書く場合もあるし、無い場合もあります。

段落のCSS設定はスタイルシートで大まかに設定してあるので、その段落の中で
ポイント的に変更したい箇所を今回の記述方法で指定します。

ファンブログでHTMLモードで書く場合は、「新規記事を作成する」の左側にある
オプションの所に「HTMLで記事を書く」にチェックが入ってるか確認して下さいね。

今回ご紹介したCSSをHTMLで記述する方法は初心者のあなたにも
出来ると思うので、少しずつ書き方を覚えていきましょう。（´∀｀）