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

こんにちは|‘ω‘*) うぇぶ屋見習いの fm です。
これから当ブログのデザインをガシガシ改修して、ブログ閲覧数UP+コーディングの学習+記事のネタ!という一石三鳥をめざしてがんばるよていです。みていです。
というわけで、まず手始めにフォントの調整をします!
1. テンプレートデザイナーに移動
画面左側にある各種メニューの中から「テンプレート」をクリックすると、下の図のような、テンプレートの編集画面が表示されます。
「ブログで使用中」のところにあるオレンジ色のボタン「カスタマイズ」をクリックしましょう!
下の図のような、「Blogger テンプレート デザイナー」に移動できます(*‘ω‘ *)
……移動できますよね(*‘ω‘ *)
これは、Blogger のデザインをかんたんにカスタマイズできるツール画面になります。
※参考: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;
}
こんな感じです。
- font-size を 62.5%(10px)にしてブラウザごとのデフォルトサイズを整える
- CSS3 からの新単位、rem を使って全体の文字サイズを 1.4rem(14px)にする
- フォントの種類をちょいちょい変える
- font-family には、適用優先度の高いフォントから書いていきます
- 半角英数は欧文フォントで表示したほうがもっさりしないので、はじめに欧文フォント Verdana を指定しています
- Verdana の他にも Arial や Helvetica、GillSans などうつくしい欧文フォントがありますが、今回は Mac も Win もほぼカバーしている& Web 表示の考慮がされている Verdana を採用してみます
- ちなみに Robot は Android で使われているフォントです。かわいい
- line-height(行間)を 1.5 に整える
こんな感じで、テンプレートの既存スタイルに上書きしていくと、オリジナリティ溢れたブログに近づけるきがします。
次回は「見出し」のカスタマイズをよていしております。みていです。
|‘ω‘ *)ノシ