チコちゃんに叱られないブログ

ブログ向上で生活を豊かにしましょう。

Hatena Blog 「編集 見たまま」のツールバーの使い方編その4【フォントサイズ編】


 Hatena Biog 「編集 見たまま」のツールバーの使い方編その4です。

今回はフォントサイズについてです。

 

f:id:i-shizukichi:20190528142342j:plain

 

 Hatena Blog のお役立ち【フォントサイズ編】

 
  1. テキストが中心ですと単調な感じになりやすい時に、文字サイズの変更でインパクトを付けるなんてことが出来ます。

  2.  Hatena Blog 編集ツールバーです。
     Hatena Blog 文字編集ツールバー

  3.  Hatena Blog 編集ツールバーに「TT」アイコンがあります。文字列を選択してこちらをクリックすることで文字サイズの変更が出来ます。

  4.  Hatena Blog で用意しているフォントサイズは次の四つです。

    <span style="font-size: 80%;"></span>
    <span style="font-size: 100%;"></span>
    <span style="font-size: 150%;"></span>
    <span style="font-size: 200%;"></span>

    それでは、実際にこれらの文字サイズで文章を作ってみましょう。改行なしの塊文章です。

  5. この文章が標準フォントサイズ100%です。標準フォントサイズは、ブログスタイルで採用されている標準フォントサイズです。選択したブログスタイルでフォントサイズに多少違いがあります。文字サイズも大きめで読みやすいと思います。ブログのスタイルで設定してありますので、実際にはフォント指定をする必要はありません。ブログのスタイルでフォントサイズが小さい時、全体的にフォントサイズを修正する方法は次回いずれかに。

  6. 小(80%)とされているのがこのサイズです。このサイズがブログの標準フォントサイズですと、ブログ主にとってはまずは読む気の失せるブログです。必要な情報があるか、よほど面白くなくては読みません。ブラウザで文字サイズの変更が出来ますけど、そこまでさせる文字情報ってどうかなと思います。公式サイトでもデザインばかりに気をとられて小さなフォントサイズになっていると、ほんと(ほんとうに)嫌になります。どうですか、読み難いでしょうw

  7. 中(150%)がこのフォントサイズになります。少し文字が大きいので読みやすいですが、このブログスタイルではより文字が大きくなってなんだかちょっと間抜けた感じもしてきます。間抜けた感じに思いましたら、ブログ主も間が抜けているから丁度良いかもですw

  8. 大(200%)はここまで大きな文字列になりますので、さすがにこのサイズでブログ全体の文字としている記事はないと思います。けど、このサイズで格言的なことを短くブログるなんてのも面白いかもしれません。面白いかどうかの基準は人によって違いますけど、それでもこれだけ大きな文字では逆に読みずらいです。だから、強調したい短いワードに限定した方がよいでしょう。

  9.  Hatena Blog の編集ツールバーから指定できるのは、標準はあえて指定する必要はないので、小・中・大の三種類です。少し以前なら大だったのですけど、いつの間にか小になってしまいましたけど、それでも痩せませんなんて話はどうでもいいですね。あっ、これ飯の量ね。

  10. フォントサイズは Hatena Blog 編集では「小・中・大」の三種類ですが「HTML編集」からは自由に指定できます。

  11.  <span style="font-size: 80%;">あ</span>で「80%」の数値を自由に変更して構わないのです。

    TT」これはフォントサイズの変更だけでやっています。我ながらよく出来たなあって思います。見ればああそんなことかですが、自分の中のセーブを外してここまで思い至るのは難しいのです。








    この中で一番小さなは標準の「20%」表示で、最も大きなは「1000%」表示になっています。

  12. 文字サイズをいろいろと変えることでブログに遊びも出てきます。ですが、肝心なのは多用しないことです。肝心なところで…

    あっ!
    …忘れていたよ、ってな感じでやることです。

  13. フォントサイズを小から大へ、大から小へと変えることでメリハリが付きますし、さらにフォントに色を付けることでブログが華やかにもなりますので是非試してみてください。

終わりに

以上が「フォントサイズの変更」の使い方とその応用でした。何か役に立ったらよいなあと思います。意見がありましたらコメント欄でお知らせください。

 

これからも時々、ほんの小技のティップスをまた教えるよ。

じゃあね (´▽`) 

 

 

i-shizukichi.hatenablog.com

 

 

i-shizukichi.hatenablog.com

 

 

i-shizukichi.hatenablog.com

 

 

 

  

     


追記:1