763万 キーワード

2021年 検索パフォーマンス

57.8万 ユーザー

2021年 訪問ユーザー数

WordPressのスキルアップはこちら!▶[click]

【WordPress】標準の「最新の投稿」ブロックを|日付-投稿タイトル|で横並びに整形する方法~その2|左右交互に横並び・flex-direction: row-reverse;

WordPress(ワードプレス)
この記事は約3分で読めます。
スキルアップで未来を変える!!
情熱があれば【誰でも】挑戦できます!
ここからSTART↓

前回までのあらすじ

それっぽいレイアウトにはなったのですが、タイトルと日付の並び順が、希望と反対になっているのでなんとかしたい・・・。

こんな感じになってほしい。

Flexboxについて

Flexbox は、アイテムを列方向や行方向など一次元に並べて表示するためのレイアウトモデルである CSS Flexible Box Layout Module に対する一般的な通称です。

https://developer.mozilla.org/ja/docs/Glossary/Flexbox

上の順番を下のように並び替えしたい・・・

となった場合、中の要素の順番を入れ替える・・・という方法が思いつきそうです。

flexboxの要素の順番を入れ替える

フレックスボックスやグリッドといった新しいレイアウト方法には、コンテンツの順序を制御する機能があります。この記事では、フレックスボックスを使っている場合にコンテンツの見た目上の順序を変更する方法についてみていきます。またアクセシビリティの観点における、アイテム順の変更による影響についても考察します。

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

今の最新の投稿のレイアウト

現状

こうなればいいな・・・という希望が・・・。

wp-block-latest-posts__listの場所は?

このブロックを作っていると思われる場所は別記事にまとめましたので、ご参考ください。

レイアウトをどうにかする・・・

ということで、どうやってアプローチをすれば?

flexbox参考
https://css-flexbox.eguweb.net/p001/
https://css-flexbox.eguweb.net/p002/
https://css-flexbox.eguweb.net/p004/

左右交互に、横並びにする。

.wp-block-latest-posts__list li{
display: flex;
flex-direction: column;
}

横には並びますが、このままでは反対向きになりません・・・。

flex-direction: row-reverse;

日付とタイトルが・・・反対向きになりました!!

とはいえ、右揃えになってしまっていますので・・・このあたりは次回あたりで調整をしていきます。

まとめ

このような感じで、日付ータイトルの順に並び替えることができました!!あとは、例えば:nth-child()を使うと、もっと色々なパターンのレイアウトも作れますので、ぜひお試しください。

:nth-child() 擬似クラスは、兄弟要素のグループの中での位置に基づいて選択します。

https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child

Loading
「ワードプレスで未来を変える!」
【未経験挑戦可!】スキルアップしたい!WordPressに挑戦したい!何かに挑戦して人生を変えたい!!という方をお待ちしています↓↓
WordPress(ワードプレス)
EGUWEB
タイトルとURLをコピーしました