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ライフを。