ObliqueというWordpressのテーマがあります。「斜め」というテーマ名の通り、ページの区切りや部品の区切りが斜めになっていてなんか面白いので、このサイトがそれをつかっています。

おしゃれな感じに作り込むことができたので、昔はけっこう目にしましたが、ベンダーさんが新しいテーマ(Neve)に移行しちゃったんで、すでに放置されていて、徐々に減っていくものと思われます。ちなみに、Oblique Proという有料テーマもあったんですが、ドキュメントに「もうお金はいりません」って書いてあって極めて清々しいです。

私も、Neveに移行しようかと思ったんですが、そしてお客さんのウェブサイトだったら迷わずそうするんですが、持ち前の反骨精神（？）、天邪鬼を発揮して、Oblique最後の一人のユーザになるまで使おうと思った次第です。文字通り” 斜 ”に構える精神を地で行きます笑

でね、ウチだけなのかそれとも最後のアップデートで何かが起きたのか、投稿記事の一覧表示がダダ崩れします。
原因は簡単で、一覧表示の際に各投稿記事からサマリーを引っ張ってくる役目のarticleタグに、positon:absolute（表示位置の絶対値化）が指定されていて、それによりartcile(サマリーの箱)が”浮いちゃう”（絶対値化されたので、親要素から独立してしまう）わけです。そうすると、当然ながら親要素でありobliqueの真骨頂でもあるid:ob-grid（class:grid-layout）が高さ0になっちゃうわけです。

さらにやっかいなのが、これがcssじゃなくてarticleのelementに直なんですわ（だから昔からあったのかもしれません。何かのタイミングで別のcssが崩れて、absoluteが都合が悪くなったのかもしれません）。となると、対策としてはelementをJavascriptで強引に上書きするかな？って話になります。
でもそれはなんか嫌だったので、構造をよくよく調べると、articleのclassにpostというシンプルなやつがありまして、これにcssをつけて、!importantすればelement直のstyleを退治できます。

.post {
position:static!important;
}

.grid-layout{
display:flex!important;
flex-wrap:wrap;
}
.grid-layout::after {
clear:both;
display:block;
content:””;
}

順番に行くと、class postのpotisionをabsolute（絶対値）以外にします。なんでもいいと思いますが無難にstatic（静的、つまりなにもしない）で。

で、これをやると、もともとarticleはtableもfloatも何もしてませんから、一覧が縦にずらーっと並びます。実はスマホはこれで完了でいいんじゃないか？説がありますね。ただPCでもそれなりにしたいので、次のcssが必要です。
もともとObliqueのグリッドは、PC（1024pxの横幅）で3カラムとなっています。なので、これを作り直してあげるんですが、floatだともはやなんというか時代に合わないというか、まあちょくちょく崩れますよね。なので、flexを指定してあげます。
そうすると副産物として、もともとのObliqueのグリッド表示の弱点でもあった、縦位置の微妙なズレも解消しますのでオススメです。
セットで忘れちゃいけないのは、flex-wrap:wrapをつけましょう。これでいい塩梅で3カラムになります。

最後の、grid-layoutに対するafterは、本来はfloatレイアウトのときの高さを掴むためによく使うやつですが、flexの場合もつけておいたほうが無難かなぁと言うことでつけました。すごい詳しい人（私みたいに何でも屋じゃなくてcssに強いデザイナ）が見たら、いらねーってツッコミを受けるかもしれません。

ちなみに、いらすとやさんに「斜に構える」があって笑いましたが、採用したのは「横から失礼」です。

それでは楽しいObliqueライフを。