現状、そういった特別な表情させるには、以下のショートコードのcatsオプションを利用して表示させるしか方法はないかもしれません。
https://wp-cocoon.com/new_list/
ウィジェットで表示させる場合は、テキストウィジェット等にショートコードを入力して利用します。

@yhira

ごめんなさい、言いたいことはなんとなくわかるのですが、

ヴィジェットのテキストではCSSが入らないのと、具体的にどのように入れて行ったらいいのかがわからないのですが、教えていただくことは可能でしょうか。

まだ触れてまもないので手触りでHTMLやCSSに触れていて、こんなのもわからないのか・・と思うかもしれませんが、教えていただきたいです。

@yhira

[new_list count=3 cats=3 type=large_thumb]

こちらのコードをヴィジェットのテキストに入力してトップページを見ると

「表示できる記事がありません」とでます。

ダッシュボード投稿のカテゴリーの中にカウントがあったのですが、違ったみたいです。

前略、@nyan319 さん

カテゴリIDの見方は、わいひらさんが、貼り付けてくださった、マニュアルページにあると思います。

@nyan319 さん

私もローカルのテストサイトで、以下のような感じで試してみました。

ウィジェットエリアの「インデックスリストトップ」に「カスタムHTML」ウィジェットを入れてみました。

カスタムHTMLウィジェットに記載した内容は以下です。

<h2 style="text-align: center; font-size: 18px; font-weight: bold; color: #555;">新着記事（カテゴリーhoge）</h2>

[new_list count=4 cats=4 type=large_thumb children=1]

また、子テーマのCSSには以下のように書いてみました。

.new-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}


.new-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb > a {
   width: 48%;
   max-width: none;
}

@nyan319 さん

ウィジェットのタイトルがダブっているのは、ウィジェットのタイトル欄とウィジェットの中に記述した＜ｈ２＞タグの両方が表示されているためです。

ショートコードも、ご自身でいろいろ試してみてください。

WordPressのブロックエディタの仕様変更へのご対応等でテーマ作者様は、多忙と推測されます。

マニュアルページも、よく読み返してみると理解できたりします。

@nyan319 さん

ローカルのテストサイトでは、外からは見ることができませんが、差し支えがなければ、できるだけ実際のサイトのURLをご提示いただいた方が、具体的なご案内ができると思います。

実際のサイトのURLがないと、推測や推理をめぐらさないとならないので、トピックも長くなりがちです。

２列表示にしたときのCSSのコードで、クリアフィックス用の疑似要素を消すのを忘れていました。

.new-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb::after {
   content: none;
}

これを書いておかないと、４つ目の右側の隙間が広くなってしまいます。

@leafytree

申し訳ございません、契約上外部にURLをお見せすることができず

このような形で質問となってしまっています。

いただいたコードをもとにIDの部分を直したら表示がされました！

本当にありがとうございます。

もしもう１点お聞きして大丈夫であれば教えて欲しいのですが、元々

新着情報にレスポンシブの時だけ横に表示するようなコードを入れていました。

写真添付いたします。

先ほどのコードに反映するにはどの部分を変えたらいいのでしょうか。

@nyan319 さん

メインカラムに２列に並べるコードは、先に記述したとおりです。

@nyan319 さんのWebサイトがどのようなものか、文面だけですと、よくわかりません。

ウィジェットは、どのエリアに入れていますか？

PC表示のとき、スマホ表示のとき、それぞれ、どのように表示なさりたいのでしょうか？

※添付いただいたコードは、あまり参考になりそうもありません。

@nyan319 さん

メインカラムで、PC2列、スマホ１列ですと、以下のようになります。

.new-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}


.new-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb > a {
   width: 48%;
   max-width: none;
}

@media screen and (max-width:480px) {
   .new-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb > a {
      width: 95%;
      max-width: none;
   }
}

.new-entry-cards.widget-entry-cards.no-icon.cf.card-large-image.large-thumb::after {
   content: none;
}

CSSのセレクタは、実際のサイトをデベロッパーツールで見てみないと、正確なものは、書けません。

ご自身でデベロッパーツールで調べて、設定なさってください。

@nyan319 さん

flexboxの構造は以下のようにシンプルです。

<div><!--flexコンテナ-->
   <a>一つ目</a><!--flexアイテム1-->
   <a>2つ目</a><!--flexアイテム2-->
   <a>3つ目</a><!--flexアイテム3-->
   <a>4つ目</a><!--flexアイテム4-->
</div>

該当するCSSのセレクタをデベロッパーツールで調べて適用なさってください。

@nyan319 さん

また、「コンテンツ上部」に５つ横並びとか、メインカラムに４つ横並び等は、以下の過去のトピックが参考になるかもしれません。

【教えてください】

【教えてください】ヴィジェット新着記事を横並びに表示したい

@nyan319 さん

参考リンク。

WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方

【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック

トピ主さんの @nyan319 さんは、ウィジェットのIDセレクタを調べることで、解決されたようです。

別のトピックに回答をいただきました。

@nyan319 さんに添付いただいた画像のコードをよく読み返してみたら、スマホでは１列表示で横向きのデザインのエントリーカードになさっていたようです。

私もローカルのテストサイトで試してみました。

@nyan319 さん の画像のコードとは少し違いますが、適当に書いてみました。

/*新着記事（ショートコード）メインカラム２列、スマホは１列で横向きデザイン*/

.new-entry-cards.widget-entry-cards.card-large-image.large-thumb {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}

.new-entry-cards.widget-entry-cards.card-large-image.large-thumb::after {
   content: none;
}

.new-entry-cards.widget-entry-cards.card-large-image.large-thumb > a {
   width: 48%;
   max-width: none;
}

@media screen and (max-width:480px) {
   .new-entry-cards.widget-entry-cards.card-large-image.large-thumb > a {
      width: 100%;
      max-width: none;
   }

   .new-entry-cards.widget-entry-cards.card-large-image.large-thumb > a {
      padding: 8px 5px;
   }

   .new-entry-card.widget-entry-card.e-card {
      display: flex;
      font-size: 0.85em;
   }

   .new-entry-card.widget-entry-card.e-card > figure {
      width: 35%;
      margin-right: 4%;
   }

   .new-entry-card-content.widget-entry-card-content.card-content {
      flex: 1;
   }

   .widget-entry-cards.card-large-image .card-content {
      padding: 0;
   }
}

他のウィジェットに影響してしまう場合は、

#custom_html-4

のようなウィジェット固有のIDをデベロッパーツールで調べてセレクタの先頭に半角の空白をあけて記述すれば適用範囲を限定できるかと思います。

PCで簡単に試しただけなので、スマホの実機で上手く表示されるかどうかわかりませんが・・