Cocoonのトップページ並び順が不規則 Geminiに聞いてみた

cocoon トップページの記事一覧したの 「もっとみる」を オフにしたい
Cocoonのトップページで「もっと見る」ボタンを非表示にする方法は、トップページの作成方法によって異なります。
1. 「新着記事」ウィジェットを使用している場合
ウィジェットの設定でボタンをオフにできます。
lolipop-lightplan.blog
lolipop-lightplan.blog
[WordPress管理画面] > [外観] > [ウィジェット]
「フロントページ」等に配置している「[C] 新着記事」(または投稿一覧系)ウィジェットを開く
「「もっと見る」を表示する」 のチェックを外して保存する
2. 「新着記事」ブロックを使用している場合
固定ページをトップページにしている場合、エディタ上の設定を確認してください。
固定ページの編集画面で「新着記事」ブロックを選択
右側のブロック設定にある 「「もっと見る」ボタンを表示する」 をオフにする
3. CSSで強制的に非表示にする
設定項目が見当たらない場合は、以下のコードを [Cocoon設定] > [アクセス解析・認証] > [CSS用コード] もしくは子テーマのCSSに追記して消去可能です。
wp-cocoon.com
wp-cocoon.com
css
.go-to-new-entry {
display: none;
}
現在、「新着記事」ウィジェットと固定ページのどちらでトップページを作成されていますか?
5 件のサイト
TOPページのスニペット(抜粋)を非表示設定して … – Cocoon
… ショートコードnew_listを用いており。 snippet=1となっていませんか? もしくは新着記事ブロックの…
フロントページにある「もっと見る」のボタンを消 … – Cocoon
[解決済] フロントページにある「もっと見る」のボタンを消したい * 3 投稿 * 2 ユーザー * 2
【Cocoon】「最近の投稿」ウィジェットを非表示にする …
「ウィジェット」をクリック。 次に、「サイドバー」をクリック。 すると、以下のよう画面になり、左からウィジェットを削除す…

トップページに4記事のみのしか記事表示しない、下に「もっと見る」が出ている。表示設定は30にしてあるが?
「表示設定」を30にしていても4記事しか出ない場合、「WordPress自体の基本設定」ではなく、「Cocoon独自のブロックやショートコード」が優先されている可能性が高いです。
以下のいずれかの設定が原因と考えられます。
1. 「新着記事ブロック」またはショートコードを使っている
固定ページをトップページにしている場合、エディタ内に配置したブロックの設定が優先されます。
ブロックの場合: 編集画面で「新着記事ブロック」をクリックし、右側のサイドバー設定を確認してください。
「表示件数」が「4」になっていませんか?
下の方にある 「「もっと見る」ボタンを表示する」 のチェックを外すとボタンが消えます。
ショートコードの場合:
2. ウィジェットで設定している
[外観] > [ウィジェット] の「フロントページ」等に 「[C] 新着記事」 を入れていませんか?
ウィジェットの設定パネル内に 「表示件数」 と 「「もっと見る」を表示する」 の項目があります。ここで件数を変更するか、チェックを外してボタンをオフにしてください。
3. カテゴリ別一覧(タブ)を使っている
[Cocoon設定] > [インデックス] タブ内の「並び替え」や「カテゴリ表示」で、特定のカテゴリのみを表示する設定(フロントページタイプ)にしている場合、そちらの件数指定が優先されます。
現在の状況確認:
トップページは「最新の投稿(デフォルト)」のままですか? それとも「固定ページ」を割り当てていますか?

トップページは「最新の投稿(デフォルト)」のままです。トップページには最新の記事が4つのみ表示です。どこにも4の設定は見当たりません。
「最新の投稿」に設定しているのに4記事しか出ず、さらに「もっと見る」ボタンが出ている場合、Cocoonの「フロントページタイプ」の設定が影響している可能性が非常に高いです。
WordPress 本体の「表示設定(30件)」よりも、Cocoon 独自のレイアウト設定が優先されています。
解決方法
以下の設定を確認・変更してください。
[WordPress管理画面] > [Cocoon 設定] > [インデックス] タブを開く
「フロントページタイプ」 の項目を確認する
ここが「カテゴリごと」や「タブ一覧」など、「デフォルト(新着順)」以外になっていませんか?
もし「カテゴリごと」などの特殊なレイアウトになっている場合、すぐ下の 「表示件数」 が「4」になっているはずです。ここを増やしてください。
「もっと見る」を消す方法
同じく [インデックス] タブ内の下部にある 「「もっと見る」ボタンの表示」(または「カードリンク表示」の設定内)のチェックを外して保存してください。
なぜ4記事しか出ないのか?
Cocoonの「フロントページタイプ」で「カテゴリごと」などを選択すると、各セクションの表示数がデフォルトで「4件」に制限される仕様になっています。この場合、WordPress 本体の「1ページに表示する最大投稿数(30件)」の設定は無視されます。
補足:
もし上記 [インデックス] タブが「デフォルト」のままなのに4件しか出ない場合は、[外観] > [カスタマイズ] > [フロントページ設定] などに独自の制限がないか、あるいはプラグインが干渉していないか確認が必要です。
まずは Cocoon設定の「インデックス」タブ をチェックしてみてください。設定箇所は見つかりそうでしょうか?
2 件のサイト
サイト型にしたい場合の準備編 – Cocoon-grayish
フロントページ・新着記事一覧ページ用の固定ページを作る * フロントページ用の固定ページは、タイトルを分かりやすく「To…
インデックスの並び順が更新日の順にならない – Cocoon
1週間ほど前から「Cocoon設定」→「インデックス」→「フロントページタイプ」で「カテゴリごと」を選択して使用させてい…

