はてなブログを始めたばかりの初心者の頃に悩んだのが、文字に背景色をつける方法。
文字の色は「見たまま編集画面」で「文字色アイコン」から簡単に変更できるけれど、文字の背景色はアイコンで変更する方法がないんですよね。
- 書いた 文字の一部に背景色 をつけたい。
- 文字の背景の色 をたくさん使い分けたい。
- 初心者でも簡単に背景色 を使いたい。
- コピペで使えるコードある？
この記事は文字の背景色をカスタマイズしたい人の悩みを解決します！
実はブログ初心者でも、簡単に文字の背景に色をつけることができるんですよ！
さっそく具体例を見ていきましょう。
はてなブログの記事の文字の背景に色をつける方法
この記事では、個別の記事の文章の文字の一部に背景色をつける方法を解説します。
繰り返しいろんな記事で使う、蛍光ペン風のマーカーの設定方法は、『はてなブログに蛍光マーカー（下線）を設定する』の記事を参考にしてください。
「見たまま編集」画面の「HTML編集」でHTMLコードを使って文字の背景に色をつける
はてなブログ初心者の人は、見たまま編集の画面で記事を作成している人が多いと思います。私もそうです。
一通り記事の文章を打ち込んだ後、 色をつけたい部分 に次のHTMLコードを使えば、文章の一部に背景色がつきます。
<span style="background: #ffd700;">背景色をつける部分</span>
コードの中の「#ffd700」は「カラーコード（色コード）」です。あとで詳しく解説します。
では、具体的に文字の背景に色をつけてみましょう。最初は手順を確認したあと、コードをコピペしながら進めていけばOK！
文字に背景色をつける方法を、図と例でわかりやすく解説
文字の一部に背景色をつける手順は次のとおりです。
記事の文章を書いて、文字に背景色をつけたい部分を決めます。
例として「書いた文字の一部に背景色をつけたい」の文字の一部に背景色をつけていきます。
＜見たままモード＞
＜HTML編集画面＞
＜プレビュー画面＞
まだ色をつけたい部分に背景色はついていない状態です。
上記画面の「書いた文字の一部に背景色をつけたい」の文字の一部に、 オレンジの背景色 をつけてみます。
HTML編集画面にして「書いた文字の一部に背景色をつけたい」の文字のうち、「文字の一部に背景色」の部分を先ほどのコード<span style="background: #ffd700;">と</span>で挟みます。
＜HTML編集画面＞
つづいて、うまい具合に文字に背景色が設定されたかどうか確認します。
プレビュー画面にして、表示イメージを確認してみましょう。
下の画像の通り、文字の背景色が設定されたことが確認できます。
＜プレビュー画面＞
文字の背景に色がつきました！やったね！
次は、いろんな色を使う方法を解説していきます！
文字の背景色にいろんな色（カラーコード指定）を使う方法
それではもう一度HTMLコードをみてみましょう。
<span style="background: #ffd700;">背景色をつける部分</span>
コードの中の「#ffd700」が背景色を決める「カラーコード」（色コード）でした。だから、ここに好きな色を指定すれば、多数の背景色指定（色の変更）が可能です。
文字の背景にカラーコードで色変更をしてみた実例
さきほどの例文を使って、多色利用（色変更）の実例を紹介します。次のように「カラーコード」（色コード）を指定してみましょう。
<ul>
<li>書いた<span style="background: #ffd700;">文字の一部に背景色</span>をつけたい。</li>
<li><span style="background: #87cefa;">文字の背景の色</span>をたくさん使い分けたい。</li>
<li><span style="background: #ffc0cb;">初心者でも簡単に背景色</span>を使いたい。</li>
</ul>あなたの「はてなブログのHTML編集画面」にコピペしてみてもOK！
＜プレビュー画面表示イメージ＞
- 書いた 文字の一部に背景色 をつけたい。
- 文字の背景の色 をたくさん使い分けたい。
- 初心者でも簡単に背景色 を使いたい。
３色表示されましたか？コピペするだけで簡単に色を変更して使えそうでしょ！
カラーコード（色コード）を探す方法について
カラーコード（色コード）を変えればいろんな色が使えることはわかったけど、カラーコード（色コード）ってどうやって探すの？という声が聞こえてきましたよ。
これも簡単です。
私が「カラーコード（色コード）」を確認する時によく使うサイトがこちら。
色の名前の下に「カラーコード（blackなら #000000）」が表示されているので、#XXXXXXの部分をコピーして使えばOK。
半透明色も使ってみたい人むけのカラーコード（色コード）解説
大体の人はここまでで大丈夫だと思いますが、中には淡い色や半透明色が使いたい人もいると思います。実は私も半透明色をブログで使っています。
半透明色を指定したい場合は、次のようにHTMLコードの一部を変更してください。コピペして使ってみるとわかりやすいですよ。
<p>
例えば、<span style="background: #ff4500;">オレンジレッド（orangered）</span>の場合、<span style="background: rgba(255,69,0,0.5);">半分半透明にした</span>場合、<span style="background: rgba(255,69,0,0.1);">90%透明にした</span>場合で、だいぶ色の印象が違ってくると思います。
</p>例えば、オレンジレッド（orangered）の場合、50%透明にした場合、90%透明にした場合で、だいぶ色の印象が違ってくると思います。
- 50％透明にする場合は、HTMLカラーコードの色パネルをクリックすると、R:255 G:69 B:0という細かいカラーコードがわかります。
- この数値を、rgba(R,G,B,A)のそれぞれ、R,G,B部分に指定し、A部分は「半透明なら100％から50％引いた値」「90％透明なら100％から90％を引いた値」を入れればOKです。
- rgba(R,G,B,A)部分の数値を変えれば、色変更も簡単にできます。
まとめ｜文字の背景に背景色や半透明色をつけるのは簡単！
「文字の背景に色をつける方法」を実際にやってみたら簡単にできたと思います。半透明色も使いこなせるようになりましたね！
（さすがに、文字の色変更みたいにボタンで簡単には変えられないですが…）
ブログは記事作成も楽しいけれど、カスタマイズして育てるのも楽しいよね！
文字の背景色や、カラーコードの使い方がわかるとブログのデザイン力も上がりますよ。
はてなブログのデザインや収益化の参考に、当ブログの他の記事も参考にしてください！
