例えば、Cocoonのサイトの「.wrap」の値は、1276px で、メディアクエリの切り換え値は、1280px と、やはり、４px 足した値になっていますが、これを、1300px にすると、スムーズに切り替わるような気がします。

また、サイドバーの padding を増やされたときに、メディアクエリの切り換え時の padding値を変えなかったので、切り替え時に少しギクシャクした感じになっているようです。

画面幅を縮めたときのサイドバーのpadding値を「10px」から「1.5％」に変更すると、ギクシャク感がとれました。

また、メインカラムの 67％ を 67.4％ にしたら、カラム間の幅が広がってしまうのを防げるような気がしました。

@media screen and (max-width:1280px) {
  .wrap {
    width:auto
  }
  .main,
  .sidebar,
  .sidebar-left .main,
  .sidebar-left .sidebar {
    margin:0 .5%
  }
  .main {
    width:67.4%
  }
  .sidebar {
    padding:1.5%;
    width:30%
  }
  .entry-card-thumb {
    width:38%
  }
  .entry-card-content {
    margin-left:40%
  }
}

メディアクエリの切り換え値は、「.wrap」の値に対して算出されているのでしたら、「.wrap」+24pxで上手くいけば良いなと思った次第です。

ただ、いろいろと他との関係もあろうかと思われますので、ご確認いただければと思います。

デベロッパーツールでのテスト

横スクロールバーが、メディアクエリの切り替え時に画面幅の少ない範囲で出るのは、安全策をとって、メディアクエリの数値をやや少なくして、カラム間の幅が広くなったりすることを防ぐ役割を持っていたような気もします。

でも、現状ほど被せていなかったような気がするのですが・・・私の勘違いかもしれません。

やはり、24px は、ちょっとやり過ぎなのかもしれません。

以前から以下のようだったか・・？

ちょっと、よく覚えていません。すみません。

わいひらさん

どうやら、また、私の勘違いだったみたいです。

ローカルのテストサイトではなく、運用サイトでメディアクエリの切り替えの数値を増やしてみたら、上手くいかなかったので。（もっとも、この運用サイトはカラム幅の切り替えをカスタマイズしているところがあるので、テストの基準にはならないのですが・・）

お騒がせして、すみません。

皆さま

お騒がせしてすみません。

でも、サイドバーの padding と、メインカラムの幅の比率のところは、何かのヒントになればと思います。

コンテンツが少なく、縦スクロールバーが画面右端に表示されていないときと、コンテンツが縦スクロールバーが表示されるだけ有って、縦スクロールバーが表示されているときでは、横スクロールバーが表示される条件が異なるため、やはり、縦スクロールバーが表示されている時を基準にして、ギリギリに設定する訳にはいかないのだと、ちゃんと覚えておかないといけないなと反省しているところです。

このトピックに気づいてませんでした;
僕の環境でも症状を確認したのでGitHubのファイルのメディアクエリを＋20にしてみました。

@yhira さん

のちほど、修正いただいたもので検証してみたいと思いますが、やはり、縦スクロールバーの幅の 17pxないし、18px は、縦スクロールバーの出ない、コンテンツが少ない場合も考慮に含めないといけないかもしれません。

もしかしたら、いままでどおりが良い、ということもあるかもしれません。

@yhira さん

GitHubのテーマをダウンロードしてテストサイトで検証してみたのですが、やはり、縦スクロールバーが表示されない、つまり、コンテンツが少なく、Webサイトがブラウザのウィンドウの高さより少ない高さのとき、+20pxだと、width: auto;  になるタイミングが微妙に早すぎてしまうような気がします。

デフォルトのカラム幅でやってみると、+6pxまでは、ほんの少しですが、横スクロールバーが表示される幅帯があります。

+7px ですと、私の環境の Firefox と Chrome では、横スクロールバーが表示されなくなるようです。

縦スクロールバーが表示された状態だと、+20pxぐらでもいいのかもしれませんが、そんなにコンテンツが少ないサイトは少ない、とは言え、やはり、幅の少ない方を基準にしておいた方が安全です。

+6pxでギリギリなので、いままでどおりでもいいのかなと思います。

縦スクロールバーの有無を考慮せずに書きこんでしまった私がいけないのだと思います。

1262にしたとき

1263にしたとき

@yhira さん

投稿者:: @leafytree

やはり、幅の少ない方を基準にしておいた方が安全です。

すみません。間違えました。

正しくは、「幅の広い方を基準に」でした。

@yhira さん

フォーラムにお問い合わせいただく方々のWebサイトを拝見していると、サイドバーのコンテンツも含めて、コンテンツの少ない状態で利用されていらっしゃるケースをときどき見かけましたので、必ずブラウザの右端に縦スクロールバーがあるとは限らないな、と思った次第です。

すいません、書かれていることの意味がちょっとよくわからなくなりました。
今回の修正で何が問題だったのでしょうか。

