ワードプレス文字のサイズと色の変更方法

ワードプレス文字のサイズと色の変更方法

ここでは文字のサイズと色の変更方法など文字装飾について記載しておきます。文字の色や大きさなどスタイルシートを使った変更方法もありますがここでは最もシンプルな方法を記載しておきます^^また見やすいように一覧形式でご紹介しておきますので必用なものだけご利用下さい^^

文字の色を変える

文字の色を変える場合には「font color=」タグを使って色を指定します。

赤<font color="red">赤</font>
<font color="blue">青</font>
<font color="green">緑</font>
<font color="yellow">黄色</font>
<font color="Fuchsia">ピンク</font>

また次のようにカラーコードを指定する事でも変更が出来ます。

カラーコード「#DC143C」の色<font color="#DC143C">カラーコード「#DC143C」の色</font>



このカラーコードを変える事で沢山の色に変更する事が出来ます^^
ちなみにカラーコードはこちらのサイトがとても見やすいですよ^^

カラーコード表

文字のサイズを変える

文字のサイズを変えるにはスタイルシートを使った%での変更方法などもありますが
ここでは簡単に出来る「font size=」タグを使った大きさを指定方法を紹介しておきます。
サイズの大きさは数字の1~7までで数字が大きいほど大きな文字になります。

フォントサイズ1 ⇒<font size="1">フォントサイズ1</font>

フォントサイズ4 ⇒<font size="4">フォントサイズ4</font>

フォントサイズ7 ⇒<font size="7">フォントサイズ7</font>


その他文字の装飾


文字を太文字にする  ⇒<b>文字を太文字にする</b>
文字を斜体にする ⇒ <i>文字を斜体にする</i>
文字に取り消し線を付ける ⇒ <del>文字に取り消し線を付ける</del>
文字に下線を付ける ⇒ <u>文字に下線を付ける</u>
ノート風の下線を付ける ⇒ <font style="border-bottom: 1px dashed">ノート風の下線を付ける</font>
文字に背景色を付ける ⇒ <font  style="background-color:#FFFF00">文字に背景色を付ける</font>
(背景色はカラーコードで指定)

上記でご紹介したタグを組み合わせる事で色々な文字の装飾が出来ます^^
赤い文字で太文字にする ⇒ <font color="red"><b>文字を太文字にする</b></font> フォントサイズ4の太文字で赤にする ⇒ <font color="red" size="4"><b>フォントサイズ4の太文字で赤にする</b></font> 文字に背景色を付け下線を付ける  ⇒ <font style="background-color:#FFFF00"><u>文字に背景色を付け下線を付ける</u></font>



これでワードプレスを使ったサイト作成における文字の装飾は
ほぼ使いこなせるかと思います^^

次は、ここまで覚えたものを活用して作成した
簡単な広告ページの見本をお見せしておきます^^

詳しくは次の「PPC広告ページ見本と作成」でお話してまいります^^

« ワードプレス画像の挿入とサイズ、配置の編集方法 ←前に戻る | 次に進む→ PPC広告ページ見本と作成 »