サイドバー「最近の投稿」のウイジェットでの作成方法

yStandardを使っているが無料版では最近の記事は有料版でしか作成することはできない。
以下のブロックで作成することができる。

WordPressで「最近の投稿（新着記事一覧）」を設定・表示する最も手軽で一般的な方法は、標準の「最新の投稿」ブロックを使う方法になる。

サイドバーに設置したいのでウイジェットを使う。

ウイジェットのサイドバーに最新の投稿ブロックを配置する

外観＞ウイジェット＞サイドバーに「最新の投稿」ブロックを希望の位置に挿入。
ウイジェットの右側に「最新の投稿」ブロックの表示設定があるのでそれを使って仕上げる。
最大文字数が以下では55になっているが40に変更している。

変種画面ではサムネイル画像を確認できないが実際のサイトでは見ることができる。
以下の状態になるが、上のあきと横区切りのラインの色が薄すぎて気になる。

リスト表示（デフォルト）の場合のCSS

上の空きの問題とラインの色をCSSで調整したコード。

/* 「最近の投稿」ブロック全体の上下の余白を調整 */
.wp-block-latest-posts {
    margin-top: 20px !important;    /* 上の空き */
    margin-bottom: 20px !important; /* 下の空き */
}

/* 記事と記事の間の区切り線の色と余白を調整 */
.wp-block-latest-posts li {
    border-bottom: 1px solid #d6d6d6 !important; /* 区切り線の色 */
    padding-bottom: 10px !important;             /* 線と上の記事（文字や画像）の間の余白 */
    margin-bottom: 10px !important;              /* 線と次のサムネイル画像の間の余白 */
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ★区切り線の下にあるサムネイル画像の「上の余白」を強制的にゼロにする */
.wp-block-latest-posts li a img,
.wp-block-latest-posts li .wp-block-latest-posts__post-thumbnail {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 最後の記事の下の区切り線を消す */
.wp-block-latest-posts li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

これでレイアウトはバッチリ決まった。

最近の投稿