結城永人Bloggerはウェブの編集のテーマのカスタマイズの上級者向けの項目からブログに使用するフォントを素早く変更できる。
- ページのテキスト
- ブログタイトル
- タブのテキスト
- 投稿
- 投稿タイトルのフォント
- 投稿タイトルのストリームのフォント
- 投稿のテキストのフォント
- 引用のフォント
- 検索
通常フォントとWebフォントから種類も豊富に選べるのは嬉しいけど、ただし欧文ばかりで和文などの他のタイプが一つも用意されてないのが難点だ。
日本語向けにデザインを考えるとBloggerでは欧文フォントがデフォルトで指定されてもいるので、何もしないと優先されて英数字だけが反映するのが悩ましい。
和文フォントに欧文フォントを混ぜるデザインも良いにせよ、その場合でも訪問者によって英数字が同じで日本語が異なったらデザインを保てないから何とかしたくなる。
Bloggerで和文フォントを多くの訪問者に統一するにはWebフォントを使うしかない
サイトの日本語のフォントデザインそのものは非常に厄介で、ブラウザによって大きく変わるから多くの訪問者に統一するにはサイトの独自フォントを使わなくては行けない。
実際、サーバーに置いたフォントファイルが読み込めないブラウザもあるかも知れないので、訪問者の全てに完全に反映するとまでは断言できないにせよ、どんなフォントでも様々なデバイスに幅広く対応して表示できると思う。
BloggerではサーバーにフォントファイルをアップロードできないからGoogle Fontsなどの外部サイトのWebフォントを取り込んで使うのが唯一の方法だ。
ただし表示速度が遅くなるので――日本語は漢字が多くて特に重い――他で反対に高速化する（ラベルのリンクやトップページの記事件数を減らしたり、不要なWebフォントを消したりする）と良いかも知れない。
サイトの独自フォントを使わない場合にはCSSだけしか編集しないから一般的な方法といって良いと思うけれどもfont-family要素を使ってブラウザが指定するフォントでデザインを付けなくてはならない。
Bloggerでの日本語向けの一般的なフォントデザインの二つの方法
- ブラウザ毎にCSSのfont-familyを追加する
- CSSのfont-familyを解除してブラウザに任せる
日本語向けにCSSのfont-familyを追加するサンプルのソースコード
font-family:'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, 'MS PGothic', sans-serif;ブログがデバイス搭載の和文フォントで表示される。年々、機種変更で搭載フォントも変わり得るから放っておくと通用しなくなるかも知れない。デザインを崩さないためには注意してえくべきだ。
サンプルでは「Hiragino Kaku Gothic ProN」がパソコンのMacとスマホのiPhone／タブレットのiPad、「游ゴシック Medium」がパソコンの近年のWindows（8.1以降）、「meiryo」がパソコンの旧年のWindows（8から7／Vistaまで）、「MS PGothic」がパソコンの往年のWindows（XP）などに対応している。
スマホ／タブレットのAndroidは何も指定してなくてデバイス搭載の和文フォントになる。
只単にデバイス搭載の和文フォントでブログを表示するならばCSSのfont-familyを追加する必要はないんだ。
サイトの独自フォント／Webフォントを新しく使うならば欠かせないけど、それ以外では主に一つのデバイスに幾つもの和文フォントが搭載されていて細かく優先順位を付けるか、欧文などの他のフォントと組み合わせるために使われる。
日本語向けにCSSのfont-familyを解除するサンプルのソースコード
Bloggerの公式テーマはデフォルトでブログに使用する言語が設定されてないので、デバイス毎の日本語を反映させるために先ずはHTML編集から冒頭のhtmlタグに「lang='ja'」を追加しなくてはならない。ブラウザの表示は殆ど変わらないけれども例えば引用のqタグを使うと半角の二重引用符（""）が全角の鍵括弧（「」）になったり、一部では日本語向けに変わるから役立つ。
font-family:sans-serif;ブログがデバイス搭載の和文フォントで表示される。CSSのfont-familyのフォントのタイプを指定しているので、それに見合ったデバイス搭載の和文フォントが使われる。
サンプルでは「sans-serif」でひげなし書体／日本語のゴシック体になっている。
- sans-serif（ゴシック体）
- serif（明朝体）
- monospace（等幅フォント）
- fantasy（装飾フォント）
- cursive（草書体）
パソコンは大丈夫だけれどもスマホ／タブレットは殆ど全ての機種がゴシック体の和文フォントしか持たないから「sans-serif」を指定するとフォントの種類は千差万別でも一つのタイプに合わせてデザインのバラ付きを相当に避けられる。
BloggerブログにCSSのfont-familyを追加／解除して和文フォントを優先しておくと少なくとも公式テーマのデフォルトの欧文フォントの英数字が混ざらないように除外できて訪問者のブラウザが指定するデバイス通りのデザインを取れる。
どうやってBloggerでCSSのfamilyを日本語向けに変更するか
予め用意されてないフォントを優先して使う場合にはテーマのカスタマイズの上級者向けのCSSを追加か、またはHTML編集（バックアップ／復元でも可能）からCSSのfamilyを変更する。
前者だとHTMLの要素に指定して後者だとstyle内にCSSを同じように記載しても構わないけれどもBlogger専用のGroupタグのフォント設定に含まれるVariableタグの「value」（値）を対象として編集するとフォント名を書き換えるだけ（必要なCSSの全てに自動的に適用されるため）で済むから容易い。
CSSを追加でのfont-family要素の指定先
ページのテキスト
body, dialog input[type=text], .dialog input[type=email], .dialog input[type=submit]ブログタイトル
.widget.Header h1タブのテキスト
.tabs li a, .overflow-button a投稿
投稿タイトルのフォント
.post-title投稿タイトルのストリームのフォント
.post-title a投稿のテキストのフォント
.post-body, div.widget.PopularPosts, div.widget.PopularPosts h3.title a（何もしなければページのテキストと同じになる）引用のフォント
blockquote検索
.search-input inputCSSを追加から投稿のテキストのフォントでCSSのfont-familyを追加する場合の記入例
.post-body, div.widget.PopularPosts, div.widget.PopularPosts h3.title a {font-family:'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, 'MS PGothic', sans-serif;}HTML編集でのGroupタグの変更の対象
ページのテキスト
Page Textのbody.text.fontブログタイトル
Blog titleのblog.title.fontタブのテキスト
Tabs textのtabs.font投稿
投稿タイトルのフォント
Postsのposts.title.font投稿タイトルのストリームのフォント
Postsのposts.stream.title.font投稿のテキストのフォント
Postsのposts.text.font引用のフォント
Postsのblockquote.font検索
Searchのsearch.input.fontHTML編集から投稿のテキストのフォントでCSSのfont-familyを解除する場合の記入例
<Group description="Posts" selector="div.widget.Blog">
（中略）
<Variable name="posts.text.font" description="Post text font"
type="font"
default="$(body.text.font)" value="normal normal 14.95px sans-serif"/>
（中略）
</Group>Bloggerの公式テーマで欧文フォントがデフォルトで設定されているから普通のサイト作成とは違う。日本語向けのCSSのfont-familyは追加するだけではなくて解除するためにもカスタマイズが求められずにいない。
些細な日常ではWebフォントの日本語は重くなるから取り入れずにデフォルトの欧文フォントのCSSのfont-familyを解除して訪問者のそれぞれのデバイス搭載の和文フォントで表示するようにしている。
追記：BloggerでWebフォントのGoogle Fontsならば相当に軽く使用する方法がないわけではない。
コメント