ブログの記事幅とサイドバーの幅 Twenty Seventeen

最近のディスプレーはワイド型が主流を占めていますが、ほとんどのホームぺージやブログの記事幅は以前のままになっています。では記事の幅はどのようにすれば良いのか考えてみました。

記事幅は広げたほうが良いのでは

結論から言うと、現在のワイドモニターにあわせて、読みやすい幅まで広げるのが良いですね。

ほとんどのＨＰやブログの場合、サイドバーを設けていますから本文の記事は狭くなります。その狭いところに長々と記事を書くと、記事の全体像が見ずらくなるし、下にスクロールするのも嫌になってきます。

wordpress スタイルシートの変更

数値を変更するといろんなサイズにできます。

@media screen and (min-width: 48em)　の下にある

/* Layout */

.wrap {
max-width: 1400px;      /* 記事全幅　1000pxを1400px */
padding-left: 4em;        /* 左余白　5emを4em */
padding-right: 3em;     /* 右余白　5emを3em   右側はスクロールバーがあり広く見えるので狭くした */
}

.has-sidebar:not(.error404) #primary {
float: left;
width: 59%;                 /* 記事幅　58%を59% */
}

.has-sidebar #secondary {
float: right;
padding-top: 0;
width: 34%;                 /* サイドバー幅　36%を34% */
}

.navigation-top .wrap {
max-width: 1400px;     /* グローバルナビゲーションメニューの横幅　1000pxを1400px */
/* The font size is 14px here and we need 50px padding in ems */
padding: 0.75em 3.417em;
}

以上のように変更しました。

ワイドディスプレーの使われ方

私はワイドディスプレーと4：3ディスプレーの2個を使っています。サイトを見るときは、ワイド画面の方でウィンドウを125％まで拡大し、記事の両サイドに余裕ができる程まで幅を狭くして見ています。

全画面で見る人や、ウィンドウをいくつも重ねてみる人もいます。

ワイドの良いところは

幅が広い分、たくさんの情報を画面に表示できるところです。記事のスクロールも短くなるので読者にとっては素早く情報を取り入れることができます。

画面を少し小さくしておけば、デスクトップからアプリケーションを簡単に開くことができます。

たくさんのファイルを開いていても画面が広いので余裕があります。

どうして記事幅が狭いのか

小さいディスプレーで大きい画面を見ると、デザインが変って見ずらくなるから、一番小さいサイズに合わせて記事を作っているのです。

下がヤフーの拡大無の画面です。

真中に小さく表示されていて違和感を感じますね。

4：3のディスプレーはもう発売していないのでは

ほとんどワイドディスプレーになっていますが、最初に買ったディスプレーが壊れない限りは使いますね。また中小企業や個人商店などでも、小さいディスプレーはまだまだ使われています。

どうすれば良いのか？

私は老眼なので文字を拡大しないと読めませんから、画面を125%に拡大して記事を見ていますが、100%画面にすると、記事が真ん中に細くなっています。かなり多くの人がこの画面で見ているとすると、記事幅はもっと広くしておかないといけませんね。

記事幅が広くなりました。
また一方で、小さい画面にしてもデザインがさほど変わらないように記事を作ることも必要です。

追記　2018.4.28

最近になって、このブログのサイドバーを無くして1カラムにしてみました。すると記事やリストが中央に表示され大変すっきりして見えます。今まではサイドバーがあったので、記事幅はなるだけ広くした方が見やすかったのですが、記事を中央に表示した場合、広すぎるとまた違和感を感じるのです。

記事幅は800pxから900pxが一番見やすいのではと思います。
ご参考までに、このブログの全幅は1カラム時が820px、2カラム時は1100pxにして表示は１２５％にしています。