独自に行われているカスタマイズが影響しているということはないでしょうか。
僕の環境で?cat=0で確認してみたのですが、左寄りの表示にはなりませんでした。

CSSを見てみると、デフォルトではない添付画像のようなCSSもあります。
CSSカスタムなどで、「カスタマイズ」の「追加css」などに、カラム幅をいじるCSSなどは追加されていないでしょうか。
一度、親テーマのみを選択して、Metal Styles スキンを選択すると、同様の左寄りの不具合が出ますでしょうか？
※動作確認した後は、元の子テーマに戻していただいて大丈夫です。

@yhira さん

スキンのCSSの指定が原因かと、当初は考えたのですが、どうも、タイルカード３列で、カラム幅を、ある幅以上に広げたときに、エントリーカードのレイアウトが崩れてしまうようです。

まだ、解決方法の特定までは、至っていませんが・・

@yhira さん

タイルカードは、何かしらのスクリプトで、positionプロパティの値を操作しているんでしょうか？

ちひろさんの場合は、タイルカードを縦型カードにしても良いような気がしますが、タイルカードを使った場合に、スキンで

#main {
   width: auto;
}

を指定していることによるレイアウトの崩れのようです。

@yhira さん

スキンの作者様も、タイルカードでカラム幅を広くした状況のテストまでは、なかなかやらないのでは？と・・

スキン制御辺りが落としどころでしょうか。

ちひろさん

Cocoon設定の「インデックス」タブの設定で、「カードタイプ」を「タイルカード３列」に設定されているようですが、「縦型カード３列」も試してみてもいいのかもしれません。

「タイルカード」と「縦型カード」の違いは、「タイルカード」は、サムネイル画像が、トリミングされずに表示されるため、画像全体が表示されます。

それに対して、「縦型カード」の場合は、全てのサムネイル画像が同じアスペクト比で表示されるため、アイキャッチ画像に設定した画像の一部がトリミングされて見切れてしまう場合があります。

「タイルカード」の欠点としては、サムネイル画像の高さがバラバラになってしまうため、エントリーカードの横並び位置が揃わずに雑然とした並びになってしまいます。

「縦型カード」の場合は、サムネイル画像の高さが揃っているため、エントリーカードの横方向の並びが水平になるため、整然と並びます。

お二方、ご返信ありがとうございます。

わいひら様

独自に行われているカスタマイズが影響しているということはないでしょうか。
僕の環境で?cat=0で確認してみたのですが、左寄りの表示にはなりませんでした。

CSSを見てみると、デフォルトではない添付画像のようなCSSもあります。
CSSカスタムなどで、「カスタマイズ」の「追加css」などに、カラム幅をいじるCSSなどは追加されていないでしょうか。

「追加css」を見てみたところ、どのページも添付画像「image1」のようでして、cssは書かれていませんでした。
サイトを立ち上げて以降のことを思い返してみたのですが、cssを追加した記憶はありませんでした。

一度、親テーマのみを選択して、Metal Styles スキンを選択すると、同様の左寄りの不具合が出ますでしょうか？

上記についても、「外観」→「カスタマイズ」→「現在のテーマ」という項目の「変更」ボタンより、親テーマでライブプレビューを行なってみました(添付画像「image2」「image3」)。

すると、画像のとおり親テーマではメインカラムの縮小が見られませんでした。

【画像の補足】image2とimage3について
ライブプレビューでは親テーマのURLが表記されなかったので、補足させて頂きます。

親テーマには、スキンのホームに新着記事の「続きを見る」ボタンがありませんでした。
ですので、image2は親テーマのホームであり、このスキンでいうところの「/?cat=0」に該当しています。
また、image3は親テーマのホームから続きを見るボタンで遷移してすぐのページで、このスキンでいうところの「/page/2/?cat=0」に該当しています。

--------------------

リフィトリー様

