Simplicityの記事幅を変更するCSSカスタマイズ

WordPress無料テーマSimplicityのCSSをちょっとずつカスタマイズしています。

Simplicityの横幅は初期設定だと記事カラム全体が740pxで本文の横幅が680pxです。

他のWordPressブログをいろいろと見てみるとだいたい本文横幅600～700px程度が主流でSimplicityは平均よりも少し横幅が広いようです。

横幅が広いブログは写真が主役でインパクトを与えるブログとかに向いていると思うんですが自分の場合はどちらかというとテキストとキャプチャ・図解が中心になりそうなので横幅を小さくしてみることにしました。

Simplicityのカスタマイズは子テーマで

まず前提としてCSSをカスタマイズする時は「子テーマ」で編集しましょう。親テーマがアップデートされた時に自分のカスタマイズが無くならずに済みます。

ただでさえSimplicityはテーマの更新頻度が高いので子テーマの設定は必須です。子テーマを使ったことが無いという人は本家のSimplicityサイトを参考にどうぞ。

参考：Simplicityの子テーマをインストールする方法

子テーマがどのように読み込まれているのかは以下の記事に説明があります。

スキン機能のスタイルが呼び出される順番は以下のようになっています。

1. Simplicity（親テーマ）のstyle.css
2. 子テーマのstyle.css
3. スキンのstyle.css
4. Simplicity（親テーマ）のmobile.css
5. 子テーマのmobile.css
6. スキンのmobile.css
7. テーマカスタマイザーで変更したスタイル

引用元：Simplicityのスキン機能の仕様

それではいよいよ具体的にカスタマイズする手順に進んでいきます。

Simplicityの横幅を変更する場所

横幅を狭くしたい本文部分はSimplicityだとどうやらclassにarticleが指定されている部分のようです。（探すにはChromeのデベロッパーツールを使っています。後述）

パソコンのCSSカスタマイズ

まずパソコンのCSS（子テーマフォルダ内のファイル名style.css）に以下の記述を追記しました。

widthに90%を指定して横幅が680pxの90%で612pxになるようにしてみました。

ここでwidthの指定だけだと左寄りになってしまうので全体を中央揃えにするために margin: 0 auto; を追記しています。

という意味で真ん中揃えになるらしいです。上手に説明できません（笑）

モバイルのCSSカスタマイズ

パソコンのCSSだけだとスマホにもwidth:90%が適用されてしまい左右の余白がかなり空いてしまうので、モバイル用のCSSファイル（子テーマフォルダ内のファイル名mobile.css）をカスタマイズします。

モバイルのwidthはほんの少し隙間が空く98%にしました。余白を大きくし過ぎるとiPhone5sなどの小さいスマホで見難くなるので気をつけます。

というのもiPhone5sの画面横幅は320pxなので幅300pxのGoogleアドセンスレクタングル（中サイズ）がはみ出て横スクロールが発生してしまうことがあります。

記事幅を狭くしたビフォーアフター

記事幅を狭くしてどのように見た目が変わったのが画面キャプチャを載せました。ちょっと縮小されているので本当の大きさで比較は出来ませんが本文の幅と左右の余白のバランスに注目してください。

カスタマイズ前（全体740px・本文幅680px・余白30px）

↑これが今までの本文幅と左右余白です。フォントサイズが小さい場合は1行あたりの文字数が45文字程度になることもあってちょっと文字数が多いと感じることもあります。

フォントサイズを18pxとかにすると40文字以内になって多少バランスが良くなります。

カスタマイズ後（全体740px・本文幅612px・余白64px）

↑そしてこれが記事幅を狭くした見た目です。この画面キャプチャでは1行あたり38文字になって一般的に読みやすいとされるバランスになりました。

ただし今度は左右の余白がちょっと広すぎる感じもしますね。（さらに余白も調整しようとすると他の部分も色々変更する必要があるので面倒ですが）

1行あたりの文字数の違い・目線の移動距離

フォントサイズがデフォルトの 16px だった場合1行あたりの文字数は

となりました。文字数はそんなに変わりませんね。それよりも目線の移動距離と余白の影響が大きそうです。

左右の余白がかなり大きくなった

余白の印象はかなり変わっています。ちょっと広すぎるくらい。背景色との違いがハッキリしているブログほどこの余白の大きさによっても読みやすさが変わってきます。

Simplicityの余白も含めた横幅が740pxでその中に本文カラムが収まっているので余白のピクセルを計算すると、

ほぼ倍の余白になっています。個人的には好みの余白ですが好き嫌いには個人差がありそう。

ついでに行間や段落間もカスタマイズ

実は書いていませんでしたが本文もちょっとカスタマイズしています。

これはスマホの表示に問題がなかったのでstyle.cssしかカスタマイズしていません。

横幅を狭めると文章がやや縦に伸びるので行間を少しだけ縮めて塊を強調してみました。

単行本の文章をイメージしてみると2～3行ごとに1行開ける文章ってほとんど無いですよね。

見出し・写真・リスト・コードが途中で次々と挿入されるブログだからこその設定かなと思います。

あと、スマホでの読みやすさも考えないといけないので全てをカバーできる答えは無いと思います。自分のアクセス解析とも相談したほうが良さそうですね。

失敗したポイント

こんな地味なCSSのカスタマイズでも失敗してやり直したことがいくつかありました。

モバイル用CSSを設定していなかった

そもそもスマホで確認しないと気づかないので放ったらかしの人が多いんじゃないでしょうか。

今やブログのアクセスは半分以上がスマホからなんて当たり前なので必ずモバイルでの表示を確認したほうが良いですよ。

ブロガーさんによっては固定ファンが居て「ブログが更新されたらスマホでサクッと見る」読者が多いなら尚さら重要だと思います。

余計な部分までCSSを適用してしまった

「どこからどこまで」か正確にclassやidを指定しないといけません。事前に class や id の配置を把握するのに役立つのがChromeに標準で付いている機能「デベロッパーツール」です。

デベロッパーツールを使うとマウスで選択している部分のHTMLがわかったりして非常に助かります。

CSSカスタマイズしたい人は「Chrome　デベロッパーツール　使い方」などで検索してみてください。

参考にしたブログ

カスタマイズに関してよく参考にさせていただいたブログです。

Naifix

参考：これが読みやすいブログデザイン！有名サイトの記事幅と余白設定を大公開

余白や段落の設定で参考にさせていただいたブログです。ブログ運営のカテゴリがとても勉強になります。

APOLLON

参考：何故ニュースサイトや人気ブログは２カラム／右メニューなのかを考察する

読みやすい本文の幅などを考察している記事です。ブログの見やすさを人間工学的な（視野角などの）数値に落とし込んで考察している記事は少ないので参考になります。

まとめ

文章のレイアウトカスタマイズって超絶地味ですけど超大事だと思います。ただし超難しいですね。

なぜなら読む人によって読みやすいという基準が違うので果たして自分が良いと思う設定が読みやすいのかどうか断言できないんですよね。

どういうブログを書くかで違うから正解はないと思いますけどなるべく読者のストレスが小さくなるような設定ができれば良いですね。