前略、kikicocomamaさん

トップページにシンプルな縦型カード３列のレイアウトでしたら、固定ページではなく、通常のブログのインデックスページを使うと反映されるかと思います。（Cocoon設定の「インデックス」タブの設定は固定ページには適用されません）

WordPresssの表示設定では、「ホームページの表示」を「最新の投稿」に設定します。

シンプルな縦型３列ではなく、固定ページにいろいろなレイアウトを組み合わせる場合は、CSSでの独自のカスタマイズが必要になってくるかと思います。

kikicocomamaさん

今回の内容とは異なりますが、以下のようなトピックもあります。

[解決済] 固定ページの新着記事一覧についてCSSが反映されない

https://wp-cocoon.com/community/postid/41919/

kikicocomamaさん

ショートコードは基本的に縦１列に並ぶので、横並びにするには、type=large_thumbを使って、flexboxあたりで、横にならべるCSSのコード書くと良いかもしれません。

@leafytree 様、

メッセージありがとうございます。

トップページにはカテゴリをいくつか設け、カテゴリごとに最新記事を3つほど表示させ、
各カテゴリごとに固定ページを作ろうかと思っております、、

その固定ページに飛んだ時にそれそれのカテゴリの記事を一覧で表示させたく、
その場合に、デフォルトの表示ですと見た目が寂しく、、

固定ページに縦型3列、スニペットも入れて表示させたいなと思っておるのですが、、
検索して見つけた以下をそのまま入れてみたのですがうまく反映されませんでした。

====================================

@kikicocomama さん

Cocoonには、「フロントページタイプ」という優れた機能があるのですが、マニュアルページが簡素？ためか、話題にのぼることが少ないように思います。

この「フロントページタイプ」を利用すると、CSSの知識も要らず、サイト型のトップページが簡単に作れるようになっています。

Cocoonのフロントページを「タブ切り換え」や「カテゴリごと表示」にする方法

https://wp-cocoon.com/front-page-type/

Cocoon 2.1.6公開。フロントページに「タブ切替」や「カテゴリーごと表示」機能追加

https://wp-cocoon.com/2-1-6/

これを試してみる、というのも有りなんじゃないかと思います。

固定ページを使って、ショートコードで横並びにするには、私でも、やはりテストサイトで、試しながら、コードを書いていく必要があります。

今は、出先なので、そこまでできませんが・・

kikicocomamaさん

今朝、隙間の時間に書き込んだので、よく見ていなかったのですが、あらためて、kikicocomamaさんのサイトを拝見しますと、サイドバーの無い１カラムなんですね。

カラム幅は1256pxあるようですので、画像を横並びで３列にならべるとすると、１つの画像の幅が400px前後必要になるかと思います。

仮にショートコードで、「type=large_thumb」を指定するとしても、読み込まれるサムネイル画像のサイズは、320px ×　180pxですので、実際の表示サイズが幅400pxだと拡大表示になってしまい、ピンボケの画像になってしまいます。

サイドバーが無い、１カラムの場合ですと、横並び４列じゃないと画像が拡大されてしまうので、オススメできないです。

４列でしたら、過去に似たようなトピックがあります。

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

4→2→1列

https://wp-cocoon.com/community/postid/42205/

サイドバー有りの、２カラムであれば、３列でもいいかもしれません。

読み込まれるサムネイル画像のサイズまで含めて１カラム横３列で、きれいに表示させたい、といった場合は、プロの出番かと思います。

有償で引き受けてくださる方を探してみるのもひとつの方法かと思います。

Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】

https://wp-cocoon.com/cocoon-custom/

kikicocomamaさん

さきほど４列の過去のトピックのリンク先に３列（スマホで2列）というのもありました。

新着記事ではなく人気記事ですが、CSSの記述のやり方の参考になるかと思います。

[解決済] ヘッダーを押すとホーム画面にジャンプさせたい
3→2列
https://wp-cocoon.com/community/postid/42155/

ただ、読み込まれるサムネイル画像のサイズより、実際のサムネイル画像の表示サイズが大きくなると拡大表示となり、ピンボケの表示になりますのでオススメいたしません。（実際の表示で画像の横幅が320px以内でしたらボケないかと思います。）

kikicocomamaさん

ショートコードでスニペットを表示するには、スニペットオプションを指定すればよいかと思います。

新着記事ショートコードの案内ページは以下になります。

新着記事一覧を表示するショートコードの利用方法

https://wp-cocoon.com/new_list/

kikicocomamaさん

合っているかどうかは、わかりませんが適当に書いてみると・・

/*新着記事を3列横並びにする（スマホでは２列）*/

.new-entry-cards {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.new-entry-cards > a {/*３列にする*/
   width: 31.5%;
}

.new-entry-cards::after {/*最下列を左寄せ表示に*/
   content:"";
   display:block;
   width: 31.5%;
}
.widget-entry-cards.card-large-image .a-wrap {
    max-width: none;/*最大幅400pxの指定を初期化する*/
}


@media screen and (max-width:480px) {/*画面幅が480px以下のとき2列にする*/

   .new-entry-cards > a {
      width: 48%;
   }
   
   .new-entry-cards::after {
      content:"";
      display:block;
      width: 48%;
   }

}

@leafytree 様、

色々とありがとうございます。
本当に勉強になります。

色々といじっているとたどり着きました・・・・。

ショートコードに以下を入れて
[new_list count=3 type=large_thumb snippet=1 children=1]

CSSに以下の記述

====================================

とても親切に教えてくださりありがとうございました。
１カラム時の列の数によって画像が拡大され解像度が落ちる、、等
私では全く考えが及ばなかった部分ですので、本当に勉強になりました。

またお世話になることがあるかと思いますが、よろしくお願いいたします。