Cocoon設定の「インデックス」タブの設定で、「カードタイプ」を「タイルカード３列」に設定されているようですが、「縦型カード３列」も試してみてもいいのかもしれません。

試してみました。
そうしましたら、投稿記事の3列のページに関しては、メインカラムが縮小される症状がなくなり、改善されました。

ありがとうございます！！

ただ一方で、前回mk2様にご指摘頂いた固定ページの「サイトマップ」と、そこから遷移できる「未分類」カテゴリーページの2つにおいて、依然変わらない状況です。

【補足】前回ご質問したページ

メインカラムの新着記事の表示幅を修正したい

ちひろさん

わいひらさん

あまり詳しく診てしないので、間違っているかもしれませんが、スキンの「Metal Styles」のCSSに、以下を加えるのでも良いような気もしてきました。

.no-sidebar .content #main {
    width: 100%;
}

既に、ちひろさんは「カードタイプ」を変更なさっているようで、以下のページの確認はできませんでした。
https://issyonisukusuku.net/?cat=0

とりあえず、私のローカル環境で確認してみました。

Cocoon設定は、以下の状態です。

• スキン「Metal Styles 」を選択
   
• 「カラム」－「メインコンテンツ設定」－「コンテンツ幅」
  "未入力"（デフォルトの800px）
   
• 「インデックス」－「カードタイプ」
  "縦型カード3列"

上記の状態でのスクリーンショットです。

頭がこんがらがってきてしまい、上記までのところで断念。。。してしまいました。

【追記】
もとい。。。です。

投稿者:: @mk2_mk2

「.content-in」は「display: flex;」を無効にしたものと、
「#main」の「width: 100%;」にしたものでは、
幅が違うんですよね。

添付画像は、

• 前者はメインコンテンツ幅がデフォルト設定（800px）
• 後者はメインコンテンツ幅を1400px

 
にした状態で比較してしまったからでした。

メインコンテンツ幅をデフォルト設定に戻すと、後者の幅は1196pxでした。

paddingが左右29px、borderが左右1pxありますから、
1196 ＋ 29×2 ＋ 1×2 ＝ 1256pxです。

投稿者:: @leafytree

どうも、タイルカード３列で、カラム幅を、ある幅以上に広げたときに、エントリーカードのレイアウトが崩れてしまうようです。

これも必要条件だったんですね。
この条件がわからなかったので（原因がわからなかったので）、ちょっとどう直してよいものかわかりませんでした。
以下のように修正しておきました。
https://github.com/yhira/cocoon/commit/63e27f5096890a2902ae847556c73fd06b4f44cc

これで、取り立て大きな問題もないような気もします。

------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

@yhira さん

まだ出先なので、スマホからですが、それだと.サイトマップや、未分類のページの説明がつかないような気がします。

PHPで、カラム幅を算出している数値から、autoに切り替わる辺りのことと、サイドバーが非表示にしてあることが関係しているような気がします。

「サイドバーが非表示のとき」という分岐が要るような気がします。

とても難しくて、頭がこんがらがりますし、私にとっては難易度が高過ぎます。
（flexは難しいです。）

何故スキンが「.main」ではなく「#main」にしたのかは良く分かりませんが、優先度を上げた理由があったはずですが、ちょっと分かっていません。

「サイトマップ」のページと、「未分類」のページでは、「.no-sidebar .content .main」に「width: 100%」があるのですが、「#main」ですから勝ってしまっている状態。

@mk2_mk2 さん

Cocoonは基本的には、２カラムをベースにしてCSSが書かれていて、サイドバーを非表示にしたときだけ、２カラムのCSSを上書きして、横幅いっぱいになるようなCSSが書かれているようです。

今回は、横幅いっぱいになるようにしてある、サイドバー非表示用のCSSを、スキンのCSSでさらに上書きしてしまっていることに原因があるようです。

ですので、問題は、案外シンプルです。

リフィトリーさん

