どりーずブログ

50代主婦。子育て卒業間近の元駐在妻。大学で嘱託職員中。コッカプーやバラや暮らしについて

MENU

はてなブログで文字の背景色を変える方法~コード変更だけではうまくいかない場合


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

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

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

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

こういうやつですね。

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

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

 

どりーはこんな人

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

 

 

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

グーグルで検索すると

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

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

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

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

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

 

戻っちゃう・・・

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

 

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

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

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

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

 

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

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

 

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

サンプルテキスト

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

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

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

 

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

ダークハル
スペリングに気を付けて。半角英文字でね 

 

 

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

サンプルテキスト

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

ダークハル
おお~ 

 

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

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

www.colordic.org

 

まとめ

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

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

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

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

 

 

 

ポチッと押していただけると嬉しいです!
にほんブログ村 ライフスタイルブログ シンプルライフへ
にほんブログ村

 

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