無料ブログの文字サイズ変更は簡単にできます。

大・中・小の3種類を簡単に選択できるようになっています。

文字サイズ変更のHTMLコードは、font-sizeを使います。



FC2ブログでは、このアイコンをクリックすれば簡単に文字サイズ変更ができます。

moji-size.png



実際の文字サイズは、下の通りです。







この3種類で間に合ってしまうのですが、ちょっと慣れてくると記事の文字サイズを所々変えてみたいと思うことがあります。

無料ブログの文字サイズ変更HTMLをちょっと変えるだけで、簡単に文字サイズを自由に好きな大きさに変更することができるようになります。





☆文字サイズ変更するためのHTML

<span style="font-size:ここに文字サイズの数値を入れる">ここに文字を書く</span>



FC2ブログの場合、上のHTMLコードの『ここに文字サイズの数値を入れる』に、次のような文字サイズ指定コートを入れます。

の場合 ⇒ x-large
の場合 ⇒ large
の場合 ⇒ x-small


実際に、入れてみましょう。



大のx-large

HTMLコード

<span style="font-size:x-large">x-largeを入れるとこのサイズになります</span>

表示結果

x-largeを入れるとこのサイズになります




中のlarge

HTMLコード

<span style="font-size:large">largeを入れるとこのサイズになります</span>

表示結果

largeを入れるとこのサイズになります




小のx-small

HTMLコード

<span style="font-size:x-small">x-smallを入れるとこのサイズになります</span>

表示結果

x-smallを入れるとこのサイズになります




size:の後ろを変えるだけで、簡単に文字サイズを変更することができますね。



FC2ブログでは、x-large・large・x-smallを使っていますが、mediumとかsmallを入れるとまた違った文字サイズになります。




mediumを入れたときの文字サイズ

HTMLコード

<span style="font-size:medium">mediumを入れるとこのサイズになります</span>

表示結果

mediumを入れるとこのサイズになります




smallを入れたときの文字サイズ

HTMLコード

<span style="font-size:small">smallを入れるとこのサイズになります</span>

表示結果

smallを入れるとこのサイズになります




文字サイズの大きい順に並べると、

○ x-large
⇒ FC2ブログでは『大』

○ large
⇒ FC2ブログでは『中』

○ medium

○ small

○ x-small
⇒ FC2ブログでは『小』


になります。


下に、文字サイズ大きい順にHTMLコードを表示してみました。
HTMLコードを、コピーして『ここに文字を書く』の箇所を変えれば、使えます。


<x-large>
<span style="font-size:x-large">ここに文字を書く</span>

<large>
<span style="font-size:large">ここに文字を書く</span>

<medium>
<span style="font-size:medium">ここに文字を書く</span>

<small>
<span style="font-size:small">ここに文字を書く</span>

<x-small>
<span style="font-size:x-small">ここに文字を書く</span>





コピーすれば、large、medium、smallと横文字を覚える必要もないのですが、コピーしなくても良い方法があります。


それは、文字サイズの数値に『○○%』と入力する方法です。



普通に入力する文字サイズは100%です。


ということは、150%にすると、

HTMLコード

<span style="font-size:150%">150%の文字サイズはこれです</span>

表示結果

150%の文字サイズはこれです


パーセント表示にすれば、文字サイズを大きくしたければ、数字を大きくすれば良いだけなので、横文字を覚える必要がありません。



文字サイズの変更は、これで自由自在にできるようになりました。


上のHTMLコードをコピーして活用してみてくださいね。




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



スポンサーサイト