ちひろさんのサイトでは、「.no-sidebar .content .main」が出てくるのですが。

@mk2_mk2 さん

サイドバーの非表示は、cocoon設定の「全体」タブで行ってテストしていますか？

リフィトリーさん

サイドバーを「全体」の設定で消すことはしていません。
「全てのページで表示」のままです。

それでも、スキン「Metal Styles」を選択しただけで、サイドバーは消えているようです。
（くわしくCSSを確認はしていません、もう今日は頭が澱んでいます。）

【追記】

スキンのCSSに以下がありました。

#sidebar {
    display: none;
}

私は、サイドバーを消す設定をしていないから、出てこないのですね。
「全てのページで非表示」にすると、「.no-sidebar .content .main」は出てきました。

ただ、全ての方がそうしてくれるとは。。。という気はします。

@mk2_mk2 さん

「Metal Styles」というスキンは、１カラムのデザインなのですね。

そもそも、そこに気づいていませんでした。 ? 

であれば、Cocoon設定の「全体」タブのサイドバーを非表示にする機能をスキン制御にして触れないようにしてしまう方が良いのかもしれないですね。

スキン作者様のサイトを見てみようとリンクをクリックしてみたのですが、リンク切れになっていてどのようなスキンなのか詳しく調べることができないです。

@mk2_mk2 さん

１カラム専用のスキンにおいて、ユーザーがCocoon設定の全体タブのサイドバーの表示、非表示の操作ができてしまうと、問題が生じたときに、複雑化してしまうような気がします。

リフィトリーさん

投稿者:: @leafytree

「Metal Styles」というスキンは、１カラムのデザインなのですね。

はい、そうみたいです。

投稿者:: @leafytree

１カラム専用のスキンにおいて、ユーザーがCocoon設定の全体タブのサイドバーの表示、非表示の操作ができてしまうと、問題が生じたときに、複雑化してしまうような気がします。

そうですね。
とても複雑です。

この辺りをどうするのか。。。というのはありそうです。

わいひら様
リフィトリー様
mk2様

以下のように修正しておきました。
https://github.com/yhira/cocoon/commit/63e27f5096890a2902ae847556c73fd06b4f44cc

親テーマの再編集、ありがとうございます！
さっそく差し替えてみました。

＜タイルカード3列の場合＞
問題のページすべてにおいてメインカラムが縮小されることはなくなりました。

また、mk2様の仰っていたカラム幅においてもテストしてみました。
①私が当初行なっていた「800px」指定の場合
②「未入力(デフォルト)」の場合

上記2つの違いは特に見られませんでした。

＜縦型カード3列の場合＞
2ページにわたるエントリーカードのメインカラムは縮小されることなく、美しく表示されるようになりました。

しかし、「サイトマップ」と「未分類カテゴリー」のページにおいては、依然縮小されたままでした。

縦型3列カードでも、同様の方法でカラム幅を設定してみたところ、どのページのメインカラム幅においても違いは見られませんでした。

mk2様

エントリーカードのページは、ちひろさんのサイトでは確認できませんから、私のローカル環境で確認しますと。

添付画像のようになりました。
設定は以下を参照しました。

とりあえず、私のローカル環境で確認してみました。

Cocoon設定は、以下の状態です。

スキン「Metal Styles 」を選択

「カラム」－「メインコンテンツ設定」－「コンテンツ幅」
"未入力"（デフォルトの800px）

「インデックス」－「カードタイプ」
"縦型カード3列"

【追記】
必要かどうか定かではなかったのですが、いつもたくさんの方々が開発に携わって頂いているおかげで、素人の私でさえもサイト運営ができているので、他に同スキンをお使いの方のお力になれれば幸いです。

そもそも僕の環境の未分類のページだと、問題なく表示されているようです。
今度は何が悪さしているんだろう。
※Cocoon設定でサイドバーは表示させてあります。

