最新の投稿ブロック
「最新の投稿」ブロックは、最近の投稿の一覧を表示します。
この「最新の投稿」ブロックは、抜粋を表示したり、文字数を制限したり。
カードタイプの表示に切り替えたり・・・
表示させるカテゴリーを限定したりと、色々と便利に使えます。
ほかのテーマでも基本は同じ並び順
テーマを変えても、基本的には「投稿タイトル」「投稿日」「投稿本文」の順番で並びます。
横並びにしたい・・・
こんな感じのレイアウトにしたい、と思った時に、解決させる方法です。
ソースコード
<ul class="wp-block-latest-posts__list has-dates wp-block-latest-posts"><li><a href="XXXXXXXXXXXXXXXXX">投稿のタイトルが入る</a><time datetime="2012-03-15T15:36:32+09:00" class="wp-block-latest-posts__post-date">2012年3月15日</time></li>
<li><a href="XXXXXXXXXXXXXXXXX">投稿のタイトルが入る<time datetime="2012-03-15T15:15:12+09:00" class="wp-block-latest-posts__post-date">2012年3月15日</time></li>
<li><a href="XXXXXXXXXXXXXXXXX">投稿のタイトルが入る<time datetime="2012-03-15T14:41:11+09:00" class="wp-block-latest-posts__post-date">2012年3月15日</time></li>
・・・
</ul>投稿タイトルのclass名
liの方にはクラス名が設定されていませんが、ul（リスト全体）の方にクラス名が設定されています。
<ul class="wp-block-latest-posts__list has-dates wp-block-latest-posts">投稿日のclass名
<time datetime="XXXXXXXXXXXX" class="wp-block-latest-posts__post-date">XXXX年X月XX日</time>timeタグとは？
time要素は、特定の時の区間を表します。 datetime 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/time
ひとまずdisplay:flexにしてみる
liになっているので、これをdisplay:flexにして、横並びにしてみる？
.article ul li {
display: flex;
}
それっぽくなりました（笑）
まとめ
まあこれで完成・・・でもよいかと思いましたが、順番が希望と反対なので・・・、これをどうにか並び替えてみます。
長くなりましたので、続きはまた！
ご参考ください。
