Blogger・QooQの投稿リストを2列から3列に増やすCSS

Blogger のフリーテンプレート「 QooQ 」は、パソコンなどのワイド画面ではトップページの投稿リストが 2列になっていますが、これを 3列にすることで、スクロールせずに見えるリストを増やすことができます。また、リスト表示が小さくなることで、それぞれの視認性が高まる効果もあります。

blogger-qooq-list

カスタマイズするにはテーマデザイナーから CSS を追加するか、既存の CSS にある該当箇所を編集してください。

CSS で投稿リストを 3列に変更する

投稿リストの幅はコンテンツ幅に対して「 % 」で指定されています。
デフォルトではリストに「 49.5% 」が指定されており、コンテンツ内に 2つのリストが並ぶようになっているため、この数値を変更して 3つ並ぶようにします。
.list-item {
    flex-basis: 32%;
}
リスト間の余白が必要なので「 32% 」が丁度いいかもしれません。また、リストの縮小にあわせて文字サイズなどの微調整を行ったほうが、全体的に見やすくなると思います。

表示位置の調整に CSS を追加する

並ぶ数が少ない場合の表示位置を整えるために、以下の CSS を追加します。
#list:after {
    content: "";
    display: block;
    flex-basis: 32%;
}
ラムネグ