無料で使えるブログにも、いろんな機能がついているので記事を書くとき文字をアレンジすることが簡単にできます。

でも、文字に背景色をつける機能がないブログもたくさんあります。


文字の背景色を、ちょっと変えるだけでもブログ記事にメリハリが出て強調する文字などがわかりやすくなり見やすくなります。



文字の背景色を検索窓で調べると、スタイルシートを使うのが良いということにたどり着くんですが、ブログを始めたばかりだと、スタイルシートについての勉強に時間を取られてしまって、肝心の記事を書く時間がなくなることになってしまいますので、ＨＴＭＬコードをコピーして簡単に文字背景色を変更する方法を使ったほうが良いです。



私が、そうだったので・・・




では、さっそくＨＴＭＬコードを使って文字の背景色を変更してみましょう。



☆文字の背景色を変える

<span style="background-color:#カラーコード;">ここに文字を書く</span>

上のＨＴＭＬコードをコピーして、#カラーコードとここに文字を書くのところを変えます。



spanタグの後ろに、styleを使ってbackground-color（背景色）を指定します。


ＨＴＭＬコードで指定すると、
span style="background-color:#カラーコード"

記号を説明すると、
＜span （半角スペース）style=（半角イコール）"（ダブルクォーテーション）background-color:（コロン）#（シャープ）カラーコード;（セミコロン）"（ダブルクォーテーション）＞


カラーコードはこちらを参考にしてください。
⇒　htmlのカラーコードを検索して確認、すぐに使いたい色に変換



これで、文字の背景色をいろいろ変えることができるようになりました。



さらに、もうちょっと記事中の文字アレンジをしてみましょう。

文字の背景色と文字の色を変えたいときもあると思います。

そんなときは、ブログの機能にある文字の色を変更したあとで、その文字変更のＨＴＭＬコードに背景色のＨＴＭＬコードを付け加えるだけでOKです。




☆文字の背景色を変えて、さらに文字色を変える

<span style="color:#カラーコード;background-color:#カラーコード;">ここに文字を書く</span>

ここでも、上のＨＴＭＬコードをコピーして、#カラーコードとここに文字を書くのところを変えます。



ちょっと前ならば、fontタグを使っていたのですが、今は廃止されています。
ｆｏｎｔタグは使わないようにしましょう。




spanは文章のひとかたまりを表すＨＴＭＬコードです。

<span>ここに文章を書く</span>

実際に、文字背景と文字色を変えてみましょう。

文章
⇒　『文字色と文字背景色をいっぺんに変更』

文字色
⇒　『赤』
※赤のカラーコードは、「#FF0000」

文字背景
⇒　『薄い緑』
※薄い緑のカラーコードは、「#90EE90」

<span style="color:#FF0000;background-color:#90EE90;">文字色と文字背景色をいっぺんに変更</span>

このように表示されます。
↓
文字色と文字背景色をいっぺんに変更




いかがでしたか？

ちょっと、ややこしいですが、上の四角で囲ったコードをそのままコピーして#カラーコードとここに文字を書くのところを変えればすぐに文字の背景色と文字の色をアレンジすることができます。



この２つのコードを、メモ帳や付箋などに保存しておいて、すぐに使えるようにしておきましょう。

<span style="background-color:#カラーコード;">ここに文字を書く</span>

<span style="color:#カラーコード;background-color:#カラーコード;">ここに文字を書く</span>

最後まで読んでいただき、ありがとうございます。