最近の投稿ブロックのテキストレイアウトにカテゴリーを出したい

「テキスト」は全部が横並びになりますが、カテゴリー名の長さは投稿によりまちまちだし、長いカテゴリー名を指定される方もいると思うので、汎用的にきれいに収まるデザインにするのが難しいんですよね。とりあえず下記の CSS をカスタマイザー → 追加 CSS に貼ると表示はされるようになります。

@media (min-width: 640px) {
  .c-entries--text .c-entry-summary {
    display: flex;
  }
}

.c-entries--text .c-entry-summary__figure {
    display: block;
    margin: 0 1em 0 0;
    flex: 0 0 auto;
    background-color: transparent;
}

.c-entries--text .c-entry-summary__figure img,
.c-entries--text .c-entry-summary__figure::before {
    display: none;
}

.c-entries--text .c-entry-summary__figure .c-entry-summary__term {
    position: relative;
    top: -2px;
    white-space: nowrap;
}

前述したようにカテゴリー名の長さは投稿によりまちまちなので、タイトルの出だしが揃って見えるように .c-entries--text .c-entry-summary__figure の長さは調整したほうが良いかもしれません。

やるとしたらこんな感じでしょうか。でも無理やりなのであまりおすすめできません…。

@media (min-width: 640px) {
    .c-entries--text .c-entry-summary {
        display: flex;
    }
}

@media (min-width: 1024px) {
    .c-entries--text .c-entry-summary__figure {
        position: relative;
    }

    .c-entries--text .c-entry-summary__figure {
        position: absolute;
        left: 7rem; /* 日付の長さにあわせて調整 */
    }
}

.c-entries--text {
    position: relative;
}

.c-entries--text .c-entry-summary__figure {
    display: block;
    margin: 0 1em 0 0;
    flex: 0 0 auto;
    background-color: transparent;
}

.c-entries--text .c-entry-summary__body .c-entry-summary__meta {
    margin-right: 6rem; /* カテゴリー名の長さにあわせて調整 */
}

.c-entries--text .c-entry-summary__figure img,
.c-entries--text .c-entry-summary__figure::before {
    display: none;
}

.c-entries--text .c-entry-summary__figure .c-entry-summary__term {
    position: relative;
    top: -2px;
    left: 0;
    white-space: nowrap;
}