お問い合わせ
    氏名

    メールアドレス

    件名

    お問い合わせ内容



    会員登録(無料)
    ログイン
    スキルアップは今すぐこちら!▶

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

    WordPress(ワードプレス)
    この記事は約3分で読めます。

    前回までのあらすじ

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

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

    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

    0 件のコメント

    コメント
    タイトルとURLをコピーしました