現在「イノセンス」スキンを適用中です。

PC表示で、メディアクエリの切り換え付近の画面幅で横スクロールバーが出ます | 開発者向けフォーラム | 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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

わいひらさん

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

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

 

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

 

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

 

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

 

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

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

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


わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

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

 

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

 

This post was modified 5か月前 3回 by リフィトリー

わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

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

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

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

 

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

 

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

This post was modified 5か月前 3回 by リフィトリー

リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

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

 

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

 

This post was modified 5か月前 by リフィトリー

わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

わいひらさん

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

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

 

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

 

皆さま

 

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

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

 


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12129
わいひら - Facebookわいひら - Twitter
 

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

@yhira さん

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

 

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

This post was modified 5か月前 2回 by リフィトリー

リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

@yhira さん

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

 

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

 

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

 

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

 

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

 

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

 

1262にしたとき

 

This post was modified 5か月前 4回 by リフィトリー

リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

1263にしたとき

 


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

@yhira さん

投稿者:: @leafytree

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

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

@yhira さん

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

This post was modified 5か月前 by リフィトリー

わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12129
わいひら - Facebookわいひら - Twitter
 

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

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

@yhira さん

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

 

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

 

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

 

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

 

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

 

 


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

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

 


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12129
わいひら - Facebookわいひら - Twitter
 

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

@yhira さん

ブラウザはFirefoxです。

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

 

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

 

This post was modified 5か月前 by リフィトリー

リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

@yhira さん

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

 

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

 

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

This post was modified 5か月前 by リフィトリー

リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

@yhira さん

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

 

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

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

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

 

また、

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

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

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

 

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

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

@yhira さん

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

 


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

@yhira さん

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

投稿者:: @leafytree

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

 

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

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

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

 

また、

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

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

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

 


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

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

 


わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12129
わいひら - Facebookわいひら - Twitter
 
投稿者:: @leafytree

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

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

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

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


リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

@yhira さん

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

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

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

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

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

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

 

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

 

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

 

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

 

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

 

This post was modified 5か月前 2回 by リフィトリー

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12129
わいひら - Facebookわいひら - Twitter
 

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


リフィトリー 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 2年前
投稿: 5395
Topic starter  

@yhira さん

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

 

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

 

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

 

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

 

This post was modified 5か月前 2回 by リフィトリー

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 12129
わいひら - Facebookわいひら - Twitter
 

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


共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年10ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年8ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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