1. サイドバー以外での余白の有無について

これは、どのウィジェットエリアに入れたときでしょうか？

インデックストップでは余白は入っているようです。

2. 余白を有効化した場合の834px以下について

これも、僕の環境ではずれているようには見えないです。
キャプチャをいただいてよろしいでしょうか。

あと、余白なしの場合でも元からmarginで下に余白が入るようになっていたような気がするのですが、余白なしの場合は下にも余白が入らないようにする仕様にはできないでしょうか？

idとかclassとかでいうとどの要素のことでしょうか？
#recommendedでいえば、余白のあるようには見えないです。

以下の添付画像では、デフォルトの親テーマでプラグインも全て無効化してあります。
スタイルのバージョンは1.9.8.2、ブラウザはChrome/76.0.3809.132からです。
（カスタマイズの都合でサムネイル画像が1:1になっています。）

【1. サイドバー以外での余白の有無について】
①がインデックスリストトップに「余白が有効」で入れた状態で、②は①と同じ設定でサイドバーに入れた状態です。
どちらもクラス名は入っているようです。

【2. 余白を有効化した場合の834px以下について】
③は②のままモバイル幅で表示したときのものです。

【余白なしの場合でも元からmarginで下に余白が入る...】
④は余白を無効にした場合のものです。

1.についてはCocoon設定でヘッダー下に出力したときのようにmarginが入っていないか、サイドバーでの表示のようにwidthによる間隔を設けていないのが問題のようです。

2.についてはstyle.css#L9382によって生じているようです。

サイドバー以外でのおすすめカードに

flex-wrap: wrap;

を入れて、余白等のスタイルを調整する（サイドバー同様に左右のmarginをなくし、代わりにwidthで間隔を持たせる）ことで解決しました。

1だけでなく、2の不具合もこのあたりのmarginに起因していたようで上記の修正で解決しました。

【余白なしの場合でも元からmarginで下に余白が入る...】については、画像に対して

vertical-align: bottom;

を入れると解決します。

サイドバー以外はwrapされないようにしているのは仕様ということでしょうか？

何故か僕の環境だと、問題ないんですよね。

とりあえず、marginを使わないで、Flexboxを使う方法でも書き直してみようと思います。

サイドバー以外はwrapされないようにしているのは仕様ということでしょうか？

その、wrapというのは、どれのことを指しているのですか？

wrapというのは、どれのことを指しているのですか？

私の環境では、サイドバーに置いた場合（style.css#L8020）とタブレット以下の場合（style.css#L9372）しか

flex-wrap: wrap;

は適用されておらず、上記の条件に当てはまらない場合はwrapされません。

おすすめカードのリンク数が少なくても画像が拡大されすぎないように、サイズに合わせた幅の上限（style.css#L2324）が設けられている一方、カードリンクを4等分することを想定した幅（style.css#L7951）が設定されていたりしてよく分からなかったので、とりあえずサイドバー上でのおすすめカードのスタイルと同様に、4等分（25%）を基準としてスタイルを書き直したのが前の返信（#post-22314）の添付画像下部にあるものです。

wrapとはそのことだったんですね。
おすすめカード内では、.wrapクラスを使っていたり、それとも囲っている要素のことなのかと考えてしまい、ちょっとわかりませんでした。
flex-wrapは、モバイルより大きな画面では、nowrapは仕様です。
個人的には、4つとは限らずに、6個程度までは並べられるようにしようと、そのようにしました。
width:25%の方が間違いです。上限は、少ない枚数だとどうしても画像が粗くなってしまうのでもうけています。

flex-wrapは、モバイルより大きな画面では、nowrapは仕様です。

width:25%の方が間違いです。

ということはやはり#post-22314の修正で解決したように、wrapを想定したスタイルとnowrapを想定したスタイルが混在していたのが問題だったのですね。
では、nowrapで統一する形でスタイルの調整よろしくお願いします。

とりあえず、25％の方は修正しておきます。
https://github.com/yhira/cocoon/commit/e80edb22a4aed12764b340311acc6aca1646f695
ただ、max-widthはそのままのままです。1つや2つ、画像が大きく表示されすぎても、粗すぎて見た目的にも良くないので。

vertical-align: bottom;なんですけど、なんでか不具合が再現できないので、ちょっと様子を見てみようと思います。

確認しました。

flex-wrapにwrapを指定している箇所にwidthを入れるのは分かるのですが、デフォルトはnowrapの仕様で

width: 100%;

は必要なのでしょうか？

