2015年8月10日月曜日

bloggerのフォントと文字サイズを変える方法


bloggerブログのテンプレートの文字が小さくて読みづらいので、変更することにした時の健忘録です。

フォントをメイリオに変更

bloggerのフォントは、何も設定していない状態だとゴシック体になっているのでメイリオに変更しました。メイリオは、Windows Vista日本語版の標準フォントとして開発されましたフォントです。語源は「明瞭」というだけあって、読みやすくデザインされています。

フォントの変更は、タグのコピペだけで簡単に変更できます。
テンプレートから「カスタマイズ」ボタンを押して、テンプレートデザイナーの画面にします。

「上級者向け」→「CSSを追加」カスタムCSSを追加の欄に下記のタグをコピペ。

* { font-family:"meiryo","メイリオ","MS Pゴシック",sans-serif; }</pre>
h2 { font-family:"meiryo","メイリオ","MS Pゴシック",sans-serif; }</pre>

適用ボタンを押して完了です。

フォントが変わっただけですが、ブログの本文が柔らかくスタイリッシュになりました。

今回のカスタムはこちらの記事を参考にさせていただきました。
とっても丁寧に解説されていていてわかりやすです。

フォントサイズを変更

ついでに文字が小さいので少し大きくすることにしました。

テンプレートから「HTMLの編集」ボタンを押してHTMLの画面を開きます。
HTMLをクリックしてカーソルを表示させてからキーボードで「Ctrl+f」を押します。

するとHTML右上にページ内検索が出てきますので「post-body」と入力し、文字サイズが記述されている部分を探します。

.post-body {
  font-size: 110%;

この110%の部分を好きな値に変更し、「テンプレートを保存」で完了です。

0 件のコメント :

コメントを投稿