はてなダイアリーとはてなブログでGoogle Webフォントを使うなど

このはてなダイアリーを表示する英数字のフォントは長らく「Century Gothic」優先、なければ「Trebuchet MS」でやってきた。またはてなブログhttp://ima.hatenablog.jp/)で使っている「Aero」テーマで英数字を表示するフォントは「Maven Pro」という。

最近ほかのWebページでよく見かけてちょっといい感じのフォントが「Lato」というらしく、これに変えてみようと思った。

コンピュータにインストールする用のLatoのフォントファイルは以下からダウンロードできる。

「Lato」はGoogleが提供していてOS標準のフォントではないが、Latoがインストールされていないパソコンでも「Webフォント」というしくみを使ってブラウザに表示させることができる。

はてなブログへの導入方法は以下で解説されている。

2つの記事で取得するコードが「@import{…}」と「<link…>」という違いはあるが結果は同じである。

今回使う「Lato」向けのCSSは以下から取得した。

※ここから下の内容は公開後修正しています

フォントを選ぶとき、「Normal 400」に加えて斜体の「Normal 400 Italic」と太字の「Bold 700」、それから太字で斜体の「Bold 700 Italic」も選択しておくとよい。

f:id:Imamura:20140513224637p:plain

「Normal 400 Italic」(斜体)と「Bold 700 Italic」(斜体で太字)はお好みで。日本語主体のページでは斜体は見づらくて使われないことが多いから、斜体を使わないなら不要。

はてなブログでは記事末尾に表示されるニックネームや「×時間前」などの行がデフォルトだと斜体なので斜体も一緒に使わせてもらうのがよい(スタイルシートに「.entry-footer-section {font-style:normal;}」を指定して、この行の斜体表示をやめてもよい)。

斜体も選択してコードを取得するときれいに表示される(WindowsGoogle Chromeでの表示例)
f:id:Imamura:20140513223800p:plain
斜体を含めないときれいに表示されない
f:id:Imamura:20140513223801p:plain

はてなブログはてなダイアリーともページ全体に「Lato」を指定するスタイルシートは以下。

body{font-family:'Lato', sans-serif;}

(適用しているテーマによってはうまくいかないかもしれない。末尾の「;}」の前に「!important」をつけて「body{font-family:'Lato', sans-serif!important;}」にするといけるかも)

Latoはゴシック体なので、Safariなど標準では明朝体で表示するブラウザ向けに「sans-serif」(ゴシック体での表示)も指定してある。

また、はてなダイアリーは「@import{…}」には非対応だった。「http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic」へアクセスして「@font-face{…}」に展開されたCSSを「スタイルシート」欄に入れたら「font-family:Lato;」を使えるようになった。(はてなグループは@import、@fontoとも非対応)

展開されたCSSの例(アクセスするごとに変わります)
f:id:Imamura:20140513225647p:plain

はてなブログの「Maven Pro」はこんなフォント。

f:id:Imamura:20140513123645p:plain

「Lato」にするとこんな感じ。

f:id:Imamura:20140513123644p:plain

あわせて、はてなブログのデザインもちょっと変えた。今までのデザインではいくつかの領域に影がついていた。プロフィールアイコンをフラット調にしたのに合わせて、この影をなくした。

「Aero」テーマでは影のCSSは以下のように指定されている。

#globalheader-container {box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);}
#main {box-shadow: 5px 0px 10px -10px rgba(0, 0, 0, 0.7);}
#content-inner {box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);}

以下のように、影の指定を「なし」にした。

#globalheader-container, #content-inner, #main {box-shadow:none;}
これが
f:id:Imamura:20140513113331p:plain
こうなった
f:id:Imamura:20140513113330p:plain

すっきり。

ブログのタイトルとかサイドバーの項目名についている影もなくそうかな。ちょっと考えよう。

追記:Windowsの人はMacTypeを入れるときれいに表示されます

ClearType(通常)とMacTypeの表示例
f:id:Imamura:20130514225138p:plain

追記2:はてなブログはさらにデザイン変更

はてなブログはさらにCSSをいじった。各種タイトルなどの影と罫線をなくし、記事のサムネイルつき一覧は上下の間隔を少し狭くした。

これが
f:id:Imamura:20140514012139p:plain
こうなった
f:id:Imamura:20140514012140p:plain

詳しいCSSは以下に。