IT系女子ログ

Webデザイナー目線のあれこれ話。デザインもコーディングも勉強中。

はてなブログのフォントの種類を変えました

このIT系女子ログのフォントの設定を変更しました。

今使用させて頂いているテーマは、kimixさんのmurmur - skyblueで、フォントはヒラギノ明朝なのですが、『村上さんのところ』を見て、「このフォントかわいい!これにしたい!」ということで、衝動的に変更してみました。ちなみに『村上さんのところ』は游ゴシックを使用されていました。

f:id:tosssaurus:20150216003329p:plain

設定方法はCSSを変更するだけなのですが、はてなブログCSSファイルを直接触る方法が分からなかったので、私はとりあえず上書きする方法にしました。

CSSの記述場所は、

ダッシュボード > デザイン > カスタマイズ > デザインCSS

です。
こちらにCSSの記述ができるので、フォントの記述を追加してあげるだけです。

body {
font: 16px/1.8 "游ゴシック", "YuGothic", "Yu Gothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
}
h1.entry-title a {
font: 18px/1.8 "游ゴシック", "YuGothic", "Yu Gothic", 'ヒラギノ角ゴ ProN W3', "Hiragino Kaku Gothic ProN", "Meiryo", Helvetica, Arial, sans-serif;
color: #00addd;
font-weight: bold;

こんな感じです。

私のインストールしているテーマでは、bodyとタイトルのaタグにフォントの記述をするだけで、今のところ游ゴシックの表示になっています。 

 

しかし!この游ゴシック、Windows 8.1Mac OS X Maveriksからの導入フォントなので、游ゴシックが搭載されていないデバイスでは表示されません。その場合はヒラギノ角ゴが表示されるようにCSSを記述してあります。

 

そして悲しいことに、スマホCSS編集がダッシュボードからは出来なかったのでiPhoneではHelvetica Neueや、ヒラギノ角ゴなどが表示されるようになっています。

 

大変そうですが、せっかくWebデザイナーとして働いているので、いつかオリジナルテーマを作成してみたいです。

参考サイト

游ゴシック体ファミリーのくわしい説明


游書体をCSSで指定しよう - Qiita


[M] OS X Mavericksにアップデートするだけで游ゴシック体と游明朝体が使えるぞ | mbdb (モバデビ)


フォントに興味の湧いた方、この機会にさらに知識を深めてみてはいかがでしょうか。

デザイナー初心者や、デザイナーを目指す方におすすめの雑誌です。