【HTML】コピペで簡単！文章の一部だけ色を変える方法

今日は暑いです。 →　今日は暑いです。

このように、一部だけ色を変える方法です。
ワードプレスなど、デフォルトの機能では変更が難しい場合にお使いください。

一部だけ赤に変える手順

「今日は暑いです。」

この例文の「暑い」だけを赤にしてみます。

1. 色を変えたい一文を、HTML表示にする

今日は暑いです。

↓

<p>今日は暑いです。</p>

2. 色を変えたい文字の前に、タグを入れる

<span style=”color:red;”>

このタグを、色を変えたい文字の前に入れます。

「暑い」を赤にしたいので、「暑」の前に入れます。

<p>今日は<span style=”color:red;”>暑いです。</p>

3. 色を変えたい文字の後ろに、タグを入れる

</span>

次に、このタグを、色を変えたい文字の後ろに入れます。

「い」の後ろに入れます。

<p>今日は<span style=”color:red;”>暑い</span>です。</p>

これで、完了です。

タグで挟んだ部分の文字色が、赤に変わりました！

↓

今日は暑いです。

今日は、リアルにじめじめと蒸し暑い一日でした。
なので、こんな例文になりました。
もうすぐ梅雨明けかな。

私は、夏より冬派、雪が大好きです。＾＾

まとめ（コピペで使えます）

以下をコピーし、HTMLの編集ページにペーストしてお使いください。
打ち込む場合は、全て半角で入力します。
一字でも違うと、上手く反映されませんのでご注意ください。

1. <p>ここは通常の文字色<span style="color:red;">ここに色を変えたい文字</span>ここは通常の文字色</p>

色の変え方

<span style=”color:red;”>

「red」の部分で、色を指定しています。
ここを「blue」「green」などにすると、それぞれの色に変えることができます。

簡単で面白いので、ぜひ色々お試しください。