今日は記事の幅を変更する方法です。
ブログの最適な記事幅はどの位なのかを検証してみました！
photo by Christian Schnettelker
ブログの記事幅について考えてみる
ブログというからには記事の文章の部分がメイン、ご飯で例えれば主食になるはずなので大事な部分だと言えるでしょう。
本って読みやすいように工夫されているらしいですよ
本や雑誌は、ぶ厚かったり、大きすぎても、小さすぎても読みにくいですよね。実は読み手が読みやすいように工夫が施されているという話です。「DTP」というらしいのですがレイアウトの面で読みやすいようにするためのものらしいです。
ブログも「読む・見るモノであり」「伝わるモノ」でもあります。やはり ”読みやすさ” ココが重要になってきます！
ブログの最適な記事といっても「○○○pxの幅が一番いい！」 と一つだけの正解があるわけではないと思いますが。
ブログに最適な記事幅とは
当ブログを見てみると
この幅についてリサーチすると600～700px前後幅の「この位の幅が今の主流だ」という意見もあるみたいです。
見る環境によっても差はあると思いますが私的にはなんだか狭く感じてしまいます。ただ、広くし過ぎても疲れてしまうと思うのでやや広くする程度にする事にしました。
CSSでレイアウトを変更する
それでは変更してみましょう！
記事幅を変更する
記事幅を変更するにはCSSを変更する必要があります。WP管理画面の「外観」→「テーマの編集」から変更する事ができます。
そして、スタイルシート「style.css」から「#main」という記述を探してください。([Ctrl]＋[F]で探すのがお勧めです)
▼この中の「width」の数値を変更すれば記事幅が変わります！細かい調節が必要な場合数値は小数点まで指定できます
#main {
float: left;
box-sizing: border-box;
width: 740px;
padding: 20px 29px;
border:1px solid #ddd;
background-color:#fff;
border-radius: 4px;
margin-bottom: 30px;
}
- 「Width」… 記事の幅
- 「padding」… 記事内の余白 ※ 「padding」内で指定する数によって変更箇所が変わります。2つ(上下、左右) 3つ(上、左右、下) 4つ(上、右、下、左)
- 「border」… 記事の周りのフチのサイズ、色
- 「bockground-color」… 記事内の色
- 「border-radius」… 記事の周りのフチを丸くする
フォントサイズを変更する
記事幅を変更したらフォントサイズも読みやすいと思えるサイズに変更しましょう。
p {
font-size: 15px;
}
まとめ
今回は記事の幅についての検証をご紹介しました！
CSSはサイトのデザインの基本なので覚えておくとブログをカスタマイズする上で色々と応用できる事が多いと思います。
