現在デフォルトスキンとして「 Like Simplicity」を適用中。

フォーラムのトピックを開くと横揺れしています(iPhone・iOS環境) | 不具合報告 | 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:

[解決済] フォーラムのトピックを開くと横揺れしています(iPhone・iOS環境)  


kchan
(@kchan)
Eminent Member
参加: 2か月 前
投稿: 30
2019年9月15日 16:44  

お世話になっております。

iPhoneで、Cocoonフォーラムの鍵がついていないトピックを開くと、横揺れしています。

鍵がついているトピックは大丈夫です!

This topic was modified 1か月 前 by kchan
This topic was modified 1か月 前 by わいひら

かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3564
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年9月15日 18:57  

どのページでしょうか?

横揺れするのは、原因があります。

鍵が付いてないのは、ページ内にhttpから始まるアドレスの何らか(例えば画像など)をよみこんである。からかも知れないですね。

不具合・カスタマイズ対象ページのURLを提示してください

状況を見て。もしかしたら対応してくれるかもしれませんね^^

This post was modified 1か月 前 by かうたっく

わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6848
わいひら - Facebookわいひら - Twitter
2019年9月15日 20:35  

僕はiPhoneを持っていないので、何方か持っている方に確認していただくしかないかも。
ただ、出来れば、確実に横揺れするトピックURLをこれといって貼り付けていただけると、助かります。


kchan
(@kchan)
Eminent Member
参加: 2か月 前
投稿: 30
2019年9月15日 21:24  

かうたっくさん、わいひらさん
お返事ありがとうございます。

URLは、フォーラムの中の閉じていないトピック全てになります。

URLを貼って、トピックを閉じてしまうと横揺れがなくなるので どのURLを貼っていいのか困るのですが… このトピックも閉じていないので横揺れしています。

https://wp-cocoon.com/community/bugs/%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a9%e3%83%a0%e3%81%ae%e3%83%88%e3%83%94%e3%83%83%e3%82%af%e3%82%b9%e3%82%92%e9%96%8b%e3%81%8f%e3%81%a8%e6%a8%aa%e6%8f%ba%e3%82%8c%e3%81%97%e3%81%a6%e3%81%84%e3%81%be/#post-21858

This post was modified 1か月 前 by kchan

leafytree
(@leafytree)
Trusted Member
参加: 8か月 前
投稿: 80
2019年9月16日 01:08  

私の iphone の safari でも Firefox でも同じ症状です。
でも、kchanさん、鍵付きとそうでないのとの違いに良く気づきましたね。

 
鍵付き、鍵なし、両方のCSSをチラッと見てみましたが、いまのところ、違いに気づけません。
This post was modified 1か月 前 by leafytree

kchanわいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3564
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年9月16日 06:42  

はみ出している領域が知りたいかも。

ココではなく、書き込みをする場所:返信するあたりがはみ出してると思うんですけど。

それがどこだかわかりますか?

はみ出してる風に見えない場合、長押ししたら、領域が見えるなどないですか?

HTMLを見るとWordPressでよくあるはみ出す場所あたりのwidthを入れてみるのが良いかも知れないです。

div img iframe table

あとhtmlを見てあり得るかも知れないのがform input

あたりかな、っと。

divを入れたらstyleが崩れたっぽい。

気になる場所として、{;} ソースコードを表示した状態で#mceu_62とか、widthが入ってるから変。

  • 今チェックしたら、#mceu_62 はやっぱ変わる。
  • その下にあるソースコードのOKとかもはみ出してる。

スマホで書き込むとき、{;} ソースコードを開くと横揺れするかも

This post was modified 1か月 前 by かうたっく

かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3564
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年9月16日 08:40  

書き込みしながらチェックした結果

@media screen and (max-width: 780px) {
	/*こっちエディタ:不明*/
	.mce-edit-area.mce-container.mce-panel.mce-stack-layout-item {
		width: 100% !important;
	}
	/*こっちソースコード*/
	body.wpforo .mce-container.mce-panel .mce-container-body.mce-abs-layout {
		width: 94%!important;
	}
	.mce-container.mce-form.mce-abs-layout-item.mce-first.mce-last {
		width: 100% !important;
	}

	.mce-widget.mce-primary.mce-abs-layout-item.mce-first.mce-btn-has-text {
		left: 10px !important;
		width: 60px !important;
	}

	.mce-widget.mce-btn.mce-abs-layout-item.mce-last.mce-btn-has-text {
		left: 90px !important;
	}
}

{;} ソースコードを表示した状態では横揺れしないようです。

※セレクタが長いのは、他の場所まで反映されないようにclass属性を丸々付けた為

※デベロッパーツール上の、フォーラムCSSっぽい所に貼り付けた結果
https://wp-cocoon.com/wp-content/plugins/wpforo/wpf-themes/classic/widgets.css?ver=1.6.1&fver=20190905104639

/*こっちエディタ:不明*/

これは原因すら分からないので微妙^^;

ただソースコードのほうがおかしかったので、その可能性はナクナイ。けど不明。って感じです。

  • 領域内に収まった様子:2個

https://gyazo.com/6e271867849c7bd4113a369444845d48

https://gyazo.com/68e67adf73e309306aafaad2d48bec27

  • 添付ファイルは、はみ出した様子
This post was modified 1か月 前 2 times by かうたっく

