WordPressの「Lightning」を使って、サイドバーに「最新の投稿」を表示したい場合がある。 昔はこのようなレイアウトのウィジェットブロックがあったのだが
↓↓
最近は、ウィジェットブロックではなく、グーテンベルクのブロックを追加するパターンになり それらしきレイアウトが見当たらない。
「最新の投稿」ブロックを調整する
強いていうなら「最新の投稿」ブロックでそれに近いことができる。
①ウィジェット⇒サイドバーに「最新の投稿」ブロックを追加
まずはウィジェット⇒サイドバーに「最新の投稿」ブロックを追加してください。
ブロックの設定は 「投稿を表示」「アイキャッチ画像を表示」
↓↓
▼これで「画像」「タイトル」「日付」がタテ並びに表示されていると思う。
②カスタマイズ⇒CSS
あとはレイアウトをCSSで修正する。
外観⇒カスタマイズ⇒追加CSSで下記コードを貼り付ける。
↓そのまま貼り付け
/* ================================
最新の投稿（サイドバー用）
左：サムネ
右：タイトル
タイトルの下：日付
================================ */
/* li 全体を flex＋折り返しにする */
.wp-block-latest-posts__list li,
.wp-block-latest-posts__list .wp-block-latest-posts__list-item {
display: flex !important;
flex-wrap: wrap !important; /* ← 日付を次の行に送る */
align-items: flex-start !important;
column-gap: 10px;
row-gap: 2px;
margin-bottom: 14px !important;
}
/* サムネイル部分（左側） */
.wp-block-latest-posts__featured-image {
flex: 0 0 auto;
margin: 0 !important;
}
.wp-block-latest-posts__featured-image img {
width: 80px; /* サムネサイズ（変更可） */
height: 80px;
object-fit: cover;
display: block;
}
/* タイトル（右側） */
.wp-block-latest-posts__post-title,
.wp-block-latest-posts__list li > a.wp-block-latest-posts__post-title {
flex: 1 1 calc(100% - 90px); /* 80px(サムネ) + 10px(余白) = 90px */
display: block !important;
line-height: 1.4;
margin: 0 0 2px 0 !important;
/* ★タイトルの文字サイズここで調整★ */
font-size: 0.85rem !important; /* ←好きな大きさへ変更（例: 0.85rem, 0.8rem） */
}
/* 日付：タイトルの下に表示 */
.wp-block-latest-posts__post-date {
flex-basis: 100% !important; /* ← 次の行へ送る */
margin-left: 90px !important; /* サムネ分右に寄せて位置合わせ */
display: block !important;
text-align: left !important;
line-height: 1.3;
}
そうするとこのようなレイアウトになると思う
