冒険日誌って読みにくくない？

TL; DR

スタイルシートいじって冒険者の広場を見やすくしたって話。

○○さんが冒険日誌『△△』を公開しました

常々思っているのですが、冒険日誌って読みづらくないですか？

なんというか文字小さいし、行間狭いし。せっかくフレやチムメンが日誌公開しても読む気なくなるんですよね。

ちょっと気になったのでどんなスタイルシートが設定されているのか調べてみました。

冒険者の広場・冒険日誌・本文

.XXX {
  color: #343434;
  font-family: MS UI Gothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Helvetica, Arial, HiraKakuProN-W3
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -1.5px;
}

font-size: 12px; は昔結構あったスタイルなんですが、高解像度が当たり前の昨今では小さく感じますね。

letter-spacingは文字詰め設定なんですがマイナスの値が設定されています。要は文字を詰めて配置してるってことなんですが、こちゃっとしてる感はこの辺からきてるんでしょう。

フォントにMS UI Gothicが設定されているのもあまりよくないなぁと。あれってあんま美しいとは思えないんですよねぇ。

じゃあ、どこのサイトが読みやすい？

個人的に読みやすいなぁと感じるブログ系のサイトだと、Mediumやnote.muがあります。

medium.com

note.mu

これらのスタイルを見てみましょう。

Medium / 本文

.XXX {
  color: rgba(0, 0, 0, .84);
  font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
  font-size: 21px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.58;
  letter-spacing: -.003em;
}

フォントサイズが21pxと結構大きめのサイズを指定してますね。文字間隔に若干のマイナスが設定されていますが、海外のサイトなので詰めて表示すると美しく見えるのかもしれません。

note.mu / 本文

.XXX {
  color: #444;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
  font-size: 105%;
  line-height: 2;
}

こちらもフォントサイズは105%とやや大きめ。

行間(line-height)は2に設定されており、だいぶゆったりした感じに。

英文フォントを優先しているので、アルファベットが美しいフォントで表示されるかと思います。

ぼくがかんがえたさいきょうのすたいるしーと

ほとんど書くのは日本語だと思うのでnote.muから~~パクって~~参考にしましょう。

タイトル部分も小さくて見づらいのでこちらも設定します。

.title_diary {
    color: #444;
    font-family: YakuHanJPs, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: 0;
}

.letter_body {
    color: #444;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Arial, "メイリオ", Meiryo, sans-serif;
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0;
}

基本まんまなのですが、広場では親のフォントサイズが62.5%としていされており、その105%とすると結局小さいままなのでpxで絶対指定にしました。大きさ自体は適当。

letter-spacingは親で-1.5pxと指定されているため、ここで明示的に0を指定しました。

作成したスタイルの適用

さてこのままでは絵に描いた餅なので実際に冒険者の広場に適用してみましょう。

Stylusというプラグインを使用します。

chrome.google.com

上記リンクはChrome版ですがFirefox版もあります。

詳しい使い方はちょっとぐぐればすぐわかるかと思います。

ビフォー

f:id:nya_dq10:20180808003847p:plain

アフター

f:id:nya_dq10:20180808003909p:plain

どうでしょう？　見やすくなったと思いませんか？

思いませんか？

思いませんかぁ。。

まぁ、アレっす。感性は人それぞれっていうか。。

にゃぶろぐ

ゆっくりまったりアストルティア