Bloggerのフォントをメイリオに

技術ネタ

Bloggerのフォントをメイリオに変更した。
カスタマイズ画面でフォント選べるけど、和文フォントはないんですよね。
テンプレートを直接変更することもできるけど、できればやりたくないなーと思い。
「上級者向け」にある「CSSを追加」を選択して上書きさせた。
参考にさせていただいたのは以下の記事。
超簡単! bloggerでフォントをメイリオに変更する方法【日刊239】|サイボーイ通信

変更するんじゃなく上書きっていうのが人によっては気持ち悪い人いるかもしれないけど、メンテナンス性を重視するってことで。
テンプレートのHTMLを直接変更したい方はこの辺を参考にどうぞw
blog832: Bloggerのフォントをメイリオに変更するの巻

で、普通にbodyにfontfamilyを指定しただけだとタイトルとかが変わらないw
別途に設定されてるから、そちらが優先されるんですよね。

  • h1.title:ブログタイトル
  • h2:ウイジェットタイトル
  • h3.post-title:各投稿のタイトル

これをfont-familyで上書き指定すればよし…
と思ったら、投稿のタイトルだけ変わらない!
よく調べたら、投稿タイトルのリンク部分には更なる指定がされていたw
投稿タイトルって基本全部リンクになるはずなのに個別指定する意味あるのだろうかと思いつつその部分も追加で指定。
ついでにh3と同時に指定されてたh4にも上書き指定して(h4ってどこで使ってるんだろう?)
これで一応フォント変更できたっぽい。


body,h1.title,h2 {
    font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "MS Pゴシック", sans-serif;
}
h3.post-title, h4 {
    font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "MS Pゴシック", sans-serif;
}
h3.post-title a {
    font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "MS Pゴシック", sans-serif;
}

で、出来上がってからちょっと調べたらこんな記事が見つかった。
はじめてのWordPressとBlogger: Bloggerのフォントをメイリオに変更する方法 記事タイトル対応
試してないけど、もしかして「*」で指定すれば強制的に全部上書きされる!?
そういえば上の指定だとブログの説明文がメイリオになってない。
それを踏まえて変更したのが以下の指定。


* {
    font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "MS Pゴシック", sans-serif;
}
h1.title,h2,h4 {
    font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "MS Pゴシック", sans-serif;
}
h3.post-title {
    font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "MS Pゴシック", sans-serif;
}
h3.post-title a {
    font-family:"meiryo","メイリオ","ヒラギノ角ゴ Pro W3", "MS Pゴシック", sans-serif;
} 

これでよさそう?

コメント

  1. bloog より:

    有用情報感謝

タイトルとURLをコピーしました