永遠少年症候群

MENU

about

サイトは趣味の創作サイトです。著作権は特に明記のない限り放棄していません。
リンクはご自由にどうぞ。
画像リンクの際はこちらのバナー又はロゴをご利用ください。

かいてるひと

ぶくま

Search

novel

ファンタジー、恋愛要素、ハッピーエンド多め。
たまに暴力やグロテスクな表現があります。
小説一覧

Series

他の形式で読む

ブクログのパブー……電子書籍形式。詩の投稿はこちらのみ。
小説家になろう……ガラケー、スマホ対応。pdf形式の縦書き対応。

記事が増えると2列以上になるリスト【wordpress】
web関係 メモ ,

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

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

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

まとめ

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

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