2020/01/18 スマホ対応しました。

概要

noteのレイアウト、文章読みやすくて素敵だな、、、それに比べて自分のブログはなんか読みにくいな・・・と思ったので、頑張って寄せてみました。

はてなブログのテンプレート「Minimalism」を使っているのですが、元々かなり変更を加えています。cssは載っけますが、そのままコピペだと動かないかもしれません、ごめんなさい。

概要
フォント
全体の幅
余白/フォントサイズ
まとめ
今までのMinimalismの修正

フォント

noteのフォントは

  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;

が指定されています。

また、もうひとつ大事な要素として、

-webkit-font-smoothing: antialiased;

があります。webkit-font-smoothingというのは知らなかったのですが、mac限定で良い感じにフォントを描画してくれるようです。

WebKit implements a similar property, but with different values: -webkit-font-smoothing. It only works on Mac OS X/macOS.https://t.co/WxNkYcZVfF
— ダイスケ＠フリーランスのエンジニア (@moyashidaisuke) January 13, 2020

私の環境ではこれを入れると文字がシャープになってすごいスッキリしました。今回の変更で一番効きました。

というわけではてなブログのcssには、

/* 全体 */
body {
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* タイトルのフォント変更 */
#blog-title{
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* タイトル説明のフォント変更 */
#blog-description{
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 記事のフォント変更 */
.entry-content {
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
  color: #222;
  -webkit-font-smoothing: antialiased;
}

/* 記事タイトル・カテゴリータイトルのフォント種類・文字間隔（20190601）変更 */
.entry-title, .archive-heading {
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
  color: #222;
  -webkit-font-smoothing: antialiased;
}

/* プロフィールIDのフォント種類変更 */
.id a {
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* プロフィールのフォント種類変更 */
.hatena-module-profile .profile-description {
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Segoe UI,Hiragino Kaku Gothic ProN,Hiragino Sans,ヒラギノ角ゴ ProN W3,Arial,メイリオ,Meiryo,sans-serif;
  -webkit-font-smoothing: antialiased;
}

とします。複数箇所いれないといけないのは、Minimalismの仕様です。

はてなブログのテンプレート「Minimalism」をカスタマイズした② - もやぶろ

全体の幅

noteはPCレイアウトでもサイドバーが無いすっきり仕様で、さらに余白も贅沢に取られています。

今回、Minimalismのサイドバーは残しつつ、本文の幅を同じサイズにしてすっきりさをできるだけ寄せてみました。本文の幅をせまくした分、サイドバーが目立ってしまってので、サイドバーも控えめサイズにしています。

@media screen and (min-width: 640px) {
  #main {
    width: 620px;
  }
    #box2 {
    width: 620px;
  }
}
@media screen and (min-width: 1138px) {
  #box2 {
    width: 250px;
  }
}

余白/フォントサイズ

ブロック（pタグ）の余白、行の間隔も大きめにとってあるのがnoteの特徴です。詰まってると読みにくいんですね。

というわけで合わせます。

.entry-content p {
  font-size: 18px;   
  line-height: 36px;
  margin-top: 36px;
  margin-bottom: 36px;
}

/* スマホ */
@media screen and (max-width: 640px) {
  .entry-content p {
    font-size: 16px;   
    line-height: 30px;
  }
}