Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

数字表記におすすめのGoogle Font はてなブログの日付にどうぞ

f:id:syofuso:20170408210311j:plain
このブログではブログタイトルと日付にGoogle FontのJosefin Sansを指定しています。全体にWeb Fontを指定すると見出しやタイトルなど一部分にフォント指定すると、デザインのアクセントになりおすすめです。今回は日付の表示、数字の表示に最適なGoogle Fontについて書いていきます。

はてなブログテーマMinimal Greenでは日付は

    .entry-header .date {font-family: Helvetica, Arial, sans-serif;}

と指定しています。 Arialではこんな感じ。
f:id:syofuso:20170318171503p:plain
Helvetica, Arialもとても見やすいフォントなのでこのままでも良いんですが、ちょっとデザインを印象的に見せたい時にはディテールに変化を付けると良いと思うので、日付のデザインを変えてみましょう。

Lato

f:id:syofuso:20170318173006p:plain

Google fontのページの説明によると、Latoは ポーランドのデザイナーŁukasz Dziedzic氏が2010年の夏に制作を始められたサンセリフ体のフォントです。Latoはポーランド語で夏を意味します。シンプルでクールでとてもかっこいい英数字フォントです。
Latoを日付に指定するとこんな感じ。
f:id:syofuso:20170318173021p:plain

フォント読み込み・指定

head内か、管理画面→デザイン→カスタマイズ→ヘッダ→タイトル下に以下のフォント読み込みを追記します。

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

日付に適応させるには以下のようにフォント指定をします。デザインCSSに追記します。(Minimal Greenではclassを細かく付与しているので!importantが必要ですが、他のテーマでは通常要らないと思います。)

.date {
    font-family: 'Lato', sans-serif !important;
}


Roboto

f:id:syofuso:20170323224307p:plain
f:id:syofuso:20170323221536p:plain
https://fonts.google.com/specimen/Roboto


「Roboto」は、GoogleのデザイナーChristian Robertson氏によって制作されたフォントです。 Android やChrome OS でのデフォルトフォントとして使用されており、スッキリ幾何学なスタイルが見やすいフォントです。Googleによると”モダンだが親しみやすい、エモーショナルなフォント”だそうです。*1

フォント読み込み・指定

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

デザインCSS

.date {
    font-family: 'Roboto', sans-serif !important;
}


Josefin Sans

f:id:syofuso:20170323222642p:plain
f:id:syofuso:20170323222625p:plain
https://fonts.google.com/specimen/Josefin+Sans

Josefin Sansはシンプル・ミニマルながらカーブが可愛らしいタイトル向けのフォントです。数字はちょっと個性的で、おしゃれっぽくなります。

フォント読み込み・指定

<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">

デザインCSS

.date {
     font-family: 'Josefin Sans', sans-serif !important;
}


Montserrat

f:id:syofuso:20170323222812p:plain
f:id:syofuso:20170323222840p:plain
https://fonts.google.com/specimen/Montserrat

MontserratはJulieta Ulanovskyという女性デザイナーが制作したフォントで、彼女が生まれ育ち、仕事の拠点でもあるアルゼンチン・ブエノスアイレスの区”Montserrat,”がその名の由来でしょう。Montserratを使うとクールで引き締まる感じがします。数字は癖がなく汎用性が高いですね。

フォント読み込み・指定

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

デザインCSS

.date {
     font-family: 'Montserrat', sans-serif !important;
}

以上数字向けの4つのGoogle Fontをご紹介しました。是非はてなブログの日付表示にお使い下さい。
関連記事:
design.syofuso.com
design.syofuso.com

 カスタマイズ目次

  • グローバルメニュー
  • シェアボタン
  • 囲み枠
  • ガーリーデザイン
  • ヘッダー周り
  • フッター周り

 はてなブログテーマ制作

 有料カスタマイズサービス

有料にてはてなブログ・アメブロ・WordPressカスタマイズ・制作承っております。

 最新記事