初心者必見！はてなブログで文字に背景色をつける簡単な方法～コード変更だけではうまくいかない場合

こんにちは、どりーです。

はてなブログで記事を書き始めてもうすぐ3か月です。
結構、頑張っています（笑）。

先日ふと、「文字の背景に色がついてたら見やすいかも」と思ってやり方を調べていました。

記事内で文字の色を変えるのは、「編集見たまま」モードで簡単にできるのですが、文字の背景色は専用のボタンがないので、なかなかうまく変えられない！そんな方はいませんか？

こういうやつですね。

文字の背景色を変えたい！

ネットで調べると、方法はたくさん出てくるのですが、なぜか私はうまくできずに苦労しました。

どりーはこんな人

2017年から大学事務（派遣、嘱託）をしています
2児の母（大学生）で、子育て卒業間近です
5年間シカゴに家族で滞在していました（駐在生活）
ちょっとだけ英語ができます

コードを入れ替えるだけでは文字の背景色が変わらない

グーグルで検索すると

「HTML編集でcolorの部分をbackgroundに変更」という回答がたくさんありました。

でも実際やってみるとうまくいきません。

HTML編集でコードを変更した後、「編集みたまま」あるいは「プレビュー」にしてもぜんぜん変わってない・・・・

おかしいなと思って、もう一度HTML編集画面に戻ってみると、なんとコードが元に戻っている！！

ちゃんとHTML編集でコードを変更してるのに・・・

戻っちゃう・・・

何度やってもこのループから抜け出せませんでした。涙

でもその後、いろいろ試行錯誤してようやくできるようになりました！

いったん文字色を変えてからコードを変更すればOK

どりー

まず文字の色をメニューバーから変更する
 

なんと、これがポイントでした。

①まずは、文字色を変更します。

「編集見たまま」画面で該当の文字を選び、文字色のボタンを押します。

好きな色を選ぶと、このように文字色が変わりますよね。

サンプルテキスト

②そして「HTML編集」タブへ切り替え、該当の文字があるところを探します。

<p><span style="color: #00cccc;">サンプルテキスト</span></p>

こんな感じのところです。

③この「サンプルテキスト」のすぐ前にあるcolorをbackgroundに書き換えます。

ダークハル

スペリングに気を付けて。半角英文字でね 

④メニュータブで「編集みたまま」あるいは「プレビュー」にすると

サンプルテキスト

このように、変更されています。

ダークハル

おお～ 

背景の色を変えたい場合は、そのすぐ右にある#から始まるカラーコードで変更可能です。

色見本はここで選んでいます。

www.colordic.org

まとめ

というわけで、他の人は簡単にできるのに、なぜ私の場合はひと手間かけなければいけないのか？

それについては解明できていませんが、たぶん使用しているテーマと干渉しているからなのかな？と思いました。（よくわかっていません）

とにかく文字の背景に色をつけることができるようになってよかったです。

私のように困っている方、ぜひ試してみてくださいね。

ポチッと押していただけると嬉しいです！

にほんブログ村

西友ネットスーパーがお得で便利