オールニ日記

bloggerブログのテンプレートの文字が小さくて読みづらいので、変更することにした時の健忘録です。 フォントをメイリオに変更 bloggerのフォントは、何も設定していない状態だとゴシック体になっているのでメイリオに変更しました。メイリオは、Windows Vista日本語版の標準フォントとして開発されましたフォントです。語源は「明瞭」というだけあって、読みやすくデザインされています。 フォントの変更は、タグのコピペだけで簡単に変更できます。 テンプレートから「カスタマイズ」ボタンを押して、テンプレートデザイナーの画面にします。 「上級者向け」→「CSSを追加」カスタムCSSを追加の欄に下記のタグをコピペ。 * { font-family:"meiryo","メイリオ","ＭＳ Ｐゴシック",sans-serif; }</pre> h2 { font-family:"meiryo","メイリオ","ＭＳ Ｐゴシック",sans-serif; }</pre> 適用ボタンを押して完了です。 フォントが変わっただけですが、ブログの本文が柔らかくスタイリッシュになりました。 今回のカスタムは こちら の記事を参考にさせていただきました。 とっても丁寧に解説されていていてわかりやすです。 フォントサイズを変更 ついでに文字が小さいので少し大きくすることにしました。 テンプレートから「HTMLの編集」ボタンを押してHTMLの画面を開きます。 HTMLをクリックしてカーソルを表示させてからキーボードで「Ctrl＋f」を押します。 するとHTML右上にページ内検索が出てきますので「post-body」と入力し、文字サイズが記述されている部分を探します。 .post-body {   font-size: 110%; この110%の部分を好きな値に変更し、「テンプレートを保存」で完了です。

投稿タイトルの文字の色を変えた時の健忘録です。文字の色は、HTMLを変更することなくタグのコピペだけで変更できます。 記事タイトルのフォントの色を変更 テンプレートから「カスタマイズ」ボタンを押して テンプレートデザイナーの画面にします。 「上級者向け」→「CSSを追加」カスタムCSSを追加の欄に h3 a:link, h3 a:visited { color: ;#ff0000; をコピペして、「#ff0000;」の部分を好きなカラーコードに変更して保存で完了です。 ※テンプレートによって、記事タイトルがh3ではなくh2やh4の場合もあります。 HTMLで「post-title」を検索してタグに記述されているのを確認してください。 記事タイトルのサイズを変更 テンプレートデザイナー→上級者向け→記事タイトルで変更できます。 こっちは超簡単ですね。 テンプレートデザイナーで一緒に色も変えられたら分かりやすいのになぁ...。