Blogger カスタマイズしてみた【No.1】

2014年8月18日月曜日 fukui,


こんにちは｜‘ω‘*) うぇぶ屋見習いの fm です。
これから当ブログのデザインをガシガシ改修して、ブログ閲覧数UP＋コーディングの学習＋記事のネタ！という一石三鳥をめざしてがんばるよていです。みていです。

というわけで、まず手始めにフォントの調整をします！


1. テンプレートデザイナーに移動

画面左側にある各種メニューの中から「テンプレート」をクリックすると、下の図のような、テンプレートの編集画面が表示されます。
「ブログで使用中」のところにあるオレンジ色のボタン「カスタマイズ」をクリックしましょう！


下の図のような、「Blogger テンプレート デザイナー」に移動できます(*‘ω‘ *)
……移動できますよね(*‘ω‘ *)


これは、Blogger のデザインをかんたんにカスタマイズできるツール画面になります。
背景を変えたり、レイアウトを変えたり、オリジナルのCSSを追加できたり、見た目のカスタマイズがいろいろできるべんりなやつです。
※参考：Blogger テンプレート デザイナー

2. CSSを追加

ということで、CSSを追加していきましょー。
画面上部のメニューから、 上級者向け ＞ CSSを追加 を選択します。


まっさらなエディタが出てきました！
ここにがしがしCSSを追加していきますよー(*｀ω´*)
ソースどーん。

html {
  font-size: 62.5%; /* = 10px */
}
body {
  font-size: 14px; /* IE対策 */
  font-size: 1.4rem;
  font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif !important;
  line-height: 1.5;
}



こんな感じです。
  1. font-size を 62.5%（10px）にしてブラウザごとのデフォルトサイズを整える
  2. CSS3 からの新単位、rem を使って全体の文字サイズを 1.4rem（14px）にする
  3. フォントの種類をちょいちょい変える
    • font-family には、適用優先度の高いフォントから書いていきます
    • 半角英数は欧文フォントで表示したほうがもっさりしないので、はじめに欧文フォント Verdana を指定しています
    • Verdana の他にも Arial や Helvetica、GillSans などうつくしい欧文フォントがありますが、今回は Mac も Win もほぼカバーしている＆ Web 表示の考慮がされている Verdana を採用してみます
    • ちなみに Robot は Android で使われているフォントです。かわいい
  4. line-height（行間）を 1.5 に整える
可読性を重視するならもうすこし font-size を大きくしたほうがよいかなとか、文字色も純粋な黒じゃなくてちょっと明るい黒にしようかなとか、いろいろ思いつつこれで基本のフォントの設定はOKとします(*‘ω‘ *)

こんな感じで、テンプレートの既存スタイルに上書きしていくと、オリジナリティ溢れたブログに近づけるきがします。
次回は「見出し」のカスタマイズをよていしております。みていです。

｜‘ω‘ *)ﾉｼ