サイトマップページといっても、いわば固定ページですよね？
特におかしい表示には見えないんですけど。
何か別にトリガーがあるんだろうか。

私のローカル環境では、「縦型カード3列」では問題ないですが。

サイトマップのページもスキンの

#main {
    width: auto;
}

が影響していると思うのですが。。。

皆様へ

すみません、見落としていました。
縦型カード3列では、画像URLのメインカラムも縮小されていることが分かりました。

現在、HTMLタグの見直しとサーチコンソールのエラー修正を行なっているのですが、その際に画像URLに遷移してみたところ、添付画像のように縮小されて表示されていました。

一方のタイルカード3列では、固定ページも画像URLも、メインカラムが縮小されていませんでした。

以下に、画像URLの一部を掲載いたします。
すべて貼るとたくさんになってしまうので、縮小されている画像URLの一部を掲載いたします。

まず、添付画像がこれです。↓

https://issyonisukusuku.net/recipes/chanchan-takosan/attachment/chanchan-takosan-complete/

続いて、

https://issyonisukusuku.net/recipes/pickles/attachment/pickles-complete-2/

https://issyonisukusuku.net/header-image/

https://issyonisukusuku.net/site-icon/

https://issyonisukusuku.net/reasonable-life/share/attachment/share-image/

https://issyonisukusuku.net/reasonable-life/facewash/attachment/facewash-image/

縦型カード3列では、画像URLのメインカラムも縮小されていることが分かりました。

試しにCocoon（Metal Stylesスキン）を最新版にアップデートして、テスト的に親テーマを選択してMetal Stylesスキンを選択するとどうなりますか？
※確認後は元に戻していただいて大丈夫です。

なぜ僕の環境では正常に動作していて、該当ページでは表示されないのか原因の切り分けを行いたいです。

サイドバーがソースコード上に表示されていないのはなんででしたっけ？
（※以前の返信に書いてありましたっけ？）

カスタマイズ？、そうでなくて他の可能性を考えたら、「Cocoon設定でサイドバーを表示していない」とか。でないとしたら「サイドバーのウィジェットをすべて外している」から？の可能性もあるのかも。
同様の環境でテストを行うために、よろしければ教えてください。

デフォルトだとこんな感じで出力されるはずなんですが。

わいひら様

お伝えすることが前後して申し訳ないのですが、まず、下記の件について回答させて頂きます。

サイドバーがソースコード上に表示されていないのはなんででしたっけ？
（※以前の返信に書いてありましたっけ？）

カスタマイズ？、そうでなくて他の可能性を考えたら、「Cocoon設定でサイドバーを表示していない」とか。でないとしたら「サイドバーのウィジェットをすべて外している」から？の可能性もあるのかも。

私の方の「Cocoon設定」上では、サイドバーを表示したり、サイドバーにウィジェットを配置したりしていません。

また、cssについては先日お伝えしたとおりですが、サイドバーにかかわらず全く触っていません。

あと、先にメッセージを頂いていたcocoonの親テーマに関してですが、親テーマはライブプレビューではなくて、最新バージョンに差し替えて有効にしてみる、ということでしょうか？

わいひら様

試しにCocoon（Metal Stylesスキン）を最新版にアップデートして、テスト的に親テーマを選択してMetal Stylesスキンを選択するとどうなりますか？

すみません、親テーマを有効化したことがなかったのですが試してみました。

添付画像に貼っているのが、該当の画像リンクです。

Cocoon設定の「インデックス」を確認するとデフォルトに戻っていたので、「縦型3列カード」に変更しています。

https://issyonisukusuku.net/recipes/chanchan-takosan/attachment/chanchan-takosan-complete/

#content-in はFlexboxで、#main は、そのフレックスアイテムなので、ブロック要素であったとしても、width: auto; を指定することで、#main の子要素の幅によって、幅が決められるので、横幅いっぱいには広がらない、のではないかと推測します。

ですので、width: 100%; の指定が上書きされないように保つ必要があるような気がします。

また、タイルカードの場合は、内側のコンテンツのCSSの特殊性から、.content-in のコンテナをブロック要素に保つ必要があるようです。

現状、親テーマのCSSの、10008行目のメディアクエリと10031行目の.content-in {display: block;}の指定によって、1023px以下の画面幅では、ブロック要素に保たれていますが、それ以上の画面幅になるとフレックスボックスの指定が有効になるため、レイアウトが崩れてしまうようです。

サイドバーにウィジェットを配置したりしていません。

これと同じにすることで、ソースコードは同じ状態になりました。
ただ、なぜか同じ不具合が出ないんですね…。

@leafytree 

これは、リフィトリーさんのローカル環境で同じスキンを使用して動作させても同じように左に寄りますか？

・Cocoon設定のインデックス設定は「縦型3列」

・サイドバー・スクロール追従エリアのウィジェットをすべて外す

とりあえず、自分のテスト環境と、今回提示されたサイトの違いのトリガーがわからないなりに修正するしかないか。

僕はスキン作者ではないので、詳しいことはわかりませんが、そもそもスキンにある現況のこの記述必要ないんじゃなかろうか。

#main {
  width: auto;
}

僕のテスト環境では、消してしまっても特に動作に影響はないように見えるんだが。

とりあえずwidth: auto;をなくす方向で修正してみました。
https://github.com/yhira/cocoon
https://github.com/yhira/cocoon/commit/57623342496a6272ba07f80623bd7bd3925b2efd#diff-ab22004e5c6850f94c05628f49f8a044ed89e83693907b1b18aaa51cc9768af6L27

とりあえず自分の環境では、縦型3列でも、タイル3列でも正常に表示されています。
カランが幅を変更しても大丈夫のように見えるが。

投稿者:: @yhira

これは、リフィトリーさんのローカル環境で同じスキンを使用して動作させても同じように左に寄りますか？

・Cocoon設定のインデックス設定は「縦型3列」

・サイドバー・スクロール追従エリアのウィジェットをすべて外す

私のテスト環境でも「縦型３列」では、症状は再現しないようです。

あくまで、「タイルカード」を選択したときだけのようです。

投稿者:: @leafytree

私のテスト環境でも「縦型３列」では、症状は再現しないようです。

あくまで、「タイルカード」を選択したときだけのようです。

ですよね、僕のテスト環境と全く同じです。

@yhira  さん

どうも、このスキン、CSSの検証が足りないかもしれません。

中途半端な画面幅だと、カテゴリーラベルがズレちゃうみたいな気がします。

@yhira  さん

私も

#main {
   width: auto;
}

は、もともと必要なかったんじゃないかと推測しています。

投稿者:: @leafytree

どうも、このスキン、CSSの検証が足りないかもしれません。

中途半端な画面幅だと、カテゴリーラベルがズレちゃうみたいな気がします。

それは、GitHubのファイルでアップデート後もでしょうか。
もしそうであれば、よろしければその画面幅を教えていただければ幸いです。

@yhira  さん

カテゴリーラベルがズレちゃうこともありますし、エントリーカード周りのCSSも、一度見直した方がいいかもしれません。

@yhira さん

デベロッパーツールで仮検証していたのですが、GitHubのものをインストールしてみました。

うーん…。

カードタイプを「エントリーカード（デフォルト）」にして、メインコンテンツ幅を1600pxにすると、左によりますね。

@yhira さん

エントリーカードのデザインの崩れは、先ほどの修正とはまた別の問題のような気がします。

少し細かい修正が要るのかもしれないです。

@yhira さん

ｍｋ２さん

デフォルトのエントリーカードの体裁を整えるには、大幅にCSSを修正する必要がありそうです。

かと言って、スキン作者様の意向もお有りかと思われますので、何とも難しいところです。