プレコレ blog

勉強や旅行について

【はてなブログ】簡単にできる行の背景色の変更方法

以前に文章の一部の文字だけ背景色を変更する方法をお伝えしました。今回は行全体の背景色を変える方法を書いていきます(^^)

 

この方法を覚えとけば、見出しを作りたい時とか行を強調したい時に使えます。

 

私は目次から飛ばない中見出しとして、使ったりします。大見出しだけだと文章量が多くて中見出しも使いたいけど、目次で中見出しを作ると目次が多くなるのでこの使い方をします。  

目次

【はてなブログ】簡単にできる行の背景色の変更方法

はてなブログ】簡単にできる行の背景色の変更方法

行の背景色イメージ

「見出し」

 ↑こんな感じになります。目次の中に「見出し」は表示されてないと思います!まずはこの背景色を追加する方法を伝えていきます。

 

 

 

行の背景色の追加方法

行の背景色の追加方法

行の背景色の追加方法

 「見出し」の前に

<div style="padding: 4px 8px; background-color: #93ecfb; font-size: 120%; font-weight: bolder;"><span style="color: #02010c;">

↑をコピペし、「見出し」の後に

</span></div>

↑をコピペしたら完了です。簡単ですよね!

 

次に背景の色を変更する方法をお伝えします。好きな色は人によって違うと思うのでぜひ見ていって下さい。

 

 

 

行の背景色の変更方法

padding: 4px 8px ←行の背景カラーの大きさを変更(4pxの数字が上下幅,8pxが左右幅)

background-color: #93ecfb←#以降を変えると、背景の色が変化します。

font-size: 120%←文字の大きさを変えれます。

font-weight: bolder←文字の太さを変えれます。

color: #02010c←#以降を変えると、文字の色が変化します。

 

私は背景色を薄くして、黒文字を使います。他にも背景色を濃い色にして白文字にするのも良いと思います。

  

 

◆◇◆◇

【はてなブログ】簡単に文字の背景色を変更する方法 - プレコレ blog

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

説明に不足があったり、誤字等があれば教えて頂けると助かります。