Cocoonでトップページの記事一覧をタイルカード3列で表示していますが、新しい記事順にうまく並びません。ほとんどはちゃんと並ぶのですが、微妙に記事の日付が前後します。改善方法は?
Cocoonのタイルカード表示で記事の順番が前後する場合、「投稿日」と「更新日」のどちらを基準にするかの設定、または並び替えプラグインの干渉が主な原因です。
以下の3点を確認・修正してください。
1. 並び順の基準を「投稿日」に固定する
Cocoonのデフォルト設定では「更新日」が新しい順に並ぶようになっている場合があります。記事をリライト(更新)すると、古い記事が最新として上に上がってしまいます。
[WordPress管理画面] > [Cocoon 設定] > [インデックス] タブを開く
「並び順」 の項目を探し、「投稿日(降順)」 に設定して保存してください。
2. 並び替えプラグインを確認する
もし以下のプラグインを入れている場合、意図せずドラッグ&ドロップで順番が固定されている可能性があります。
Intuitive Custom Post Order
Post Types Order
これらのプラグインを導入しているなら、一度無効化するか、投稿一覧画面で順番が手動で入れ替わっていないか確認してください。
3. 公開時刻の微調整
WordPressは「日付」だけでなく「秒数」まで見て順序を決定します。
同じ日に投稿した複数の記事が前後する場合、それぞれの投稿編集画面で「公開日時」を確認し、数分ずらすことで意図した順番(左上が最新)に並び替えることができます。
侍テラコヤ
侍テラコヤ
まずは [Cocoon設定] > [インデックス] の並び順が「投稿日」になっているか確認してみてください。現在の設定はどちらになっていますか?
5 件のサイト
WordPress投稿を簡単並び替え!「Post Types Order」 – スターキッド
2024/12/06 — 設定方法 WordPress管理画面から「設定 > Post Types Order」」をクリック。 設定画面が立ち上が…
WordPressの記事を古い順に並び替えたいです。 – 侍テラコヤ
2024/03/28 — WordPressで投稿の一覧を古い順に並び替えるには、 WP_Query のパラメータの中の order を ASC …
サイトで見ると投稿の並び順が管理画面通りに … – Cocoon
2022/11/23 — (@chu-ya). Illustrious Member Registered. 結合: 4年前. 投稿: 4134.

通常の1列表示だとOKでタイルカード3列でNGです。
1列だと正常で、タイルカード3列のときだけ順番が前後して見える場合、最も可能性が高い原因は 「Masonry(メイソンリー)」機能によるレイアウト調整 です。
タイルカード表示では、カードの高さ(アイキャッチ画像やタイトルの長さ)が異なると、隙間を埋めるために記事の並び順(左→右)が物理的に入れ替わることがあります。
改善方法
Masonryを無効化する
隙間を自動で埋める機能をオフにすることで、記事の高さに関わらず「公開日順」に配置されます。
[Cocoon 設定] > [インデックス] タブを開く
下の方にある 「Masonryを利用する」 のチェックを外して保存する
カードの高さを統一する
Masonryを使い続けたい場合は、カードの高さがバラバラにならないよう調整します。
アイキャッチ画像の比率を統一: 全て「16:9」など同じ比率にする。
タイトルの行数を固定: [Cocoon 設定] > [インデックス] > [カード設定] で、タイトルの表示行数を制限する(例:2行まで)。
「先頭に固定表示」の設定を確認
特定の記事だけが常に先頭(左上)に来ている場合、その投稿の編集画面で 「ブログのトップに固定」 にチェックが入っていないか確認してください。
まずは 「Masonryを利用する」のチェックを外して、順番が正しくなるか試してみてください。これで解決しましたか?
3 件のサイト
投稿の先頭固定表示 – サポートフォーラム – WordPress
管理画面 > 投稿 > 投稿一覧から先頭固定表示する投稿を選択するか、管理画面 > 投稿 > 新規投稿を選択します。 右…
WordPress.org 日本語
タイルのmasonry.jsの廃止のご提案 | 要望 | Cocoon フォーラム
2023/09/05 — 設定 [Cocoon設定]→[インデックス]→カードタイプ タイルカード2列 タイルカード3列 ○提案内容 現在、mas…
インデックスの記事並び順について | 要望 | Cocoon フォーラム
2025/01/30 — フロントページに表示される記事をランダム. [Cocoon設定]→[インデックス]→並び順「ランダム」 カテゴリー一覧は…