デフォルトだと320pxから、横幅が余る場合はmax-width:400pxまでは大きく表示させて、できるだけ密着させて表示させようかなと思いまして（おすすめカードエリアをなるべくぎっしりと埋めたい：余白がない場合向けのためにも）。
80px分広がることで、出来る限り密着感を出したかったので。
それでも横幅が足りなくなるほどアイテムが少ない時は、どうしようもないですが。

そうなのですね。

おすすめカードエリアをなるべくぎっしりと埋めたい

についてはよく分からないのですが、nowrapに統一した場合で確認した限りではwidthを取り払ったことで

vertical-align: bottom;

の部分を含めて不具合が解決したように見えるので、とりあえずwidth指定を無効にする形で対応しようと思います。

修正ありがとうございました。

多くの人も想定使用枚数4枚の表示で、出来る限りブラウザいっぱいにしたかったというか。
1枚につき80px伸びることで、ある程度だけどいろいろなブラウザー幅にも適用できるので。

100％にしないとこんな感じで左右に余白ができるので。

100％にする場合は、おすすめカード内のimgに対してvertical-align: bottom;を挿入すれば改善される感じですか？
それなら、挿入しておこうと思います。
不具合環境がなくて、ちょっと確かめようがなくて。

さっきチェックしてみたんですけど、冒頭にある不具合は再現できないんですよね。

デフォルトだと320pxから、横幅が余る場合はmax-width:400pxまでは大きく表示

多くの人も想定使用枚数4枚の表示で、出来る限りブラウザいっぱいに

4個を想定としているのでwidth:25％➡100%の件もmax-widthの400pxの仕様も問題ないですし。

• わいひらさんの画像：左右の余白

• （3個以下ならwidth: 100%でもmax-widthの400pxの都合でPC大画面では左右の余白ができるのは仕方ない感じ）

flex-wrapは、モバイルより大きな画面では、nowrapは仕様です。

width:25%の方が間違いです。

ということはやはり#post-22314の修正で解決したように、wrapを想定したスタイルとnowrapを想定したスタイルが混在していたのが問題だったのですね。
では、nowrapで統一する形でスタイルの調整よろしくお願いします。

混在してるって言うより、サイドバーとかスマホ・タブレットの場合はメディアクエリでmax-width: 834pxのときだけ.recommended .navi-entry-cards に　flex-wrap: wrap;　を指定している感じで。

その領域メディアクエリなしで、全幅　flex-wrapにnowrap　と指定したら、タブレット以下でも2列にはなりません。
※おすすめカードに6個置いていれば、モバイルでも1列で6個表示される感じだったり。

2. 余白を有効化した場合の834px以下について

last-childのカードリンクが「margin-right: 0;」となっているため、ずれてしまいます。

この挙動もおかしくないですよ

last-childだけでなく、おすすめカードのリンクすべてに　margin-right　か何かの余白が付いていればそうなるかも

親テーマのカスタマイズを無効にしてみるとキチンと表示されませんか？

以下の添付画像では、デフォルトの親テーマでプラグインも全て無効化してあります。
スタイルのバージョンは1.9.8.2、ブラウザはChrome/76.0.3809.132からです。
（カスタマイズの都合でサムネイル画像が1:1になっています。）

失礼します。

おすすめカードウィジェットを早速使わせてもらおうと思い、設定していたのですが、余白ありで設定しても余白ができなくて悩んでおりました。

こちらのトピックを拝見し、最新のテーマをインストールしてみましたが改善されませんでした。

しかし、ロコさんがおっしゃるとおりにwidthが100%になっているところを削除してみると改善できました！

念のため、余白ができなかったときの画像を添付しておきます。

有益な情報をありがとうございます!!

Cocoonにはいつも感謝しております。

PCビューですよね。

本来はスマホビューでの不具合。って話だと思ってるんですが。だからなんとなく状況が違っている気がします？

画像だけの提示だと、きついカモ。どんなデバイスで見てるかとかも分からないし、実際の様子が見れないし。何らかのキャッシュが邪魔していた可能性もあるので。

HTMLとかもチェックできないし、ローカルでチェックしても再現できないので・・・

WindowsのChromeでは問題ないっす（笑

おすすめカードウィジェットを早速使わせてもらおうと思い、設定していたのですが、余白ありで設定しても余白ができなくて悩んでおりました。

出来れば、実物のURLとかを提示していただくことは無理でしょうか。

実物を見れば、多分手元に不具合環境がなくても修正できると思うんです。

URLが無理な場合は、よろしければwidthが100%になっているところを元に戻して、以下のファイルで問題ないか確認してみていただけますでしょうか。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

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