わいひら 件のいいね!
leafytree
(@leafytree)
Trusted Member
参加: 8か月 前
投稿: 80
2019年9月16日 10:11  

書き込みスペースの右側の薄いグレーの部分が欠けているようです。


たなかま
(@tanakama)
Estimable Memberサイト
参加: 2年 前
投稿: 243
たなかま - Twitter
2019年9月16日 10:15  

こんにちは。

デベロッパーツールで見たところ、mainクラスのwidthっぽいですね。

下記cssの.mainを880pxから100%にしたら直りました。

https://wp-cocoon.com/wp-content/uploads/cocoon-resources/css-cache/css-custom.css?fver=20190914113221&wp-mce-4940-20190515

原因の場所も添付します。(iframe内ですね)

This post was modified 1か月 前 by たなかま

kchanわいひら 件のいいね!
leafytree
(@leafytree)
Trusted Member
参加: 8か月 前
投稿: 80
2019年9月16日 11:00  

たなかまさん

私はデベロッパーツールで、はみ出し部分を見つけられなかったのですが、後学のため、どのような環境でお使いになっているか、ご教示いだたけますか?


たなかま
(@tanakama)
Estimable Memberサイト
参加: 2年 前
投稿: 243
たなかま - Twitter
2019年9月16日 12:02  

leafytreeさん

XcodeというアプリのiOSシミュレーターを使っています。※Mac専用のアプリです。

ユーザーエージェントの切替とは違い、実機と同じ環境で表示できます。

①XcodeのiOSシミュレーターを起動して、safariから該当URLにアクセス。

Mac側のsafariも起動して、開発メニューからデベロッパーツールを起動します。

これでChromeとかのデベロッパーツールと同じように扱えます。

デベロッパーツールでCSSなどを反映すると、iOSシミュレーター側の表示も適用されます。


わいひら 件のいいね!
leafytree
(@leafytree)
Trusted Member
参加: 8か月 前
投稿: 80
2019年9月16日 12:20  

たなかまさん

Mac環境とは言え、それはとても便利ですね。

教えていただき、ありがとうございます。m(_ _)m


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3564
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年9月16日 14:19  

デベロッパーツールで見たところ、mainクラスのwidthっぽいですね。 下記cssの.mainを880pxから100%にしたら直りました。

メディアクエリ@media screen and (max-width: 1023px)で、以下の指定があるので、なんらか(もしかしたらiPhone)の優先順位的に負けてるのかな?

main.main, div.sidebar {
	display: block;
	margin: 10px;
	width: auto;
}

例えば

iframe { width: 100%; }

もしくは

iframe { max-width: 100%; }

と指定すればどうなりますか?ダメであれば、それらに !important をつけて見るとか。

  • 親テーマstyle.cssに
main.main, div.sidebar { width: auto !important; }

としてみるとどうなりますか???

  • 親テーマstyle.cssに

また、親テーマCSSの指定を以下にすれば改善されるような感じですか???

main.main, div.sidebar { width: 100%; }

 

お二方、検証ありがとうございました!!
※Cocoonユーザー的&たまたま絡んでチェックした人の1人として❦

This post was modified 1か月 前 3 times by かうたっく

わいひら 件のいいね!
たなかま
(@tanakama)
Estimable Memberサイト
参加: 2年 前
投稿: 243
たなかま - Twitter
2019年9月16日 17:02  

かうたっくさん

親HTMLから、iframe内のcssを変える場合は、javascriptになるかと思います。

僕もフォーラムの仕様が分かってないのですがcss-custom.cssにアクセスできない場合はoverflowとかになりますかね・・・。

.mce-edit-area {overflow-x:scroll }

javascriptの管理面も都合があると思いますので、そのあたりのご判断は、わいひらさんに委ねたいと思います。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6848
わいひら - Facebookわいひら - Twitter
2019年9月16日 19:00  

みなさん、ありがとうございます!
みなさんからいただいたヒントを参考に、当サイトに修正版を適用してみました。
現在、当トピックはiPhone環境で横揺れいたしますでしょうか?


kchan 件のいいね!
leafytree
(@leafytree)
Trusted Member
参加: 8か月 前
投稿: 80
2019年9月16日 19:06  

safari で閲覧したところ、横揺れしなくなっています。


kchanわいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3564
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年9月16日 19:39  

https://github.com/yhira/cocoon/commit/904e031ccf9eaec98802afec05effd504f007309

これなら他に影響しなくって良い感じ。かも^^

かうたっくさん

親HTMLから、iframe内のcssを変える場合は、javascriptになるかと思います。

私の環境ではそのような事にならないんですよね。

 

iPhone環境と全く違うのと、チェックできないiPhone環境をチェックしてくれるのはありがたいですね❦

皆さま検証、お疲れさまでした。


kchan 件のいいね!
kchan
(@kchan)
Eminent Member
参加: 2か月 前
投稿: 30
2019年9月16日 21:45  

出遅れましたが、私も横揺れしていないことを確認しました。
直って良かったですね(*^^*)
みなさま、おつかれさまでした。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6848
わいひら - Facebookわいひら - Twitter
2019年9月17日 19:23  

みなさんご確認ありがとうございます!
問題ないようなので、トピックを閉じさせていただこうと思います。


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

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

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

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

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

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

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

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

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

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年

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

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

Cocoon
  
動作中

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

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