[Cocoon 設定] > [インデックス] タブで「Masonryを利用する」が見つかりません。また、「タイトルの表示行数を制限する」もありません。
失礼いたしました。Cocoonのバージョンアップ等により、設定項目の名称や場所が変更されている、あるいはタイルカードの仕様上、Masonry(メイソンリー)機能が自動で強制適用されている可能性があります。
1列表示(エントリーカード)で並び順が正常であれば、データの順序自体は正しいものの、3列表示にした際の「隙間埋めアルゴリズム」が原因で視覚的な順序が前後しています。
wp-cocoon.com
wp-cocoon.com
これを解決するには、以下の2つのいずれかをお試しください。
1. カードの高さを完全に統一する(最も推奨)
記事の高さ(画像+タイトルの行数)が完全に一致していれば、隙間を埋める必要がなくなるため、順番が前後しなくなります。
アイキャッチ画像を統一: 全ての記事で同じ縦横比(例:16:9)の画像を使用してください。
タイトルの行数をCSSで固定する: 設定画面に項目がない場合は、以下のコードを [Cocoon 設定] > [アクセス解析・認証] > [CSS用コード] に貼り付けて、タイトルの高さを揃えてください。
css
/* タイルカードのタイトルを3行分に固定して高さを揃える */
.entry-card-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* ここを表示したい行数に変更 */
overflow: hidden;
height: 4.5em; /* 行数に合わせて調整(1.5em × 行数) */
}
2. 「縦型カード」等に変更してみる
「タイルカード3列」ではなく、「縦型カード3列」に変更してみてください。
[Cocoon 設定] > [インデックス] > [カードタイプ] で選択。
「縦型カード」はMasonry(自動隙間埋め)が働かないため、高さがバラバラでも上から順に並びます。
3. キャッシュの削除
設定を変更した後は、ブラウザのキャッシュや、もし導入していればキャッシュプラグインをクリアして確認してください。
まずは、「カードタイプ」を「縦型カード3列」に変更して、順序が改善されるか確認していただけますか?
追伸:
Cocoon フォーラムでは Masonry の廃止も議論されていますが、現状はカードの高さを揃えるのが最も確実な回避策です。
2 件のサイト
タイルのmasonry.jsの廃止のご提案 | 要望 | Cocoon フォーラム
2023/09/05 — 設定 [Cocoon設定]→[インデックス]→カードタイプ タイルカード2列 タイルカード3列 ○提案内容 現在、mas…
サイトで見ると投稿の並び順が管理画面通りに … – Cocoon
2022/11/23 — Cocoon設定→「インデックス」のカードタイプは「タイルカード3列」です。 これが原因です。 「タイルカード2列」と「…

縦型カード3列でOKになりました。行もそろうしこれで行ってみます。
「縦型カード3列」で無事に解決されたとのこと、安心いたしました!
縦型カードはタイルカードと違い、「同じ行の高さが一番高いカードに合わせて揃う」という性質があるため、Masonry(隙間を埋める動き)が発生せず、日付順が崩れる心配もありません。見た目も整うので、非常に良い選択だと思います。
もし今後、特定の記事だけタイトルの文字数が多くて「ガタつき」が気になった場合は、先ほどお伝えしたCSSでタイトルの行数を固定すれば完璧です。
一旦はこのまま運用してみてください。他にもCocoonの設定や表示で気になることがあれば、いつでもご相談くださいね。
今後のために、タイトルの高さを微調整するCSSが必要になった際はお声がけください。