修正前後の動作から軽く調べてみたところ、おそらくですが少なくともChromium系のブラウザでの問題のようです。
国内ではあまり見当たりませんでしたが、海外でググるとちらほらと情報が出てきます。

OSで画像の最適化設定を行っていると、ブラウザ上で読み込まれる画像がサイズ以上に引き延ばされる場合にDOM上で補正が入る仕組みのようです。
画像が引き伸ばされて荒くならないよう画像サイズまでに止める形で、古いサイトの画像でも画像が最適なサイズで見られるためとのことです。

ただ、ブラウザ側が設定を読み込んでいるのか、OS側が設定値をブラウザに渡しているのか。
また、どの設定値のことなのかは分かっていません。

画像をサイズ以上で表示させるデザインは滅多にないことと、解決できたスタイルひとつに時間を割く余裕はないので、申し訳ないですが分かったことは以上です。

国内ではあまり情報がないことから影響はそんなに大きくなさそうなので、

おすすめカードエリアをなるべくぎっしりと埋めたい

というCocoonの仕様はそのままで、必要に応じてスタイルに修正を加える形でよいかと思います。

【解決方法】

同様の問題が生じた方のために、解決方法を簡潔にまとめておきます。
以下の3つの方法のうち、いずれかを適用することで調整できると思います。

1. 現在のCocoonのスタイルに対し、「.recommended .navi-entry-cards a」の「width: 100%;」を無効にする（または画像サイズ以下のピクセル幅を設定する）。
2. 十分に大きなサムネイル画像を用意し、おすすめカード（ナビカード）のサムネイル画像に採用する。
3. Flexboxのタイプをサイドバーやタブレット以下のものと共通にし、カード画像に「vertical-align: bottom;」を設定する。

ざっくりと回答しておきます。

100％にする場合は、おすすめカード内のimgに対してvertical-align: bottom;を挿入すれば改善される感じですか？

いいえ。
問題点1・2とvertical-alignの根本的な原因は同じですが、現在のスタイルではvertical-alignを入れるだけでは改善しません。

4個を想定としているのでwidth:25％➡100%の件もmax-widthの400pxの仕様も問題ないです

いいえ。
上述したように、結果的にはこのwidthの仕様が原因です。

混在してるって言うより、サイドバーとかスマホ・タブレットの場合はメディアクエリでmax-width: 834pxのときだけ.recommended .navi-entry-cards に　flex-wrap: wrap;　を指定している感じで。

その領域メディアクエリなしで、全幅　flex-wrapにnowrap　と指定したら、タブレット以下でも2列にはなりません。

解決方法3の視点から見ると、複数のタイプが混在しているのが問題とも言えます。
デフォルトのタイプに補正が入り、その補正が他のタイプのボックススタイルに影響しています（問題点1が問題点2やvertical-align問題に影響しているということ、問題点2やvertical-align問題はPCで表示したものをそのままスマホ幅に持っていったのが主な原因）。

last-childだけでなく、おすすめカードのリンクすべてに　margin-right　か何かの余白が付いていればそうなるかも

ひとつ上の回答にある影響とこれの関係でスタイルが崩れていました。

親テーマのカスタマイズを無効にしてみるとキチンと表示されませんか？

本トピックで添付した画像は全て、新たなローカル環境を用意して検証したものです。
Cocoon設定を引き継いだのと検証用に入れたコンテンツ以外は初期の状態です。

widthが100%になっているところを削除してみると改善できました

添付された画像とこれで解決したことから、#post-22301の添付画像内①や#post-22314の添付画像内上部と同じ症状だと思います。
子テーマを用意し、子テーマのスタイルでwidthを上書きするなどして対応してください。

PCビューですよね。

本来はスマホビューでの不具合。って話だと思ってるんですが。

いいえ。
主にPCビューで起こる問題です。

WindowsのChromeでは問題ない

いいえ。
この組み合わせでも生じ得る問題です。

Chromeのバージョンは幾つですか？

僕の環境は、Windowsの以下のバージョン。

Google Chrome は最新版です
バージョン: 77.0.3865.90（Official Build） （64 ビット）

後学のためにも、不具合環境を再現させて、是非不具合状態はみておきたい。

OSはWindowsで、ブラウザ情報は本トピック立ち上げ時では#post-22301にある情報です。

再現できないとのことだったので、#post-22301の時点でブラウザに起因する問題だと考え、念のため最新版へのアップデートを行い、#post-22314にある検証結果からはわいひら様と同バージョンのものとなっています。

