WordPress投稿時の文字サイズ・色HTMLタグでの変更方法

HTML

2013.05.082021.03.12

WordPressでのブログ記事投稿時に、
文字サイズや文字色を変更して文字装飾することができます。

使用しているWordpressテンプレートごとにも独自設定あったり（ショートコード）、
WordPressのビジュアルエディタでも変更できますが、
タグを使った基本的なWordpressでの文字装飾を解説します。

テキスト文字の色を変更する

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

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

カラーコード「#DC143C」の色
⇒ <span style="color: #dc143c;">カラーコード「#DC143C」の色</span>

カラーコードを使うことによって、沢山の種類の色に変更する事が出来ます。
カラーコードは、こちらのサイトで確認できます。

参考：カラーコード表ウェブサイト

HTMLタグの組み合わせで文字装飾

赤い文字で太文字にする
⇒　<font color="red"><b>文字を太文字にする</b></font>

フォントサイズ４の太文字で赤にする
⇒　<font color="red" size="4"><b>フォントサイズ4の太文字で赤にする</b></font>

文字に背景色を付け下線を付ける
⇒　<font style="background-color:#FFFF00"><u>文字に背景色を付け下線を付ける</u></font>

文字を太文字にして背景色を付け下線を付ける
⇒　<font style="background-color:#FFFF00"><u><b>文字を太文字にして背景色を付け下線を付ける</b></u></font>

文字を赤太文字にして背景色を付け下線を付ける
⇒　<font color="red"><font style="background-color:#FFFF00"><u><b>文字を太文字にして背景色を付け下線を付ける</b></u></font></font>

テキスト文字のサイズを変更する

テキスト文字のサイズを変えるにはスタイルシートを使った％での全体での変更方法などもありますが、
部分指定では簡単な「font size=」タグを使った方法を解説します。

文字サイズの大きさは数字の１～７までとなっており、
数字が大きいほど大きなサイズになります。

フォントサイズ1　⇒<font size="1">フォントサイズ1</font>
フォントサイズ2　⇒<font size="2">フォントサイズ2</font>
フォントサイズ3　⇒<font size="3">フォントサイズ3</font>
フォントサイズ4　⇒<font size="4">フォントサイズ4</font>
フォントサイズ5　⇒<font size="5">フォントサイズ5</font>
フォントサイズ6　⇒<font size="6">フォントサイズ6</font>
フォントサイズ7　⇒<font size="7">フォントサイズ7</font>

その他の文字装飾HTMLタグ

文字を太文字にする ⇒ <b>文字を太文字にする</b>

文字を斜体にする　⇒　<em>文字を斜体にする</em>

~~文字に取り消し線を付ける~~　⇒　<del>文字に取り消し線を付ける</del>

文字に下線を付ける　⇒　<u>文字に下線を付ける</u>

ノート風の下線を付ける
⇒　<font style="border-bottom: 1px dashed">ノート風の下線を付ける</font>

文字に背景色を付ける
⇒　<font style="background-color:#FFFF00">文字に背景色を付ける</font>
（背景色はカラーコードで指定）

この箇所は薄い青色で囲んでいます。

⇒<div style="background-color:#EDF7FF;">この箇所は薄い青色で囲んでいます。</div>

水平線を引く

⇒<hr>

水平線の長さを変える

⇒<hr width=200>

水平線の色を変える

⇒<hr width=200 color=red>

ウェブ上にHTMLタグを表示させる場合

そのままの記号で書き込んでもWEB上では表示されない特殊文字の場合は、
それぞれ指定されている特別な記号で記述して表示させます。

以下のコードを記述する場合の特別記号です。

<は、<
>は、>

上記に置き換えて記述します。

テキストの背景色変えるHTMLタグ

以下のHTMLタグでテキストを囲むことにより、テキストの背景色を変更できます。

ガッツでやるしかないんだ！

上記の場合は、以下のように記載します。
<p style="background-color:#FFE2E8;border:1px solid #FF99CC;padding:5px;">ガッツでやるしかないんだ！</p>
とこのように表記しています。

男には休日は無い

