その8：カッコ良すぎるBlogger最強の有料テンプレートGeek Pressを使い倒す

おすすめ記事ピックアップ

前回（http://www.furimuke.com/2014/05/7bloggergeek-press.html）に続きまして、日本語化してゆきます。初期設定では、英語と日本語のバランスが悪くガタガタに見えてしまいます。英語向けのCSS設定を日本語向けにしたいと思います。

テンプレートから、HTMLの編集に入りましょう。

35行目から45行目のCSSでフォントを設定しています。品質の低いテンプレートでは、あちこちにフォント設定が入っているのですが、このGeek Pressは、まとまっています。最高です。

この4箇所になります。ここを日本語フォントに変更します。

日本語CSSフォントの設定はいろんな説があります。気になる人は自分で調べて見てください。私は、この設定を使っています。

CSSのfont-family指定はこれで決まり！（2013春）
http://d.hatena.ne.jp/n-yuji/20130225/p1

'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif

下記コードの黄色い部分を上記に書き換えます。

<Group description="Body Object" selector="body">
 <Variable name="body.font" description="Body Font" type="font"
 default="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
 <Variable name="body.background.color" description="Body Background Color" type="color" default="#F8F8F8" value="#F8F8F8"/>
 <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
</Group>

<Variable name="emfont" description="Emphasis Font" type="font"
 default="normal normal 20px Oswald" value="normal normal 20px Oswald"/>

こんな感じにします。このまま貼り付けても使えます。

<Group description="Body Object" selector="body">
 <Variable name="body.font" description="Body Font" type="font"
 default="normal normal 16px 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif" value="normal normal 16px 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif"/>
 <Variable name="body.background.color" description="Body Background Color" type="color" default="#F8F8F8" value="#F8F8F8"/>
 <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
</Group>

<Variable name="emfont" description="Emphasis Font" type="font"
 default="normal normal 20px 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif" value="normal normal 20px 'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif"/>

日本語対応になりました。ズレている部分は、次回修正します。

次回に続く。
http://www.furimuke.com/2014/05/9bloggergeek-press.html



「Geek Press」は20＄の有料テンプレートです。購入すれば、ずーっと使えます。Live Previewを押せば動くデモみれます。
Geek Press - Responsive News & Magazine Template