誰でも簡単!HTMLコードだけでフォントサイズや文字色を設定変更する方法

f:id:nkrmk:20200704104633j:image

 

ブログの文章にHTMLのみでフォントサイズや文字色を簡単に設定変更する方法

 

文章(ブログ)を書く上で、読みやすさや文字の強調などを考え装飾文章を作成したいと思いますよね!

 

読む側からしたら読みやすい、見やすい文章の方が最後まで読んでくれる事が多いです。
また他人のブログなどを見て、このブログ読みやすいと感じると最後まで読んでしまうものです。

 

そこで、文字サイズや色の変更を誰でも簡単に装飾できるHTMLコードを紹介したいと思います。

 

フォントサイズのHTML設定

フォント変更HTMLコード【コピペOK】
<divstyle="color:black; font-size:10pt;">テキスト</div>

 

大きい文字や色を変更したい場所に上記HTMLコードを設置する。 テキスト部分に文字サイズや色を変更したい文章を入力するだけで簡単に変更できます。

 

「読まれるブログ」は、はてなブログPro

 

フォントサイズを変更するには? HTMLコードにある font-size:10pt 部分の数字を変えればフォントサイズが変更されます。 10ptが標準だとして、10ptより数字を大きくすれば文字も大きくなり、逆に小さくすれば文字は小さくなります。

 

フォントサイズ変更例

フォントサイズ5pt
テキスト
フォントサイズ10pt
テキスト
フォントサイズ15pt
テキスト
フォントサイズ20pt
テキスト
フォントサイズ25pt
テキスト
フォントサイズ30pt
テキスト
上記の様に、フォントサイズの数字を変える事で文字サイズを自由に変更する事ができます。

 

 

フォントの色を変更するには? HTMLコードにあるcolor:black 部分のblackを他のカラーコードに変える事で文字色も簡単に変更できます。

 

初心者でも簡単!はてなブログPro

 

カラー名&カラーコード変更例

black ( #000000 )
red ( #FF0000 )
blue ( #0000FF )
green ( #008000)
yellow ( #FFFF00 )
 
カラー名&カラーコードを変更するだけでお好きな色に変更できます。color:black 若しくは color:#000000は色コードとしては同じ扱いになるのでどちらでも設定する事ができます
 
 
 
 
応用:文字拡大とカラーコード変更例
black ( #000000 )
red ( #FF0000 )
blue ( #0000FF )
green ( #008000 )
yellow ( #FFFF00 )
文字を大きくしたり色を付けたり強調したい文章に使って見て下さい。

 

たったこれだけでブログの見栄えが良くなります。 お好みに合わせてフォントサイズや色をを変えてみて下さい。 

 

早速 フォントサイズ&カラー文字を使った文章を書いて見ましょう!

 

色の変更はカラーコード一覧を参考に↓↓↓ http://www.netyasun.com/home/color.html

 

CSS&HTMLを分かりやすく解説した本