WPでCSS等を使わずに横3列×縦複数行表示させる方法
WordPress+Cocoonで、複数の固定ページ（サイドバーなし。フロントページではない。）に、横3列×縦複数行・大きなサムネール・タイトル太字・説明文をCSS等を使わずに設定する方法
ショートコードでの設定
1 大きなサムネール ＋ 説明文:type=”large_thumb_on” を指定すると、Cocoon標準の「大きなサムネイル付きカード（縦型）」が呼び出され、自動的に説明文（スニペット）が含まれる形式になる。
2 タイトル太字:bold=”1″ を加えることで、記事タイトルが強調（太字）される。
3 説明文を表示:snippet=”1″ を加えることで、本文の抜粋が表示される。
ブロックエディタとショートコードを組み合わせ（特定の固定ページに「横3列×10行（合計30記事）・大きなサムネイル・タイトル太字・説明文」を実現するコード。
１ ページ設定（サイドバーを消す）：編集画面右側の「固定ページ」設定 ＞ 「デザイン」（または表示設定）にて、「カラム」を「1カラム（広い）」に変更する。
2 本文に設置するコード：ブロックエディタの「カラムブロック（33/33/33）」を挿入し、各列に以下の「ショートコード」ブロックを貼り付ける。CSSに書くのではない。※cats=”ID” ⇒表示したいカテゴリーID（半角数字）に書き換える。
【左カラム】
[new_list cats="ID" count="10" type="large_thumb_on" bold="1" snippet="1"]
【中カラム】
[new_list cats="ID" count="10" type="large_thumb_on" bold="1" snippet="1" offset="10"]
【右カラム】
[new_list cats="ID" count="10" type="large_thumb_on" bold="1" snippet="1" offset="20"]
3 設定値（パラメーター）の詳細説明
・type=”large_thumb_on”:大きなサムネイルを上部に配置し、その下にタイトルと説明文を並べるCocoon専用のカード形式。
・bold=”1″:タイトルを太字にする。
・snippet=”1″:説明文（スニペット）を表示する。
・count=”10″:各列に表示する記事件数。3列合わせることで合計10行（30記事）となる。
・offset=”10″ / “20”:表示開始位置をずらす設定。中列は11位〜、右列は21位〜の記事を表示させることで、3列にわたって記事が重複を防ぐ。
上記は、サムネイルの上に文字が設定される。文字をサムネイルの下に表示させる方法
type の値をlarge_thumb に変更すると、サムネイルの下に文字が表示される。
左列:[new_list cats="5" count="10" type="large_thumb" bold="1" snippet="1"]
中列:[new_list cats="5" count="10" type="large_thumb" bold="1" snippet="1" offset="10"]
右列:[new_list cats="5" count="10" type="large_thumb" bold="1" snippet="1" offset="20"]
「関連記事」のように、一つのコードで自動的に横3列に整列させるには、Cocoonの「インデックス（一覧）」の仕組みを利用する必要がある。
しかし、ショートコード単体で「横3列に並べる」という命令を出すことができないが。
1 「カラムブロック」を使い、コードを1つにする。
・1つの枠内で自動で流し込むには、Cocoonの全体設定を確認する。
・[Cocoon設定] ＞ [インデックス] タブを開き、「カードタイプ」を 「縦型カード2列（PCは3列）」 に設定する。注：これを行うと、サイト内の他の「新着一覧」も全て3列になる。
・この設定をした上で、固定ページに以下のコードを貼る。（※type=”entry_card” にすることで、3列が適用される。）
[new_list cats="5" count="30" type="entry_card" bold="1" snippet="1"]2 サイドバーありのページと「共存」させる際の注意点
「他のページはサイドバーがあるから2列にしたいが、このページだけ3列にしたい」という場合、CSSを使わない限り、Cocoon設定（全体設定）は1つしか選べない。
そのため、以下のどちらかを選択することになる。
案A：全体を3列設定にする
・サイドバーがあるページでは、Cocoonが自動で「サイドバーを除いた隙間に収まる列数（2列など）」に調整してくれる。
案B：先ほどの「3カラムブロック」を使う
全体設定に関わらず、そのページだけを確実に3列に固定できる。
・「自動で3列」という挙動（左から右へ1、2、3、次の行へ…と流れる）を優先したい場合は、[Cocoon設定]で「PCは3列」にした上で、ショートコードのタイプを type=”entry_card” に変える。
上記で設定がうまくいかない場合は、「自動で3列」を優先したい場合は、[Cocoon設定]で「PCは3列」にした上で、ショートコードのタイプを type=”entry_card” に変える。
[new_list cats="5" count="30" type="entry_card" bold="1" snippet="1"]「ナビカード」ブロックを使う方法
・[外観] ＞ [メニュー] で、表示したい30記事を登録したメニューを適当な名前で作る。
・固定ページの本文に、ショートコードではなく「ナビカード」ブロックを入れる。
・右側の設定欄で、以下を選択する。
・メニュー: 先ほど作った「名前」を選ぶ。
・表示タイプ: 「縦型カード」を選ぶ。
・列数: 「3」を選ぶ。
・説明を表示: チェックを入れる。
メニューを使っての設定
「メニュー」機能は本来、サイト上部のナビゲーションを作るためのものだが、Cocoonではこれを使って「好きな記事を自由に並べたカード一覧」を作ることができる。
1 メニューの新規作成
・管理画面の [外観] ＞ [メニュー] を開き、「新しいメニューを作成しましょう」というリンクをクリックする。
・メニュー名に「分かりやすい名前」を入力し、[メニューを作成] ボタンを押す。
※「メニューの位置」などのチェックボックスはすべて空欄のままでOK。
2 表示したい記事を30件追加する
・画面左側の [投稿] パネルをクリックする。
・「すべて表示」タブに切り替え、表示したい記事にチェックを入れる。
・[メニューに追加] ボタンを押すと、右側のエリアに記事が並ぶ。
・ドラッグ＆ドロップで順番を入れ替え、最後に必ず [メニューを保存] をクリックする。
3 固定ページに表示させる
・固定ページの編集画面に戻り、本文に [ナビカード] ブロックを挿入する。
・右側の設定パネル（ブロック設定）の「メニュー」から、先ほど作った 「名前」 を選択する。
・同じ設定パネルで以下を選択する。
・表示タイプ: 縦型カード（または 縦型カード（2列・3列））
・カード数（PC）: 3
・説明を表示: ON（チェックを入れる）
最終的にたどり着いた結果
「大きなサムネイル・横3列・画像の上に太文字タイトルと説明文を表示」するための最終確定コード（日付なし）
「カスタムHTMLブロック」に貼り付けるだけで、外部CSSの設定に依存しない設計
IDを必ず書き換えること
<!-- ① コンテンツ表示設定（ショートコード） -->
<div class="custom-card-area">
<!-- cats:カテゴリID, count:表示数, type:画像に文字を載せる, col:3列, bold:太字, snippet:説明文表示(1) -->
[new_list cats="ID" count="99" type="large_thumb_on" col="3" bold="1" snippet="1"]
</div>
<!-- ② デザイン設定（CSS） -->
<style>
/* --- 全体共通：カードの構造作り --- */
.custom-card-area .entry-card-link {
position: relative !important; /* 文字を浮かせる基準点 */
display: block !important; /* リンクを箱状にする */
background: #000 !important; /* 画像の隙間から白が出ないよう下地を黒に */
overflow: hidden !important; /* はみ出た画像を隠す */
}
/* 画像を枠いっぱいに広げる設定 */
.custom-card-area .entry-card-thumb,
.custom-card-area .entry-card-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* 比率を保って隙間なく埋める */
margin: 0 !important;
}
/* 文字エリア（タイトル＋説明文）：画像の上に重ねる */
.custom-card-area .entry-card-content {
position: absolute !important; /* 画像の上に強制的に浮かす */
bottom: 0 !important; /* 下側に配置 */
left: 0 !important; /* 左端から表示 */
width: 100% !important;
background: rgba(0, 0, 0, 0.6) !important; /* 背景を半透明の黒にする */
padding: 10px !important;
box-sizing: border-box !important;
z-index: 10 !important;
}
/* 文字を白くし、余計な装飾を消す */
.custom-card-area .entry-card-title,
.custom-card-area .entry-card-snippet {
color: #ffffff !important; /* 文字色：白 */
background: transparent !important; /* スキンの白背景を消去 */
text-align: left !important; /* 左寄せに固定 */
margin: 0 !important;
padding: 0 !important;
border: none !important; /* 枠線や下線を消去 */
}
/* --- スマホ表示設定（画面幅が767px以下の時：2列） --- */
.custom-card-area .new-entry-cards {
display: grid !important; /* 横並びを強制 */
grid-template-columns: repeat(2, 1fr) !important; /* スマホは2列 */
gap: 8px !important; /* 隙間を少し狭く */
}
.custom-card-area .entry-card-link {
height: 160px !important; /* スマホでのカードの高さ */
}
.custom-card-area .entry-card-title {
font-size: 13px !important; /* スマホでのタイトルの大きさ */
}
.custom-card-area .entry-card-snippet {
font-size: 10px !important; /* スマホでの説明文の大きさ */
display: -webkit-box !important;
-webkit-line-clamp: 2 !important; /* 説明文を最大2行でカット */
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* --- PC表示設定（画面幅が768px以上の時：3列） --- */
@media screen and (min-width: 768px) {
.custom-card-area .new-entry-cards {
grid-template-columns: repeat(3, 1fr) !important; /* PCは3列 */
gap: 15px !important; /* 隙間を広めに */
}
.custom-card-area .entry-card-link {
height: 250px !important; /* PCでのカードの高さ */
}
.custom-card-area .entry-card-title {
font-size: 16px !important; /* PCでのタイトルの大きさ */
}
.custom-card-area .entry-card-snippet {
font-size: 12px !important; /* PCでの説明文の大きさ */
-webkit-line-clamp: 3 !important; /* PCは最大3行まで表示 */
}
}
</style>「大きなサムネイル・横3列・画像の上に太文字タイトルと説明文を表示」するための最終確定コード（日付あり）
<!-- ① 表示内容の設定（ショートコード） -->
<div class="custom-card-area">
<!--
cats: カテゴリID, count: 表示数, type: 画像に文字を載せる(標準),
col: 3列, bold: 太字, snippet: 説明文あり(1)
-->
[new_list cats="ID" count="99" type="large_thumb_on" col="3" bold="1" snippet="1"]
</div>
<!-- ② デザインの設定（CSS）解説付き -->
<style>
/* --- 全体共通：カードの構造作り --- */
.custom-card-area .entry-card-link {
position: relative !important; /* 文字を浮かせる基準点 */
display: block !important; /* リンクを箱状にする */
background: #000 !important; /* 下地を黒にして隙間を埋める */
overflow: hidden !important; /* はみ出た画像を隠す */
}
/* 画像を枠いっぱいに広げる設定 */
.custom-card-area .entry-card-thumb,
.custom-card-area .entry-card-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important; /* 比率を保って隙間なく埋める */
margin: 0 !important;
}
/* 文字エリア（タイトル＋説明文）：画像の上に重ねる */
.custom-card-area .entry-card-content {
position: absolute !important; /* 画像の上に強制的に浮かす */
bottom: 0 !important; /* 下側に配置 */
left: 0 !important; /* 左端から表示 */
width: 100% !important;
background: rgba(0, 0, 0, 0.6) !important; /* 背景を半透明の黒にする */
padding: 10px !important;
box-sizing: border-box !important;
z-index: 10 !important;
}
/* 文字を白くし、余計な装飾を消す */
.custom-card-area .entry-card-title,
.custom-card-area .entry-card-snippet {
color: #ffffff !important; /* 文字色：白 */
background: transparent !important; /* スキンの白背景を消去 */
text-align: left !important; /* 左寄せに固定 */
margin: 0 !important;
padding: 0 !important;
border: none !important; /* 枠線や下線を消去 */
}
/* --- スマホ表示設定（画面幅が767px以下の時：2列） --- */
.custom-card-area .new-entry-cards {
display: grid !important; /* 横並びを強制 */
grid-template-columns: repeat(2, 1fr) !important; /* スマホは2列 */
gap: 8px !important; /* 隙間を少し狭く */
}
.custom-card-area .entry-card-link {
height: 160px !important; /* スマホでのカードの高さ */
}
.custom-card-area .entry-card-title {
font-size: 13px !important; /* スマホでのタイトルの大きさ */
}
.custom-card-area .entry-card-snippet {
font-size: 10px !important; /* スマホでの説明文の大きさ */
display: -webkit-box !important;
-webkit-line-clamp: 2 !important; /* 説明文を最大2行でカット */
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
/* --- PC表示設定（画面幅が768px以上の時：3列） --- */
@media screen and (min-width: 768px) {
.custom-card-area .new-entry-cards {
grid-template-columns: repeat(3, 1fr) !important; /* PCは3列 */
gap: 15px !important; /* 隙間を広めに */
}
.custom-card-area .entry-card-link {
height: 250px !important; /* PCでのカードの高さ */
}
.custom-card-area .entry-card-title {
font-size: 16px !important; /* PCでのタイトルの大きさ */
}
.custom-card-area .entry-card-snippet {
font-size: 12px !important; /* PCでの説明文の大きさ */
-webkit-line-clamp: 3 !important; /* PCは最大3行まで表示 */
}
}
</style>
「カスタムHTMLブロック」での設定まとめとメンテナンス方法
・1ショートコードの調整:cats=”ID” を実際のカテゴリIDに。count=”99″ この数値を大きくしても、記事数÷3列＝切上値行数までの表示となるので、”99″でもOK。
・2表示位置の切り替え:現在は text-align: left !important;（左寄せ）に設定しています。
もし中央に戻したくなったら、ここを center に変えるだけです。でも、効かないですね。
・3カードの高さ (height):文字が画像からはみ出る場合は、PC用の 250px やスマホ用の 160px の数値を大きくしてください。
追記：投稿の本文に「コードそのもの」をテキストとして表示させて残したい場合は、WordPressの「コード」ブロックを使用する。
通常の「段落」や「プレーンテキスト」として貼り付けると、WordPressが気を利かせて「プログラムの実行」や「自動整形」を行ってしまい、中身が崩れたり消えたりすることがある。
手順は、編集画面で「＋」ボタンを押し、「コード」ブロックを検索して追加し、その中に貼り付ける。これで、画面上には「実行されない、ただのテキスト」として、背景がグレーの枠の中にきれいに収まる。
