2016年10月21日金曜日

ブログ記事のフォントをHG丸ゴシックM-PROに変えてみる


[御案内]  [目 次]  [連絡先]  [ブログ]  [なんもわかりません!]


このブログはbloggerのサービスを利用して作っているのだが、この間、記事のフォントを変更しようとした時に、あることに気付いた。

フォントを変更するには管理画面から入って、フォントを変更するメニュー「ページテキスト」にある一覧の中から、フォントの種類を選択するのだが、その中のどこを探しても、石器人が使いたい「HG丸ゴシックM-PRO」が見当たらないのだ。

それもその筈で、どうやらこの「ページテキスト」メニューで表示されるフォント一覧には「英語のフォントだけ」しか載っていないようなのだ。道理でここをいくらいじっても、フォントが変わらなかった訳だわ…。


そこで、「日本語のフォント」を変えるにはどうしたらいいのか?と思い、ネットで検索していたら、素晴らしくわかりやすいサイトを見つけた。

メモロウさんというブログである。

そのブログの中にあるBloggerのフォントをメイリオに変更する方法 記事タイトル対応 ※追記ありという記事の中に、日本語のフォントを変更するためのわかりやすいやり方が書いてあったので、そちらを参考にさせてもらい、やってみることにした。尚、そのサイトへのリンクはしていないが、上記の記事名で検索すれば、簡単にサイトが見つかる。



ではまず、bloggerの管理画面から、「テンプレート」→「カスタマイズ」→「上級者向け」→「ページテキスト」と進んで、下の画面を出し、オレンジ色の丸で囲んだ石器人には恐れ多い「上級者向け」をクリック。

初級者以下の人間なんだけど…




すると、こんな画面になるので、メニュー項目の中のオレンジ色で囲んだ「CSSを追加」を、意味もわからないままクリックする。

CSSが何かもわからずにクリックする…




「CSSを追加」画面になったら、上記「メモロウ」さんのサイトを参考にして、以下の文字を入力してやる。"〇〇〇〇〇〇"の部分には、優先的に使いたいフォントの種類を入力してやればいい。尚、これは記事のテキストだけを変更するやり方」で、「メモロウ」さんのサイトには、他にも「記事とタイトル」のフォントを変更するやり方など、色々な方法が載っている。

-入力文-

body { font-family:"〇〇〇〇〇〇","meiryo","メイリオ","MS Pゴシック",sans-serif; }





今回は"HG丸ゴシックM-PRO"を使いたかったので、"〇〇〇〇〇〇"の部分を

body { font-family:"HG丸ゴシックM-PRO","meiryo","メイリオ","MS Pゴシック",sans-serif; }

とした。


これでblogger記事の本文が、"HG丸ゴシックM-PRO","meiryo","メイリオ","MS Pゴシック"と四種類あるフォントの内、一番最初にある:"HG丸ゴシックM-PRO"のフォントで表示されるようになるらしい。



これをさっき呼び出して置いた「CSSを追加」画面で入力したのが、下の写真。

入力したら右上の「ブログに適用」→「bloggerに戻る」をクリック

「カスタムCSSを追加」の拡大。




入力が終わったら、右上の「ブログに適用」を押してから、「bloggerに戻る」を押して戻り、記事のフォントが変わっているかを確認すると、アラ不思議!ちゃんと記事の本文がHG丸ゴシックM-PROのフォントに変わっているではないか!


「メモロウ」さんの管理人様、大変参考になりました。ありがとうございました。



(続く)  (前回)



[御案内]  [目 次]  [連絡先]  [ブログ]  [なんもわかりません!]

-関連記事-
なんもわかりません!

-リンク-
石器人の足掻き
何処だべ?ここは