サイドバーでスキン動作を確認できます。

iPad 横表示 くずれる。 | 不具合報告 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。

  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ環境情報とともに書き込んでいただけると助かります

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
Share:

[解決済] iPad 横表示 くずれる。  

  RSS

kazuaki
(@kazuaki)
Trusted Memberサイト
参加: 1年 前
投稿: 91
2019年2月7日 02:06  

iPadでトップページを横にして見ると表示が崩れます。

https://car-repo.jp/

ご確認よろしくお願いします。

----------------------------------------------
サイト名:最新自動車情報2019
サイトURL: https://car-repo.jp
ホームURL: https://car-repo.jp
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-colors-black/style.css
Wordpressバージョン:5.0.3
PHPバージョン:7.2.6
ブラウザ:Mozilla/5.0 (iPad; CPU OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/71.0.3578.89 Mobile/15E148 Safari/605.1
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja-jp
----------------------------------------------
テーマ名:Cocoon
バージョン:1.5.9
カテゴリ数:47
タグ数:1
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.5
----------------------------------------------
Gutenberg:1
ホームイメージ:/wp-content/uploads/2018/08/310291_154288271419323_1696792428_n.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.5.3
Akismet Anti-Spam 4.1.1
Category Order and Taxonomy Terms Order 1.5.5
Classic Editor 1.4
Cocoon Blocks 0.1.2
EWWW Image Optimizer 4.6.2
External Links 6.8.1
Google XML Sitemaps 4.1.0
Head, Footer and Post Injections 3.1.2
Media Alt Renamer 0.0.1
Media File Renamer Auto 4.5.2
MetaSlider 3.11.1
PS Auto Sitemap 1.1.9
Search Regex 1.4.16
TinyMCE Advanced 5.0.1
WebSub/PubSubHubbub 3.0.1
WP-Optimize 2.2.11
WP Multibyte Patch 2.8.2
----------------------------------------------

 


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2259
2019年2月7日 06:05  

1枚目


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2259
2019年2月7日 06:06  

2枚目


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2259
2019年2月7日 06:06  

ChromeデベロッパーツールのiPadで確認してみました。崩れた様子を確認できません。

Safariで確認されてるのでしょうか?

どこがどのように崩れているか教えていただけますか?

  • 該当部分のキャプチャともに書き込んでいただけると助かります

3枚目。


kazuaki
(@kazuaki)
Trusted Memberサイト
参加: 1年 前
投稿: 91
2019年2月7日 08:54  

i-pad 画面で右側が隙間が空いています。chromeでもsafariでも再現できると思います。

 


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2259
2019年2月7日 10:55  

その状態で、下へスクロールして、どこかその幅よりはみ出してる部分はありますか?

 

よくあるのが広告とか、プラグインの何かだったりします。

下へスクロールし、はみ出した何かがあれば、そのスクショとそこに設定しているモノが何かを教えてください。

その機種を持ってない誰もが分かるよう、スクショもお願いします。

※そこに設定しているモノが原因です。プラグインであれば、停止すれば問題ないと思います。

※もしくはiPadの仕様?なのか、別の原因なのかも知れません。


kazuaki
(@kazuaki)
Trusted Memberサイト
参加: 1年 前
投稿: 91
2019年2月7日 15:09  

調べましたがはみ出しているものは特になさそうです。
chromeでipad表示でも再現されています。(左にずらせば)

プラグインなどではみ出している様子はないです。

1024だと起こるので原因が不明です。

バージョン: 1.5.9より以前のバージョンでも見ていましたが同じ現象はなかったです。

 


がっきぃ
 がっきぃ
(@がっきぃ)
ゲスト
参加: 2か月 前
投稿: 1
2019年2月7日 16:42  

原因は分かりませんが、こちらの環境ではヘッダーメニュー→その他のサブメニューが溢れているように見えます。


わいひら 件のいいね!
haineons
(@haineons)
Trusted Memberサイト
参加: 12か月 前
投稿: 63
2019年2月7日 16:58  

トップへ戻るボタンがカラムからはみ出てるの原因っぽいですね

何が原因でそうなっているのかは分かりませんが…


わいひら 件のいいね!
kazuaki
(@kazuaki)
Trusted Memberサイト
参加: 1年 前
投稿: 91
2019年2月7日 19:16  

みなさまありがとうございます。

原因がわかりました。

グローバルナビが一つ多いことで上記の様な症状が出ていた様です。

一つ項目を減らすことで解決されました。わいひらさんももしデザインで修正が可能でしたらお願いします。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2259
2019年2月7日 20:46  

ヘッダーメニュー→その他のサブメニューが溢れているように見えます。

それでしたら今現在、780pxくらいから1000px強の横幅で横揺れすると思います。

その横揺れする部分だけご確認いただいて、サブメニューを右へ出せば横揺れは収まると思います。

https://bibabosi-rizumu.com/cocoon-navi-ko-cat-left/

サブメニューを置いてる場所によって、横揺れする幅があるんじゃないか!?って思うんですよね。

人それぞれメニューを置く場所が違うんで、どうしようもないかな。って思ったりです。


わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4545
2019年2月7日 22:13  

それは、サブメニューをアニメーションさせるためにそのような仕様になっています。
アニメーションさせないスタイルを書けば、そのような表示にならないようにもできます(display none;で制御)。

また、以下のスタイルシートを書くと余白はできなくなります。

.container {
overflow: hidden;
}

ただこの方法を使うと、サイドバーが追従しなくなる難点があります。

COLORSスキンを利用する場合は、一番右側のメニューにサブメニューを使わないのが一番いいのかもしれません。

ただ、当サイトも使っちゃってますが。

This post was modified 2か月 前 by わいひら

かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2259
2019年2月8日 02:03  

今そちらの環境のスタイルを以下のようにしたら、はみ出しはしませんでした。

ただキレイでもないと思います 🤗 

@media screen and (min-width: 769px) {
	.navi-in>ul .sub-menu {
		min-width: 0;
	}
}

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4545
2019年2月8日 19:15  

どれも、一長一短ですね。
あちらが立てば、こちらが立たずみたいな感じで。
何か難点もなくズバッと解決出来るいい方法はないもんだろうか。


がっきぃ
(@gackey-21)
Active Memberサイト
参加: 2か月 前
投稿: 16
2019年2月9日 20:41  

一番右側のメニューにサブメニューを使わないのが一番いいのかもしれません。

ただ、当サイトも使っちゃってますが。

素人考えで恐縮ですが、左側に展開するってのはいかがでしょう?

https://thx.jp/spread-sub-menu-to-left-side-on-global-navi/


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 1年 前
投稿: 2259
2019年2月9日 21:17  

チラりずむ中です。

一番右側のメニューにサブメニューを使わないのが一番いいのかもしれません。

ただ、当サイトも使っちゃってますが。

素人考えで恐縮ですが、左側に展開するってのはいかがでしょう?

全て左に展開して左側に孫メニューを置いてると、左側がズレる可能性はないのかな?と思います。

ユーザーさんのメニューの置きかた・使いかたによって変わるので難しいと思ったり。

 

一番右にサブメニューを置かずに、右から2番目に置いた場合でも、アクセスされたPC・タブレット・スマホの横幅(縦・ヨコにした場合)によっては右にはみだしたりすると思います。

スマホの機種によって横幅・縦幅が増えてるのもあるのと、ユーザーさんのメニューの数やサブメニューの位置など色々考えたら、簡単なスタイル指定だけでキビシイとと。

メディアクエリで各自調整するか、10個メニューがある場合で文字列が長め・短め。且つ何個目にサブメニューがあるか。など自由度が高すぎるので、テーマ側で調整するのは難しい気もしたり。

※ただ自分で調整するのも難しいなども。

あと、スマホのスタイルに関係ない場合は、できたらPCのみスタイルを反映させておきたかったりで。※AMPにも影響するので。って蛇足程度に思ったりします。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4545
2019年2月9日 22:14  

素人考えで恐縮ですが、左側に展開するってのはいかがでしょう?

最後のサブメニューだけ左側に展開するというのは、最も現実的な解決方法かもしれません(※右に展開、右に展開…ときて左に展開となるのでちょっと違和感はあるかもしれませんが)。

とりあえず、COLORSテーマに反映させてみました。

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

当サイトにも適用してみました。
読者はそこまで細かいところは気にしませんし、はみ出すよりはいいかなと。


がっきぃ 件のいいね!
がっきぃ
(@gackey-21)
Active Memberサイト
参加: 2か月 前
投稿: 16
2019年2月10日 09:28  

なるほど。展開はそのままで、位置を右揃えにする。

確かにこれで十分ですね。違和感もそれほどありませんし。

読者はそこまで細かいところは気にしませんし、はみ出すよりはいいかなと。

ですね^^


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 1年 前
投稿: 4545
2019年2月10日 19:38  

ご確認ありがとうございます。
今回は、最も難点が目立たない解決方法を考えていただき感謝です 😘 


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:2年8ヶ月

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
△新しいのでサービス運営櫪がまだ短い
サービス運営期間:8ヶ月

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

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

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

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

Cocoon
  
動作中

ログイン または 登録 してください

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