STINGER カスタマイズ〜記事の幅を変える方法〜【WordPress】

STINGER7のデフォルトの記事の幅が、少し広いなぁと感じていましたので、幅を変える方法を調べて実行してみました。

現状はこんな感じ。１行でだいたい48文字くらい。１行で読みやすい文字数は、30文字前後と言われているので、現状だと文字数が多くて読みにくい。なので、記事の幅を変えてみることにしました。

STINGER7の画面幅は上図のように規定されています。

デフォルトだと、wrapper（サイト全体の幅）は1060px。aside（右サイドバーの幅）は300px。余った部分がmain（記事の幅）となり760pxです。

wrapper（1060px） − aside（300px）＝ main（760px）

以上の式が成り立ちます。mainといいつつ、実は右サイドバーを引いた分の余りの数値が記事の幅になっているんですね。なので、wrapper（サイト全体の幅）を狭めてやれば、必然的にmain（記事の幅）も狭まるというわけです。

狭める方法は、STINGERの子テーマCSSに、wrapperの幅を指定するコードを書くだけです。子テーマについては前回の記事を参照していただければと思います。

「外観」「テーマの編集」からスタイルシートに下記のコードを記述します。

widthは幅を指定する時に使いますが、今回は「max-width」で指定します。というのもwidthで指定すると、その数値で固定されてしまうので、スマホで見たときにおかしくなってしまうんです。なので「max-width」で。

色々試した結果、私の場合は860pxが一番しっくり来ました。

こんな感じになりました。１行の文字数はだいたい35文字くらいです。

変更前の幅。やはり文字が細かくて読みにくく感じます。文章は内容も大事だけど、読んだ時に読み手にストレスを与えないような見た目も大事です。私の場合、単に小さな字が読みにくくなってきたという加齢の影響もありますが。

細かい部分ですが、実はサイトの質にかなり直結する部分かな〜とも思います。そういえばこのはてなブログの文字数も少し多いかな？それで作ってきちゃったので、今さら変えるとすべての記事を見直さないと………つらたん

最初の設計が肝心ですね。