上記の場合は、以下のように記載します。
<p style="margin: 0; padding: 10px; padding-left: 40px; border: 1px solid #ccc; background-color: #f7f7f7;">男には休日は無い</p>
とこのように表示しています。

男には休日は無い

上記は、
<p style="margin: 0; padding: 10px;border: 1px solid #ccc; background-color: #f7f7f7;">男には休日は無い</p>
と表示しています。

男には休日は無い
とことんない
本当にない

上記は、段落を超えて背景色を指定する記述ですが、
<div style="margin: 0; padding: 10px;border: 1px solid #ccc; background-color: #f7f7f7;">男には休日は無い
とことんない
本当にない</div>
と表示しています。

それぞれHTMLタグの指定している内容を変更していくことにより、
枠の幅や背景色、文字の配置場所等を変更することが可能です。

HTMLを少しづつ習得することにより理解していきましょう。

その他の枠のHTML

１）細かい点線の枠に入れる

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
ここに文字を入力する。
</div>

２）点線の枠に入れる

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
ここに文字を入力する。
</div>

３）実線の枠に入れる

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
ここに文字を入力する。
</div>

４）二重線の枠に入れる

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333;">
ここに文字を入力する。
</div>

５）細かい点線の枠に入れる（角丸つき）

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;">
ここに文字を入力する。
</div>

６）点線の枠に入れる（角丸つき）

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;">
ここに文字を入力する。
</div>

７）実線の枠に入れる（角丸つき）

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
ここに文字を入力する。
</div>

８）二重線の枠に入れる（角丸つき）

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px;">
ここに文字を入力する。
</div>

１x）細かい点線の枠に入れる -背景色付き

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; background-color: #ffff99;">
ここに文字を入力する。
</div>

２x）点線の枠に入れる-背景色付き

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #ffff99;">
ここに文字を入力する。
</div>

３x）実線の枠に入れる -背景色付き

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #ffff99;">
ここに文字を入力する。
</div>

４x）二重線の枠に入れる -背景色付き

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; background-color: #ffff99;">
ここに文字を入力する。
</div>

５x）細かい点線の枠に入れる（角丸つき） -背景色付き

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #ffff99;">
ここに文字を入力する。
</div>

６x）点線の枠に入れる（角丸つき） -背景色付き

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #ffff99;">
ここに文字を入力する。
</div>

７x）実線の枠に入れる（角丸つき） -背景色付き

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px; background-color: #ffff99;">
ここに文字を入力する。
</div>

８x）二重線の枠に入れる（角丸つき） -背景色付き

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px; background-color: #ffff99;">
ここに文字を入力する。
</div>

１xx）細かい点線の枠に入れる – 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>

２xx）点線の枠に入れる – 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>

３xx）実線の枠に入れる – 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>

４xx）二重線の枠に入れる – 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>

５xx）細かい点線の枠に入れる（角丸つき） – 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>

６xx）点線の枠に入れる（角丸つき） – 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>

７xx）実線の枠に入れる（角丸つき） – 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>

８xx）二重線の枠に入れる（角丸つき） – 濃い背景色付き・文字色変更

ここに文字を入力する

↓下記をコピー＆ペースト

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px; background-color: #009999; color: #ffffff;">
ここに文字を入力する。
</div>

タイトルを枠に被らせる

1）細かい点線の枠に入れる

タイトル付き枠

ここに文字を入力する。

↓下記をコピー＆ペースト

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

2）実線の枠に入れる

タイトル付き枠

ここに文字を入力する。

↓下記をコピー＆ペースト

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

3）点線の枠に入れる

タイトル付き枠

ここに文字を入力する。

↓下記をコピー＆ペースト

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

4）二重線の枠に入れる

タイトル付き枠

ここに文字を入力する。

↓下記をコピー＆ペースト

<legend>タイトル付き枠</legend>ここに文字を入力する。</fieldset>

進化形）タイトル部分に背景色を入れる

タイトル付き枠

ここに文字を入力する。

↓下記をコピー＆ペースト

<fieldset style="border: 1px double #000; padding: 10px;"><legend style="background-color: #FF0099; padding: 3px 10px; border-radius: 5px; color:
#ffffff;">タイトル付き枠</legend>ここに文字を入力する。</fieldset>