2015年6月29日

Blogger シンプル・テンプレートのフォント・タイプの変更



 Bloggerのテンプレートでは英文フォントが設定されています、そのためテンプレート・デザイナーで変更しようとしても日本語フォントがリストされていません。

 テンプレートに設定されているフォントリストを変更して日本語のフォント(メイリオ、MS Pゴシックなど)を利用するように変更しましょう。

フォントはテンプレートで変更します


 テンプレート・デザイナーを使って変更できるととても簡単ですが、残念ながら日本語のフォントはありません。




 そこで、テンプレート中のフォントを設定している部分を変更することでフォントを変更します。


 テンプレート内でフォント設定している場所は、<b:skin/> ... </b:skin>で囲われた部分となります。

 Bloggerでは、ここで一括してフォントのタイプやサイズを設定しています。


テンプレートを開いた状態では、▶︎マークで縮小されていますので、▶︎マークをクリックして展開します。

そうすると、CSSがダーっと並びます:

/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#ffffff"/>
   <Group description="Page Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS', Trebuchet, Verdana, sans-serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#666666"/>
   </Group>

この最初に記載されている部分、Variable Definition(変数設定)にCSSで利用する際のフォント・タイプや設定をまとめて記載しています。

フォントは、description=行のtype=で設定します。

     <Variable name="body.font" description="Font" type="font"
         default="normal normal 16px Helvetica, Arial, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', MSPゴシック, 'MS PGothic', sans-serif" value="normal normal 16px 
Helvetica, Arial, Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', MSPゴシック, 'MS PGothic', sans-serif"/>
default=には、何も設定がない場合の規定値を設定し、value=に任意の値を設定します。

例えば、ブログ本文でイタリック(斜体)でボールド(太字)としたい場合には、
value="italic bold 16px ..."のように設定します。

フォント・タイプは、Arial以降に列挙されているフォント名を使うこととなりますのでここを日本語のフォント名として入れ替えます。

フォントタイプ


フォントタイプ(’ヒラギノ角ゴ’や’MS Pゴシック’)は、使っているOS(オペレーティング・システム:Macの場合にはMacOSという名称、Windowsの場合にはWindows 8.1という名称)によって異なりことなりますのでそれぞれに対応したフォント名を設定することが優しいと思います。

"メイリオ","Meiryo", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka", "MS Pゴシック","MS PGothic","Arial", "Verdana",sans-serif;

設定するフォントのまとめ

Mac向けに:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro"
Windows向けに:"メイリオ","Meiryo", "MS Pゴシック","MS PGothic"
英文のフォント:Arial, Verdata, sans-serif

文字のサイズ


英語圏の記事の多くはフォント・サイズが12pxなどと小さ目に設定されています。

日本語でこの12pxの設定とした場合、文字が小さくて大変読みにくくなりますので文字サイズを少し大きめのサイズに変更すると読みやすくなると思います。

行間や段落間も読みやすさに影響しますので、まとめておきます:

文字サイズ:16px
行の高さ:1.7
段落マージン:2em


テンプレートの変更


初期設定値を入れ替えます:

  normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif

 normal normal 16px 'メイリオ','Meiryo','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック','MS PGothic','Arial','Verdana', sans-serif

defaultとvalueの2箇所とも変更しておきましょう。

シンプル・テンプレートの場合、6箇所〜7箇所ほどフォント設定する場所がありますので全て揃えておくといいかもしれませんね。

設定箇所は、フォント・サイズや太文字などの設定がありますのでフォント・タイプだけ入れ替えるようにしましょう。


 ※フォント・タイプとフォント・サイズを変更すると、全体的に文字が大きくなりますのでタイトルなどの文字サイズが大きすぎる場合は調整します。


フォント・タイプと文字サイズ、文字色を調整した後の様子:






こんな感じでいいでしょうか。