縦型カード3列の表示について - Cocoonテーマに関する質問

RE: 縦型カード3列の表示について

shthsh — Tue, 25 Sep 2018 18:00:24 +0000

たなかまさん、わいひらさんありがとうございます！
コードをコピペしたところ無事希望の見た目になりました！

わいひら — Tue, 25 Sep 2018 09:56:50 +0000

たなかまさん、ありがとうございます。

flexボックスで最後を左寄せにするには、たなかまさんが書かれた方法しかないかもしれません。

justify-content: space-around;にも、justify-content: space-around-start;みたいのがあればいいのに…。

たなかま — Tue, 25 Sep 2018 03:17:35 +0000

こんにちは。

以下のコードでいかがでしょうか？

.ect-3-columns {
  justify-content: flex-start;
}

子テーマのstyle.cssに追記か、外観カスタマイズの追加cssなどから上記をコピペして追加してくださいませ。

ちょっと分かりにくいこのプロパティは、以下のサイトの解説が分かりやすいです。

http://www.htmq.com/css/justify-content.shtml

shthsh — Mon, 24 Sep 2018 19:29:35 +0000

いつもお世話になっております。

自サイトのデザインをcocoon設定「インデックス」でデフォルトのエントリーカードから縦型カード3列に変更しました。

デザイン自体は見やすくとても気に入っているのですが、トップページの新着記事やカテゴリーの記事一覧の記事数が3の倍数じゃない場合のデザイン（たとえば記事数が4記事で2列目が1記事のみになるときのセンター寄せや、2列目が2記事のときの余白）が気になります。

１記事の列、２記事の列とも余白は均等に左寄せにしたいのですが、可能でしょうか？

よろしくお願い致します。