menu

永遠少年症候群

ブログ

年/カテゴリー/タグを組み合わせて絞り込みできます。

ブログ

お題ルール

自作発言とお題の再配布は禁止いたします。お題を使用していることを明記してくだい。
他のお題配布サイト様のお題と混ぜることはおやめください。
あいうえお作文からの抜き出しはご遠慮ください。

同意してお題ページへ

小説ページ

ファンタジー、恋愛要素、ハッピーエンド多め。たまに暴力やグロテスクな表現があります。
filterボタンで絞り込みができます。キーワードとシリーズは組み合わせることができません。

小説ページへ

目次


広告

記事が増えると2列以上になるリスト【wordpress】

 wordpressの記事をカテゴリーごとにflexボックスに入れて表示したとき、一方は多くて一方が少なかったら多い方に高さがあってしまって不格好です。
 そんなときは列数を増やそう!
ex1ex2

 でも意外と簡単。
 css3のcolumnsプロパティを使います。さすがCSS3!!!

 数字は適宜変更してください。
 うちの小説ページでは10より記事数が多かったら記事数を10で割り、その商で列数を決めています。
 columnsの12emというのは大体1行12文字でっていう指定です。pxで指定もいいけど、レスポンシブになるように文字数で指定してる。ちなみにこの幅指定がないと横幅いっぱい使った2列になる。
 それにしても$post_num_shoって、商を求めるからこんな名前にしたんだけどもっといい変数名思いつかなかったのか私……。変数名がいつもダサい。

まとめ

 columnsプロパティの列数を記事数で求めたスタイルをolに指定する。

 しかし、flexボックスでずらーっとターム一覧表示するサイトなんて他にあるのかな。

Do NOT follow this link or you will be banned from the site!