おすすめ記事ピックアップ
前回(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
下記コードの黄色い部分を上記に書き換えます。
こんな感じにします。このまま貼り付けても使えます。
日本語対応になりました。ズレている部分は、次回修正します。
次回に続く。
http://www.furimuke.com/2014/05/9bloggergeek-press.html
「Geek Press」は20$の有料テンプレートです。購入すれば、ずーっと使えます。Live Previewを押せば動くデモみれます。
Geek Press - Responsive News & Magazine Template
テンプレートから、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