どうも！
Ganapatiです。
Zeno-Tealというはてなブログのテーマで指定されているフォントが一つしかなかったのでちょっと気になってフォントを設定し直しました。
ひねりも何もありません。
色々調べて分かった2017年流行りのfont‐family設定
これです
body{
font-family:-apple-system, BlinkMacSystemFont,'Avenir','Helvetica Neue','Helvetica','Hiragino Sans','ヒラギノ角ゴシック','游ゴシック Medium',YuGothicM,YuGothic,'メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}
bodyでなくとも良いのですがZeno-Tealではこんな感じでした。
前半はApple系のための設定
-apple‐systemからヒラギノ角ゴシックまではApple系の端末を優先した設定になっています。
なぜApple系を優先させるかといえば、フォントの美しさがWindows系と別物なくらい素晴らしいからです。
個人的にはHelveticaNeueとヒラギノ角ゴシックだけでも良いかなと思いましたが、まあ流行に乗って設定しています。
後半はWindows系のための設定
今回Android系は敢えて無視しました。Notoフォントがもう少し広まったらWindows系の前に設定しようと思います。はてなブログは色々重いのでWEBフォントを読みに行くのは今回避けました。
そのうえで迷ったのが、メイリオを先にするか游ゴシックを先にするかです。
これは私のブログの場合はビジネス系ネタが多いので雰囲気的に游ゴシックにしました。
もっと軽いテイストならメイリオ優先でも良いかもしれません。これは好みの問題。
その他フォント系の設定
関連記事などのタイトルのフォントサイズを変更
関連記事だけではないのですが、フォントサイズをやや大きくしました。
レスポンシブウェブデザインではpx指定は避けたいので%指定で。
本文中は120% 関連記事は140% に設定しました。
文頭の設定の中に以下を入れます。
font-size:120%;
それから関連記事に関して以下設定します。
.urllist-title-link{
font-size:140%;
}
文字間をちょっとだけ広く
本文中の文字が狭いと硬い文章が多い当ブログがさらに硬くなってしまうので少しだけ広くしました。使うのはletter-spacingです。
.page-entry .entry-content { letter-spacing: 0.05em; }