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とします(*‘ω‘ *)

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

|‘ω‘ *)ノシ