HTMLモードに挑戦【文字サイズ編２】

Bloggerで文字サイズを変更する方法についてもう少し詳しく調べてみました。

作成モードで変更するには、変更したい文字を選択して、

メニューから

・最小

・小

・標準

・大

・最大

を選択することで、変更できます。

ただ、作成モードからの変更では、正しく変更されない。

プレビューやHTMLモードにすると、期待通りのサイズに

ならないことがあることがわかりました。詳細は、こちら。

そこで、HTMLモードに変更して修正するのですが、

<span style="font-size: xxxx;">〇〇〇</span>

のようにして、〇〇〇という文字をxxxxというサイズに

変更するといった書き方をします。

xxxxに指定できるのは、

xx-small
x-small
small
medium
large
x-large
xx-large

ですが、xx-small/x-small は同じ大きさ、
x-large/xx-large についは、一度作成モードにすると、
勝手にx-largeになってしまうことが分かりました。

これだと、思ったサイズにできないと思ったので、
他に方法がないか確認してみました。

すると、xxxx の部分に数字で指定する方法があることが分かりました。

font-size: 16px のように、文字のサイズを直接書く方法です。

<span style="font-size: 16px">〇〇〇</span>

ためしに、10px～32pxまで書いてみました。

<span style="font-size: 10px;">こんにちは</span><br />
<span style="font-size: 11px;">こんにちは</span><br />
<span style="font-size: 12px;">こんにちは</span><br />
<span style="font-size: 13px;">こんにちは</span><br />
<span style="font-size: 14px;">こんにちは</span><br />
<span style="font-size: 15px;">こんにちは</span><br />
<span style="font-size: 16px;">こんにちは</span><br />
<span style="font-size: 17px;">こんにちは</span><br />
<span style="font-size: 18px;">こんにちは</span><br />
<span style="font-size: 19px;">こんにちは</span><br />
<span style="font-size: 20px;">こんにちは</span><br />
<span style="font-size: 21px;">こんにちは</span><br />
<span style="font-size: 22px;">こんにちは</span><br />
<span style="font-size: 23px;">こんにちは</span><br />
<span style="font-size: 24px;">こんにちは</span><br />
<span style="font-size: 25px;">こんにちは</span><br />
<span style="font-size: 26px;">こんにちは</span><br />
<span style="font-size: 27px;">こんにちは</span><br />
<span style="font-size: 28px;">こんにちは</span><br />
<span style="font-size: 29px;">こんにちは</span><br />
<span style="font-size: 30px;">こんにちは</span><br />
<span style="font-size: 31px;">こんにちは</span><br />
<span style="font-size: 32px;">こんにちは</span><br />

この状態で、作成モードにすると、



































プレビューで見ても


































と、きちんとサイズに合わせて大きくなっていっているのが分かります。

でも、最初は、Bloggerの作成モードで書くことが多いので、
それぞれの文字サイズがどの数字に該当するのか書き比べてみました。