ブログときどきオトン

飽くなき好奇心で発信し続けるブログ

NVIDIAコントロールパネルの最適化設定について
パソコンを軽くして最速にする方法
ゲームを最高のパフォーマンスで遊ぶためのメモリ解放
チプカシ(チープCASIO)を買ってみた
マツキヨのエナジードリンクが最強らしいので飲んでみた
オピネルを買ったのでオイル漬けをやってみた
メガネのズレ落ち防止シリコンフックが良かった

ブログの本文ページ幅を見直して読みやすくしてみた

こんにちは、こーんです。

ブログをはじめてから9ヶ月が過ぎようとしてます。

ブログを書くことが習慣になったので毎日何の苦もなく、それどころか近頃ちょっと新鮮さより惰性になってきているところもありますがブログをはじめた頃より書くことを楽しんでます。

最近ではあまり自分のブログは見なくなったのですが、PCで見たときに少し読みにくいなと感じたので、細かい部分ですがページの幅をいじってみました。

1行40文字以内が読みやすい

書籍でもブログでもだいたい1行40文字以内が読みやすいかなと思います。

www.shoubaisekkei.co.jp

文字サイズと実際の画面幅でいえば「note」など読みやすいですよね。

書き手も読み手も集中できる良いサイズだと思います。

note.mu

「note」の本文幅を調べたところ620pxのようです。

ひと昔前だとPCの画面サイズを考えて幅を考えていましたがいまでは読みやすさを考慮する時代ですね。

f:id:coizne:20180330083316p:plain

620pxでフォントサイズが18pxぐらいだとだいたい1行35文字ぐらいに収まるようです。

ということでわたしも本文部分のみ620pxにいじってみます。

はてなブログの「Life」テンプレートなら

わたしはシンプルイズベストで「Life」テンプレートを使用しています。

ほんとに使いやすくこれにしてよかった。

2カラムデザインだといろいろと気を使うので1カラムほんと楽です。

www.tokidokioton.com

今回いじった内容はスタイルシートに以下を追記しただけです。

非常にかんたん。

はてなブログのスタイルシートは、

「デザイン」 → 「デザインCSS」

から編集します。

コンテンツの幅調整はこれだけ入れれば大丈夫です。

.entry-content {
    max-width: 620px;
    }

コンテンツの幅調整だけだとタイトルや日付、カテゴリの表示は別属性が付いているためついでにタイトル部分も変更しましょう。

.entry-header {
    text-align:left;
    max-width: 620px;
    margin: auto;
}

記事タイトルがデフォルトだとセンター寄せになっているため「text-align」で左寄せをセットします。

幅は620pxで問題ありませんが幅だけだと左端から620pxとして機能してしまうため「margin:auto;」を使います。

これを領域の設定に使うと左右に自動で余白をとってくれるため結果的にセンタリングの効果があります。

このテクニックはよく使うので覚えておいた方が良いです。

わたしは画像を常にセンタリング表示させるために画像タグに同スタイルを設定したりしてます。

自己満足だが洗練されてきた

1カラムのスッキリしたブログデザインに加えてページ幅を狭めることで読みやすさも画像の表示サイズも画面で見やすくなったと思います。

スマホ用のレスポンシブデザインにもタイトルの左寄せなどは反映するので個別に設定する必要がなくプチカスタマイズできますので「Life」テンプレートをお使いの方はお試しください。

見やすいデザインで楽しいブログライフを〜!

スポンサーリンク

このブログについて  広告に関する免責事項 アクセス解析について RSS

© 2017-2018 ブログときどきオトン