今回から、BloggerのHTMLモードに挑戦したいと思います。
まず思いつくところから、以下２つです。
・改行
・文字サイズ変更
いきなり、結論から書きます。
・改行するには、<br />を入れる。
・文字サイズ変更には、
<span style="font-size: xxxx;">〇〇〇</span>
とすると〇〇〇という文字が、xxxxのサイズになる。
指定しないとどうなるか分からない。
xxxxには、以下の７種類が指定可能。
xx-small
x-small
small
medium
large
x-large
xx-large
ただし、最小サイズ(xx-small)と小サイズ(x-small)は
作成モードではきちんとサイズが違うが、
プレビューでは、同じサイズになる。
・Bloggerの作成モードでは、small と xx-large文字は
選択できない。
指定したい場合は、HTMLモードで入力する必要がある。
だけど、xx-large を指定して、作成モードにすると、
勝手に x-large に変更されてしまう。
ここからは実際にためしたことと、結論までの内容です。
【検証内容】
作成モードで、
こんにちは と入力して改行すると
HTMLモードでは、
こんにちは<br />
となっています。
つまり
・改行するには、文末に<br /> を付ける。
ということなのでしょう。
次に文字サイズ変更を変える場合ですが、
作成モードで、こんにちは と入力して、
文字サイズを大サイズを指定してからHTMLモードで
見てみました。
すると、
<span style="font-size: large;">こんにちは</span>
というように、こんにちはという文字が
<span ～> </span>
が挟まれています。
挟まれている文字がfont-size で指定された
large の部分は、
最大サイズは、x-large
最小サイズは、xx-small
小サイズは、x-small
になる。ということもわかりました。
標準サイズは、何も入力しなくてもいいのかな？
ここまでの作成モードの表示はこうなっています。
 |
| 作成モード |
HTMLモードでみるとこうなっています。
こんにちは<br />
<span style="font-size: large;">こんにちは</span><br />
<span style="font-size: x-large;">こんにちは</span><br />
<span style="font-size: xx-small;">こんにちは</span><br />
<span style="font-size: x-small;">こんにちは</span><br />
改行して次を検証してみようと思ったところで、
不思議なことが起こりました。
同じように、「こんにちは」を入力して
メニューで標準サイズに変更したところ、
見た目は、標準サイズと同じになりましたが、
HTMLモードにすると、
追加したその行の文字にxx-smail文字サイズ指定され
こんにちは<br />
<span style="font-size: large;">こんにちは</span><br />
<span style="font-size: x-large;">こんにちは</span><br />
<span style="font-size: xx-small;">こんにちは</span><br />
<span style="font-size: x-small;">こんにちは</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: xx-small;">こんにちは</span> ←これです。
となっています。
そのまま作成モードに戻ると、さっきは標準サイズだったのに
また、最小サイズの表示になっていました。謎です。
 |
| 作成モード |
↑最後の行です。
これが、表示乱れの原因なのでしょうか。
ためしに、最後の行だけ作成モードで標準→大サイズに変更しました。
 |
| 作成モード |
すると、今度はきちんとHTMLモードで
こんにちは<br />
<span style="font-size: large;">こんにちは</span><br />
<span style="font-size: x-large;">こんにちは</span><br />
<span style="font-size: xx-small;">こんにちは</span><br />
<span style="font-size: x-small;">こんにちは</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: large;">こんにちは</span>
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
となっており、大サイズ（large）になっています。
あれ？標準サイズだけ起こる問題なのでしょうか？
もしかしてきちんと、
<span xxxx>こんにちは</span>で挟まないと
文字のサイズってどうなるのか分からないということなのでしょうか？
そこで、大サイズになった、「こんにちは」の文字を
今度は、作成モードで標準を選択してみました。
すると、今度は、HTMLモードで
こんにちは<br />
<span style="font-size: large;">こんにちは</span><br />
<span style="font-size: x-large;">こんにちは</span><br />
<span style="font-size: xx-small;">こんにちは</span><br />
<span style="font-size: x-small;">こんにちは</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: medium;">こんにちは</span>
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
となり、medium というサイズが設定されています。
見た目も標準サイズになりました。
？？？どいうこと？？？
標準サイズだけこんな不安定なことになるのでしょうか？
これってBloggerだけなのでしょうか？
わかならいことだらけです。が
少なくとも文字サイズはきちんと指定するのがよさそうです。
次に、プレビュー画面でも確認してみます。
すると、また、不思議なことが起こりました。
HTMLモード上では、以下にようになっているのに、
こんにちは<br />
<span style="font-size: large;">こんにちは</span><br />
<span style="font-size: x-large;">こんにちは</span><br />
<span style="font-size: xx-small;">こんにちは</span><br />
<span style="font-size: x-small;">こんにちは</span><br />
<span style="font-size: x-small;"><br /></span>
<span style="font-size: medium;">こんにちは</span>
プレビューにすると、
 |
| プレビュー画面 |
１行目の標準サイズと２行目の大サイズ(large)が同じ大きさ
４行目の最小サイズ(xx-small)と５行目の小サイズ(x-small)が
同じ大きさになっています。
少なくとも
・文字サイズはきちんと指定しなければならない。
・xx-small と x-small は同じサイズになる。
ということは分かりました。
ためしに、
小さい文字から順番に並べてみます。
つまり、HTMLモードで、下のように入れてみます。
<span style="font-size: xx-small;">こんにちは</span><br />
<span style="font-size: x-small;">こんにちは</span><br />
<span style="font-size: medium;">こんにちは</span><br />
<span style="font-size: large;">こんにちは</span><br />
<span style="font-size: x-large;">こんにちは</span><br />
この状態で、作成モードにすると、
 |
| 作成モード |
と、期待通りになっていますが、プレビューにすると、
 |
| プレビュー画面 |
やはり最小サイズと、小サイズの文字サイズは同じです。
これは、気を付けないといけないですね。
文字サイズについて、少し他のサイトを調べたところ、
font-size には、他に small と xx-large と指定する
ことも可能なようです。
つまり、
<span style="font-size: xx-small;">こんにちは</span><br />
<span style="font-size: x-small;">こんにちは</span><br />
<span style="font-size: small;">こんにちは</span><br />
<span style="font-size: medium;">こんにちは</span><br />
<span style="font-size: large;">こんにちは</span><br />
<span style="font-size: x-large;">こんにちは</span><br />
<span style="font-size: xx-large;">こんにちは</span><br />
の７種類の指定ができるようです。
これをプレビューでみると、
 |
| プレビュー画面 |
ただし、これを作成モードにしてしまうと、
 |
| 作成モード |
x-large と xx-large の文字サイズが同じになっています。
この状態で、HTMLモードに戻って確認すると、
<span style="font-size: xx-large;">こんにちは</span><br />
↓
<span style="font-size: x-large;">こんにちは</span><br />
のように勝手に xx-large が x-large に変更されてしまいます。
Bloggerの作成モードの問題なのでしょうか？
xx-largeを使いたい場合はも気を付けないといけないですね。
かなり長くなってしまったので、
一旦ここでこのページは閉じたいと思います。
次回は、他にもあった文字サイズの指定方法 を予定してます。
参考情報
http://www.htmq.com/style/font-size.shtml
0 件のコメント:
コメントを投稿