ブログのちから

副業やマネタイズ方法、アクセス解析やSEO、Wordpress、SNSの活用、ビジネス書の書評、育児、ダイエットなどを中心にお届けしてます。

Stinger3カスタマイズ;フォントをイジる。

      2014/08/04

key

昨日の記事で、Stinger3っぽさについて色々と検討し、独自色を出すためのカスタマイズについて検討しました。

参考:ブログを本格的にカスタマイズする前に、Stinger3っぽさについて考えてみる。

 

その最後に、「まずは、ファーストビューから」と締めくくりました。

 

が。

 

今日はフォントの変更についてです。www

 

SPONSERD LINK

なぜフォントから?

なぜフォントからイジるのかというと、

主な理由は

  • 訪問して頂いた方のためにも、少しでも記事が読みやすいフォントにしたい
  • カスタマイズが容易な割に印象は変わる
  • けど、訪問して頂いた方には意識されにくい。

の3点です。

要は、簡単に印象を変えられる上に、記事も読みやすくできる(ハズ)。

けど、失敗していても大きなダメージは被りにくい(要は小手調べとして、無難www)ためです。

 

Stinger3 デフォルト設定

フォントはスタイルシートで設定されています。

Stinger3 デフォルトでは、フォントの指定は下記のコードの通りです。

デフォルト:

個人的には、

MAC系はヒラギノ、Windows系ではメイリオが読みやすいかな?と思ってます。

という訳で、ヒラギノ、メイリオをベースに色々と試していたんですが、

色々調べていくうちに、色々と検討して下さっているサイトを発見。

 

参考:font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’,Meiryo, sans-serif;

参考:【備忘録】今現在のfont-family指定の最善解。Androidまで意識するとこうなりました! | ultimate-ez.com

 

上記サイトを参考にあれこれ試した結果、結局、下記のコードで落ち着きました。

 

ちなみに、WebフォントでAndroidの表示制御~については、はなからパスしています。www

 

結果

変更前はこんな感じ。

font_before

全体的に、スッキリした印象です。

これに対し、変更後はこんな感じ。

font_after

全体的に、文字がクッキリして見えて、フォントサイズも自動的に少し大きくなっていますね。

なかなか良い感じです。^^

 

まぁ、訪問して下さった方々が特に意識しないレベルの、微々たる差かもしれませんが。

SPONSERD LINK

 - stinger3 ,

最後までお読み頂きありがとうございます!

よければシェアしてみませんか?
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 470 follow us in feedly
SPONSERD LINK

  関連記事