2014年8月26日火曜日

【Bloggerいじり】Bloggerの表示フォントを変更する

Bloggerでブログを書いているときに、フォントを変えようとしても、いつも目にしているMSゴシックやメイリオがないなと不思議に思っていました。
どうやら、Bloggerというブログサービスが海外発のものだから、日本語向けのフォントが使えないみたいですね。

じゃあどうしようかと迷っていたら、こちらの記事を見つけました。

[Blogger] フォントを変更して見栄えを良くする方法 | Bloggerをカスタマイズするときに見るブログ




1.意外と簡単でした

どうやらCSSをいじるようですが、私にとってはCSSとは何のことなのかさっぱりわかりません。
難しいのかなと思ったのですが、案外簡単にできました。

まず、Bloggerの編集画面から、「テンプレート」を選んで「カスタマイズ」というところを押します。



次に、Blogger テンプレート デザイナーの画面から「上級者向け」というところの中から「CSSを追加」というのを選択します。

そして右側の入力欄に、次のように書き込みます。

* {
    font-family: 'meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'MS Pゴシック', sans-serif !important;
}

これで作業は完了です。

ちなみに、こちらが変更前の画面。

そして、こちらが変更後の画面。

なんとなくみやすくなった気がします。



2.何をやったのかを調べてみた

このまま記事を終えてしまうと、参考記事の丸パクリなので、いったい何がどうなったのか調べてみました。

まず「CSS」とは何か?
CSSは Cascading Style Sheet (カスケーディング・スタイルシート)の略で、これを使うとホームページの見栄えを細かく指定することができます。
引用元:スタイルシートとは? - やさしいホームページ入門

どうやら、文字に背景色を付けたり、枠を付けたりするプログラムみたいなもののようです。


次に、あたまの「*」は何でしょう?
これは「全称セレクタ」といって、全部を対象にするという意味のようです。
(参考)
セレクタ - CSS2リファレンス 


それから「font-family」というのが、フォントの種類を指定するものです。
記述した順に優先的に適用されています。
今回記述したものは、
(1)メイリオ
(2)ヒラギノ角ゴ Pro W3
(3)MS Pゴシック
(4)sans-serif
という順番にフォントを適用しろと命令しています。


最後に「!important」ですが、これは優先的に適用しろという意味のようです。
(参考)
CSS基礎知識~!importantルールを使う~ 



3.最後にちょっとオリジナリティを

ちなみに、Macの和文標準フォントは、何年か前にProからProNに変更されています。また、iOSにはProNしか入ってないそうです。
(参考)
CSSのfont-family指定はこれで決まり!(2013春) - 遠近法ノート 

私自身はWindows環境がメインなのですが、iPhoneとかで見に来られる方もいるかもしれません。
なので、CSSの入力は次のようにするといいかな?

* {
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'meiryo', 'メイリオ', 'MS Pゴシック', sans-serif !important;
}

というわけで、丸パクリではなく少しオリジナリティを加えてみました。

(関連記事)
【Bloggerいじり】続・Bloggerの表示フォントを変更する

0 件のコメント:

コメントを投稿