ブラウザのキャッシュをクリアする方法は?
ブラウザのキャッシュクリアは、お使いのデバイスによって手順が異なります。主要な3パターンの手順をまとめました。
1. Windows (Chrome / Edge / Firefox)
ブラウザを開いた状態で、以下のショートカットキーを使うのが一番早いです。
Ctrl + Shift + Delete を同時に押す
「閲覧履歴データの削除」画面が出るので、「キャッシュされた画像とファイル」にチェックを入れて実行
2. Mac (Chrome / Safari)
Chrome: Command + Shift + Delete を同時に押して削除
Safari:
メニューバーの「開発」をクリック(表示されない場合は[設定] > [詳細] > [メニューバーに”開発”メニューを表示]にチェック)
「キャッシュを空にする」をクリック
3. iPhone / iPad (Safari)
[設定] アプリを開く
[Safari] を選択
下の方にある [履歴とWebサイトデータを消去] をタップ
※これを実行すると閲覧履歴も消えるため、特定のサイトのみ消したい場合は[詳細] > [Webサイトデータ]から個別削除も可能です。
手っ取り早く確認したい場合(スーパーリロード)
設定画面を開かずに、今開いているページだけを強制再読み込みして最新の状態にする方法もあります。
Windows: Ctrl + F5
Mac: Command + Shift + R
まずは Ctrl + F5 (Macなら Cmd+Shift+R)を試してみて、それでも表示が変わらなければ設定画面からの削除を試してみてください。
パソコンとスマホ、どちらのブラウザで確認されていますか?
12 件のサイト
ブラウザのキャッシュをクリアする方法
2025/03/26 — [Ctrl]+[Shift]+[Delete]ショートカットを押します。
Autodesk
【主要Webブラウザ】キャッシュデータの削除方法(Chrome/Firefox/Edge/Safari) | NEWS
2023/06/09 — 4:「キャッシュされた画像とファイル」にチェックをつけます。 ※この時、「キャッシュされた画像とファイル」にのみチェック…
www.accent.co.jp
トラブル対策やテストのためにChromeのキャッシュを素早く消去する
2018/04/02 — 最短2ステップでChrome ( Google Chrome ) のキャッシュを消去する Windows OSの場合: …

パソコンはオペラ、スマホはアイホンです。
パソコンのOperaとスマホのiPhone(Safari)ですね。それぞれの手順は以下の通りです。
1. Opera (パソコン)
Operaは設定画面のショートカットが便利です。
ショートカットキー: Ctrl + Shift + Delete (Macは Command + Shift + Delete) を押します。
手順:
期間を「全期間」に変更。
「キャッシュされた画像とファイル」にチェックを入れる。
「データを削除」ボタンをクリック。
もっと簡単な方法: ページを開いた状態で Ctrl + F5 を押すと、そのページだけ強制的に最新の状態に更新されます。
2. iPhone (Safari)
iPhoneは設定アプリから操作します。
手順:
ホーム画面の [設定] アプリをタップ。
少し下にスクロールして [Safari] をタップ。
[履歴とWebサイトデータを消去] をタップ。
「履歴を消去」を選択して完了です。
※タブを閉じたくない場合は「履歴を消去」の上のメニューで期間などを調整できます。
これでトップページの変更(縦型カードへの切り替え)が、スマホでも正しく反映されるはずです。
もしキャッシュを消しても表示が変わらない場合は、WordPress側(Cocoon)のキャッシュが残っている可能性があります。Cocoon設定 > [キャッシュ削除] から「全てのキャッシュを削除」を試してみてください。
キャッシュクリア後、スマホでも3列の並び順は綺麗に表示されましたか?

ホーム画面の [設定] アプリで [Safari]が出てきません?
ホーム画面の [設定] アプリを開いて、かなり下の方までスクロールしてみてください。
[Safari] は「一般」や「画面表示と明るさ」などの基本設定グループではなく、さらに下の 「アプリ一覧(またはシステムアプリ)」 のエリアにあります。
もし見当たらない場合は、以下の方法を試してみてください:
1. 検索機能を使う
[設定] アプリを開く。
一番上までスクロールすると「検索窓」が出てくるので、そこに 「Safari」 と入力。
出てきたアイコンをタップ。
2. スクリーンタイムの制限(見つからない場合)
もし検索しても出てこない場合、機能制限がかかっている可能性があります。
[設定] > [スクリーンタイム] > [コンテンツとプライバシーの制限]。
[許可されたアプリ] を開き、[Safari] がオフになっていたら「オン」にする。
3. Safariの「中」から消す(履歴を残したい場合)
設定アプリからではなく、Safariアプリ自体からも消去できます。
Safariアプリを開く。
右下の 「本を開いたようなアイコン(ブックマーク)」 をタップ。
右上の 「時計アイコン(履歴)」 をタップ。
右下の [消去] をタップして、期間(すべて、など)を選んで実行。
まずは、設定アプリの一番上の検索窓で「Safari」と打ってみるのが一番確実です。見つかりそうでしょうか?

見つかりました。おかげさまですべて解決しました。
無事に見つかって良かったです!これでパソコンもスマホも、意図した通りの日付順・3列表示でスッキリ確認できますね。
Cocoonは多機能な分、設定が複雑に絡み合うことがありますが、今回のように「縦型カード」をベースにするとレイアウトが崩れにくく、今後のメンテナンスも楽になります。
また表示や設定で「あれ?」と思うことがあれば、いつでもお気軽に話しかけてください。
ブログ運営、引き続き頑張ってくださいね!