ブログのデザインを理想に近づけるのは難しいですよね。
特にスマホ版をカスタマイズする方法があまり検索しても出てこなくて悪戦苦闘したので、自分が設定した方法を書いておこうと思います。
1. デザインを選択
はてなブログのデザインは、デザイン＞デザインテーマ で出てくる左のサイドバー一覧から選択できます。
デザインを選択
デザインテーマを選択
この中に好みのデザインがない場合、一番下の「デザインストアからテーマを探す」で好みのデザインを探します。
デザインストアから人気の「ミニマリスト」を選択して設定しました。
レスポンシブデザイン対応なので、スマホ版も自動でカスタマイズされます。
この時点で、デザイン＞カスタマイズ の一番下の「デザインCSS」に以下のコードが加えられた状態になります。
/* <system section="theme" selected="8599973812270629022"> */
@import url("https://blog.hatena.ne.jp/-/theme/8599973812270629022.css");
/* </system> */
2. 問題点
このままだと、いくつか問題点があると思います。
字が小さい
変更前のスマホ版ブログトップの記事一覧ページ↓
記事ページ内はこんな風でした（変更前）↓
大きい画面でみると大きくみえるかもしれませんが、この写真の横幅がスマホサイズになると思ってください。
結構字が小さいです。
3. 文字を大きくする
デザイン＞カスタマイズ の一番下の「デザインCSS」に以下のコードを貼り付けます。
/* 文字の大きさ */
.entry-content {
font-size:18px!important;
line-height:1.8em;
}
上のfont-sizeの18の部分をお好みの大きさに設定できます。
!importantをつけることで以前の設定に上書きができます。
これを貼り付けた結果がこちら（変更後）↓
この様に本文の文字の大きさを大きくすることができました。
しかし、トップ画面の記事一覧部分のフォントサイズや目次のフォントサイズは変化していません。
また、目次の見出しも、
ただの太字で少しメリハリがないかな、と思います。
この部分の変更は別日記に書きました↓
ブログ記事の見出しのデザインと目次のフォントを大きくする方法 - ウーパールーパーの智慧
hatenaブログのスマホの記事一覧ページを記事タイトルのみにし、記事タイトルの文字を大きくする方法 - ウーパールーパーの智慧