ブラウザ情報があったんですね。見落としていました。失礼しました。

1. 現在のCocoonのスタイルに対し、「.recommended .navi-entry-cards a」の「width: 100%;」を無効にする（または画像サイズ以下のピクセル幅を設定する）。
2. 十分に大きなサムネイル画像を用意し、おすすめカード（ナビカード）のサムネイル画像に採用する。
3. Flexboxのタイプをサイドバーやタブレット以下のものと共通にし、カード画像に「vertical-align: bottom;」を設定する。

とりあえず、一番良いのは②にした方が一番良いのでしょうが、新たに大きなサムネイルサイズを作成し、利用者側でRegenerate Thumbnailsしてもらわなければならないので、これはやめておきます。

③も不具合環境がなく確認しながら修正ができないので、これも難しい。

ということで、消去法で①の修正をやっておこうと思います。出来れば、不具合を見て修正したかったんですけど、ちょっと再現出来そうもなかったので。
優先性で言えば「表示が崩れない」 >>> 「おすすめエリアを埋めたい」とした方が良いので。

消去法で①の修正をやっておこうと思います。

とのことで、修正を確認しました。
ありがとうございます。

ひとつ返信し忘れておりましたが、#post-22368についてはこの環境下からだと確認できておりませんでした。
画像サイズまでに止めてしまうので、余白の不具合を除けばwidthによってボックス幅は変わらなかったということです。

不具合を見て修正したかったんですけど、ちょっと再現出来そうもなかったので。

一応、ブラウザのドキュメントを読み込めばどこかには載っているとは思います。
ブラウザネイティブなLazyLoadとかHTTP/3とか、いろいろ先取りして実験的に導入してしまうので、標準化される動きになればもっと情報が出てきたり、実装方法が分かりやすい仕様に変更されたりすると思います。
特に画像周りについては、Webからブラウザ・OS側に内製しつつあるので。

ひとつ返信し忘れておりましたが、#post-22368についてはこの環境下からだと確認できておりませんでした。
画像サイズまでに止めてしまうので、余白の不具合を除けばwidthによってボックス幅は変わらなかったということです。

どの環境下かわからないですが、4個ってことかな？って思ったり？？？

その前に何かしらのChrome側で何かのCSSで、画像サイズ以上の指定をCSSですればおかしくなる。ってことかもしれませんね？？？

たぶんわいひらさんの環境でも小さいアイキャッチを利用した場合、例えば画像150px位の正方形に近い形だと、崩れる状態に似てるのかな？？とか。思ったり？？？

一応、ブラウザのドキュメントを読み込めばどこかには載っているとは思います。
ブラウザネイティブなLazyLoadとかHTTP/3とか、いろいろ先取りして実験的に導入してしまうので、標準化される動きになればもっと情報が出てきたり、実装方法が分かりやすい仕様に変更されたりすると思います。

一般記事を書いているユーザーさんの多くは、そのようなブラウザ？？？を使ってないと思います。

でも、それでどこもおかしくないのであれば、それはそれでいい結果が出たのかも知れないですね＾＾

ロコさん、わいひらさん、詳細までチェックをし続け疲れたかもですが、より良い環境になってるかもしれないですね！？？？おつかれさまでした ? ? ? 

返信について補足しておきますと、

どの環境下かわからないですが、4個ってことかな？って思ったり？？？

画像最適化設定環境下でということです。
画像サイズが幅の最大値となるので、それ以上のwidthを指定していても変化がありません。

一般記事を書いているユーザーさんの多くは、そのようなブラウザ？？？を使ってないと思います。

Chromeを使用している方は、よほどバージョンアップを怠っていない限りは実装されていて、標準化する方向に進みつつあります。

画像最適化設定環境下でということです。
画像サイズが幅の最大値となるので、それ以上のwidthを指定していても変化がありません。

ロコさんの環境でって事かな？わからないですが、どっちでも大丈夫です。

丁寧なご返信ありがとうございます ? 

一般記事を書いているユーザーさんの多くは、そのようなブラウザ？？？を使ってないと思います。

Chromeを使用している方は、よほどバージョンアップを怠っていない限りは実装されていて、標準化する方向に進みつつあります。

今はそうでないから確認ができない状態で。
標準化されたとき、はじめて確認できそうです ? 

一応、ブラウザのドキュメントを読み込めばどこかには載っているとは思います。

ごめんなさい。
他にやらなければならないこともあるので、ちょっとそこまでやっている余裕はないかもしれません。
ご確認ありがとうございます！