WordPressの国産のテーマ「Lightning」。
ブロックテーマ以前のLightningには、このような新着のレイアウトがあったと記憶しているのだが↓↓
自分の知る限り、ブロックテーマになって、このようなオールドスタイル？のレイアウトは用意されなくなったようだ。（※ブロックテーマになってから、サムネイル（アイキャッチ画像）が割と大きく表示される。）
これをCSSで調整したいと思う。完成見本はこちら↓
１）使用するブロックはLightning の「投稿リスト」
ブロックの設定は
| 項目 | 推奨設定 |
|---|---|
| 表示タイプ | カード型 |
| カラム数 | 1列 |
| サムネイル | 表示する |
| タイトル | 表示する |
| 抜粋 | 表示する |
| 日付・カテゴリ | お好みで |
２）追加CSS
外観⇒カスタマイズ⇒追加CSSに、下記コードを貼り付け
/* ▼投稿リスト：サムネ左・タイトル＆本文右 */
/* 各投稿の外枠：デフォルトのままでOKだが、念のためリセット */
.vk_posts .vk_post,
.vk_posts .vk_post_link {
display: block;
}
/* サムネイルを左に回り込ませる */
.vk_posts .vk_post_imgOuter {
float: left;
width: 80px; /* サムネの幅（お好みで） */
height: 80px; /* 高さ。正方形にしたくない場合は消してOK */
margin: 0 16px 8px 0; /* 右と下に余白 */
overflow: hidden;
}
/* 画像を枠いっぱいに */
.vk_posts .vk_post_imgOuter img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* テキスト側：画像の右に回り込ませるために float をクリア */
.vk_posts .vk_post_body {
overflow: hidden;
}
/* タイトル */
.vk_posts .vk_post_title {
font-weight: 700;
margin: 0 0 4px;
}
/* 本文（枠なし） */
.vk_posts .vk_post_excerpt {
margin: 0;
padding: 0;
border: none;
}
/* 投稿の最後で float を解除（レイアウト崩れ防止） */
.vk_posts .vk_post::after {
content: "";
display: block;
clear: both;
}
/* サムネイル下の余計な線を消す */
.vk_posts .vk_post_imgOuter,
.vk_posts .vk_post_imgOuter img,
.vk_posts .vk_post_imgOuter::after {
border: none !important;
box-shadow: none !important;
}
/* 文字サイズ */
.vk_posts .vk_post_title {
font-size: 1.0rem; /* 好きなサイズに変更 */
font-weight: 700;
}
.vk_posts .vk_post_excerpt {
font-size: 0.9rem; /* 好きなサイズに変更 */
line-height: 1.6;
}
そうすると、こんな感じのレイアウトができると思います。個人的には割と気に入ってるんだけどな。シンプルで
