Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

PC表示で、メディアクエリの切り換え付...
 
共有:
通知
すべてクリア

[解決済] PC表示で、メディアクエリの切り換え付近の画面幅で横スクロールバーが出ます

32 投稿
2 ユーザー
10 Reactions
4,651 表示
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

わいひらさん

いつもお世話になっております。

ちょっと、気になったのですが、PC表示のときに画面幅を少しずつ狭くしていくと、メディアクエリの切り換えの幅辺りで、横スクロールバーが表示されてしまうようです。

 

以前も、一瞬だけ表示されてはいたと思うのですが、横スクールバーが表示される範囲が若干増えているような気がします。

 

個人的には、横スクールバーがギリギリ出ない数値をメディアクエリの切り換え数値に設定した方が良いような気もするのですが、それだと何か問題がありますでしょうか?

 

例えば、Cocoonのカラム幅がデフォルトの時、「.wrap」の値は、1256pxですが、それに対してメディアクエリの切り換え値は、1260pxとなっていて、4pxだけ足した値になっています。

 

これだと、横スクールバーが表示されてしまうので、「.wrap」の値に対して、24pxを足して、メディアクエリの切り換え値を1280pxにすると、ギリギリ、スクロールバーが表示されずに、キレイに切り替わるような気がします。

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

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


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

また、サイドバーの 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で上手くいけば良いなと思った次第です。

 

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

 

この投稿は4年前 3回ずつリフィトリーに変更されました

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

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

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

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

 

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

 

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

この投稿は4年前 3回ずつリフィトリーに変更されました

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

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

 

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

 

この投稿は4年前ずつリフィトリーに変更されました

   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

わいひらさん

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

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

 

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

 

皆さま

 

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

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

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17403
 

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

@yhira さん

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

 

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

この投稿は4年前 2回ずつリフィトリーに変更されました

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

@yhira さん

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

 

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

 

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

 

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

 

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

 

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

 

1262にしたとき

 

この投稿は4年前 4回ずつリフィトリーに変更されました

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

1263にしたとき

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

@yhira さん

投稿者:: @leafytree

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

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

@yhira さん

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

この投稿は4年前ずつリフィトリーに変更されました

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17403
 

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

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

@yhira さん

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

 

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

 

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

 

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

 

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

 

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

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

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17403
 

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

@yhira さん

ブラウザはFirefoxです。

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

 

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

 

この投稿は4年前ずつリフィトリーに変更されました

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

@yhira さん

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

 

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

 

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

この投稿は4年前ずつリフィトリーに変更されました

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

@yhira さん

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

 

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

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

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

 

また、

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

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

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

 

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

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

@yhira さん

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

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

@yhira さん

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

投稿者:: @leafytree

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

 

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

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

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

 

また、

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

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

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

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

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

 


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17403
 
投稿者:: @leafytree

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

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

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

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

@yhira さん

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

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

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

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

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

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

 

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

 

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

 

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

 

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

 

この投稿は4年前 2回ずつリフィトリーに変更されました

   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17403
 

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


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
トピックスターター  

@yhira さん

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

 

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

 

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

 

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

 

この投稿は4年前 2回ずつリフィトリーに変更されました

   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17403
 

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


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました