【 QooQ カスタマイズ 】 読みやすいブログを目指して記事欄の幅を変更

こんにちは！ HARU（ @HARU ）です。

ブログはレイアウト次第で、読みやすくもなり、読みづらくもなります。

Blogger のテンプレートである QooQ は、レスポンシブデザインであり、画面サイズにより記事欄の幅が自動で調整されます。

これは QooQ の長所です。

しかしデフォルトのままだと、画面サイズが大きくなれば大きくなるほど横に広がり、記事自体が読みづらくなります。

そこで今回は画面サイズが大きくなっても、記事欄が読みやすいサイズで留まるようなカスタマイズをしてみます。

もちろん、レスポンシブデザインを崩すことはしませんよ！

読みやすいブログとは

読みやすいブログとは、パッと見で読みやすいレイアウトになっているか がとても重要な要素になります。

もちろん文章の言い回しなども大切です。

パッと見で読みやすいレイアウトには文字の大きさ、段落などもありますが、一番注目したい点は記事欄（ 文章欄 ）の横幅のサイズです。

以下に横幅のサイズが異なる２つの例を示します。

記事欄の横幅が大きいものは目を動かす量が増え、内容を集中して読むことができません。

横幅の大きさが適正（ 小さすぎても NG ）であれば、目を動かす量が減り、読みやすく、内容が頭に入りやすくなります。

個人的にはページの真ん中にコンテンツを凝縮することが大事なのかなって考えています。

ちなみに例として表示した横幅が大きいものは、QooQ のデフォルト状態です。

これを読みやすいように調整します。

QooQ 記事欄の横幅を小さくする

QooQ の記事欄の横幅を小さくする方法としては、CSS を変更するだけで簡単にできます。

今回は簡単に小さくする方法と、その方法では解決できないちょっとした問題点を解決した方法の２通りを紹介します。

１：簡単に記事欄の横幅を小さくする

以下の CSS を記述するだけで、簡単に横幅の調整をすることができます。

記述する場所は body の CSSの直下辺りを推奨しています。

  .container {
    width: 70%; /* デフォルトでは 86% */
  }

パターン１の問題点

記述する CSS が一つでとても簡単な方法ですが、個人的に気になる問題点があります。

それは画面サイズ 1400px 以下になると、勿体ない余白ができてしまうことです。

言い換えると、.container だけによる調整だと想定よりも記事欄が小さくなりすぎてしまいました。

この調整方法でも想定したサイズ感が出ている人は、.container の CSS の記述だけで OK です。

動作にも問題は出ないと思います。

２：画面サイズが小さくなっても想定の横幅を維持

記事欄の横幅が最大時に適正のサイズ、小さくなっても小さくなりすぎないように（想定サイズになるように）します。

今回は記事欄の横幅を最大 900 px 、画面サイズ 1400px 以下になっても大きい余白ができないように調整します。

記事欄の横幅調整イメージ

余分な余白を無くすことにより、記事欄の横幅が広がります。

これにより、さらにいろいろな画面サイズに対応できるようになりました。

CSS 変更

既存の CSS ( #main-inner と #main-content ) の変更を行います。

  #main-inner {
    display: flex;
    justify-content: center; /* 追記 */
  }
  #main-content {
    margin-right: 30px;
    width: calc(100% - 346px);
    flex-shrink: 0;
    max-width: 900px; /* 追記 */
  }

CSS 追記

以下の CSS は上記 CSS の変更をしたうえで、画面サイズ 1400px 以下での余白が気になる場合に記述します。

記述する場所は body の CSSの直下辺りを推奨しています。

  .container {
    width: 95%; /* デフォルトでは 86% */
  }

ナビゲーションバーの調整

上記 CSS の追記で width の % を大きく指定した場合、余白は小さくなりますがナビゲーションバーのリストが左側に寄りすぎてしまいます。

気になる場合は以下の CSS を記述し、ナビゲーションバーのリストの位置を変えられます。

#navigation の CSS 直下に記述しましょう。

  #navigation .container {
    width: 80%; /* ナビゲーション内のサイズ調整 */
  }

パターン２の問題点

パターン２の場合、HTML の読み込みの際に遅延が発生してしまうことと、レスポンシブデザインのアドセンス広告を表示している場合、見切れて表示してしまうことがありました。

両方ともブログデザインに対して問題ないレベルの上、アドセンス広告に関してはほとんど出ない症状です。

しかし気づいてしまったので、違う方法を考えてみました。

３：問題点をすべて解決！簡単に調整する方法

今回の目的として画面サイズが大きくなっても、記事欄が読みやすいサイズで留まるようなカスタマイズなので、なんてことはありません。

.container に max-width を設定し、大きめに表示してあげればいいだけのことでした。

この方法は、パターン１の CSS を少し変更するだけでできます。

以下の CSS をbody の CSSの直下辺りに記述します。

  .container {
    max-width: 1300px; /* コンテンツ枠の最大幅 */
    width: 98%;
  }

まとめ

メインコンテンツを中央に寄せ、記事欄の横幅を狭めることにより、横方向の目線の動きが減り、ブログが読みやすくなります。

３パターンのやり方を記載したので、お好きなやり方で調整してみてください。