width: auto; になるタイミングが微妙に早すぎてしまうような気がします。

これでしょうか。
僕としては、横スクロールバーが表示されなくなった方が良いと思ったのですが（+7-10くらいに調整する必要があるのかもしれませんが）。

@yhira さん

+20px で、ブラウザの右端に縦スクロールバーが無い場合でも、少し早めに「.wrap」のwidthが、auto に切り替わるだけなので、カラム設定で設定されている、メインカラムとサイドバーの幅より、ちょっと膨らむ、というだけのことかもしれません。

Cocoonを最初に設計されたときに、Flexbox や float をいろいろ試されていて、現在のようになっているのかもしれませんね。

以前は有った、カラム間のマージンもずいぶん前にやめてしまったこともあり、スムーズに切り替わって、カラムの構成が崩れなければ、どちらでも良いのかもしれません。

+20pxでのテストサイトのGif画像をアップしてみます。

右端に、縦スクロールバーがないとき。

右端に縦スクロールバーがあるとき。

確認させてください。
こちらは+20にしたときでよいでしょうか？

また、使用ブラウザはChromeで良いでしょうか。
Firefoxのレスポンシブデザインモードだとそのように出なかったので。

@yhira さん

ブラウザはFirefoxです。

ローカル環境に新規にCocoonをインストールしているので、背景色以外はデフォルトです。

デベロッパーツールが映り込むようにしてみました。+20だと思います。

@yhira さん

ブラウザの画面右端の縦スクロールバーの幅は17px～18pxぐらいと思われるので、縦スクロールバーの有無によって、横スクロールバーが表示される条件が異なります。

以前から、.wrapの値が auto 切り替わる際には、横スクロールバーが表示される帯域はあったと思うので、横スクロールバーが完全に表示されないようにしなくても良いような気がします。

縦スクロールバーがあるときと、ないときで、バランスがとれていれば良いような気がします。

@yhira さん

やはり、私のテスト環境のFirefoxでは、

ブラウザのウィンドの右端に縦スクロールバーが表示されいる場合では、

.wrap 値 + 23px までは、横スクロールバーが表示され、

.wrap 値 + 24px からは、横スクロールバーが表示されなくなるようです。

また、

ブラウザのウィンドウの右端に縦スクロールバーが表示されていない場合では、

.wrap 値 + 6px までは、横スクロールバーが表示され、

.wrap 値 + 7px からは、横スクロールバーが表示されなくなるようです。

ということは、Firefoxでは、ブラウザの右端の縦スクロールバーの表示の有無によって、

17px の 差が出る、ということのようです。

メディアクエリの設定も、この差のことも踏まえて設定した方が良さそうです。

@yhira さん

Firefoxのレスポンシブモードの縦スクロールバーの幅は実際の表示より、少ないのかもしれません。

@yhira さん

Google Chrome でも、試してみましたが、以下のFirefoxの場合と全く同じになるようです。

投稿者:: @leafytree

やはり、私のテスト環境のFirefoxでは、

 

ブラウザのウィンドの右端に縦スクロールバーが表示されいる場合では、

.wrap 値 + 23px までは、横スクロールバーが表示され、

.wrap 値 + 24px からは、横スクロールバーが表示されなくなるようです。

 

また、

ブラウザのウィンドウの右端に縦スクロールバーが表示されていない場合では、

.wrap 値 + 6px までは、横スクロールバーが表示され、

.wrap 値 + 7px からは、横スクロールバーが表示されなくなるようです。

Firefoxの縦スクロールバーの幅。

投稿者:: @leafytree

.wrap 値 + 23px までは、横スクロールバーが表示され、

.wrap 値 + 24px からは、横スクロールバーが表示されなくなるようです。

だとしたら、+24で修正しておこうと思います。
横スクロールバーが表示されない方が良いと思うので。

僕は、レスポンシブモードだったから思ったように不具合が出なかったんですね ? 

@yhira さん

Version: 2.2.6.6 をGitHubからダウンロードしてローカルのテストサイトで試してみました。

縦スクロールバーがあるとき。

縦スクロールバーがないとき。

どちらの場合も、横スクロールバーは表示されなくなりました。

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

思わぬ問題が絶対出ないとも限らないので、しばらくは、様子を見守りたいと思います。

以下のリンクにある、.wrap の値が autoになったときの、サイドバーの padding と メインカラムの width のパーセンテージの件もご検討いただければ幸いです。

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

ご確認ありがとうございます。
GitHubのファイルのpaddingも調整してみました。

@yhira さん

早速、GitHubからダウンロードして、ローカルのテストサイトで試してみました。

Firefox、Chrome、IE、Edge で、ブラウザの横幅を変えてみましたが、特におかしなところは見つかりませんでした。

私の気づかないところも、あるかもしれませんし、Cocoonは様々な環境で利用されているので、やはり注意して見守りたいと思います。

早々の修正をありがとうござます。

ご確認いただきありがとうございます。