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

左サイドバーでカラム余白幅10にすると、サイドバーが下に落ちる | 不具合報告 | 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)はこちら

スポンサーリンク
左サイドバーでカラム余白幅10にすると...
 
Share:

[解決済] 左サイドバーでカラム余白幅10にすると、サイドバーが下に落ちる  


nahosp2296
(@nahosp2296)
Active Member
参加: 1年 前
投稿: 8
2019年1月16日 11:48  

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

不具合かどうかわかりませんがこちらに投稿させていただきます。

タイトルの通りなのですが、左サイドバーでカラム余白幅10にすると、サイドバーが下に落ちます。

右サイドバーでは正常に表示されます。

また、左サイドバーでも、カラム幅余白をデフォルトにすれば正常表示されます。

プラウザでの確認は、chromeとIEです。

*以下はテスト環境で、一番上の広告はサーバーの仕様です。

----------------------------------------------
サイト名:テスト
サイトURL: https://suites.tfmwish.com/mahoro
ホームURL: http://suites.tfmwish.com
コンテンツURL: https://suites.tfmwish.com/mahoro/wp-content
インクルードURL: https://suites.tfmwish.com/mahoro/wp-includes/
テンプレートURL: https://suites.tfmwish.com/mahoro/wp-content/themes/cocoon-master
スタイルシートURL: https://suites.tfmwish.com/mahoro/wp-content/themes/cocoon-master
Wordpressバージョン:5.0.3
PHPバージョン:7.1.24
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/2.0
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.5.3.2
カテゴリ数:14
タグ数:16
ユーザー数:1
----------------------------------------------
Gutenberg:0
ホームイメージ:
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6822
わいひら - Facebookわいひら - Twitter
2019年1月16日 19:28  

僕の環境で試してみたのですが、同様の不具合が起こりませんでした。

サイトURL: https://suites.tfmwish.com/mahoro 
ホームURL: http://suites.tfmwish.com

その前に、URL設定関係のスキーム(https・http)がそれぞれ違うようです。
不具合を見る前に、WordPress設定の添付画像の言われる設定を確認してみてもらえますか(今回の不具合とは関係ないとは思います)。


nahosp2296
(@nahosp2296)
Active Member
参加: 1年 前
投稿: 8
2019年1月16日 20:05  

お答えありがとうございます。設定を修正しました。

状況は同じでした。firefoxでも確認してみましたが、状況は変わりませんでした。

現在、左サイドバーで運用しているブログはありませんので、特に急いでいるようなことはありません。

お時間のある時にご確認いただければと思います。

----------------------------------------------
サイト名:テスト
サイトURL: https://suites.tfmwish.com/mahoro
ホームURL: https://suites.tfmwish.com
コンテンツURL:/mahoro/wp-content
インクルードURL:/mahoro/wp-includes/
テンプレートURL:/mahoro/wp-content/themes/cocoon-master
スタイルシートURL:/mahoro/wp-content/themes/cocoon-master
Wordpressバージョン:5.0.3
PHPバージョン:7.1.24
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/2.0
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.5.3.2
カテゴリ数:14
タグ数:16
ユーザー数:1
----------------------------------------------
Gutenberg:0
ホームイメージ:/mahoro/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6822
わいひら - Facebookわいひら - Twitter
2019年1月16日 20:52  

状況は同じでした。firefoxでも確認してみましたが、状況は変わりませんでした。

上でも書いたように、先程の指摘は今回の不具合とは関係ない部分です。
ただ運営上、問題となりそうな部分だったので。

とりあえず、カラム幅や余白をデフォルトに戻してみてもらえますか。


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

PC大画面で表示すればテスト環境でもカラム落ちが見られました。

https://gyazo.com/743ee702803473acd1a7b6db128579f0

@media screen and (min-width: 1232px){
	.sidebar-left .content-in {
		flex-wrap: nowrap;
	}
}

雑ですが。こんな感じで追記すれば、私の環境では問題ないようです。


わいひら 件のいいね!
nahosp2296
(@nahosp2296)
Active Member
参加: 1年 前
投稿: 8
2019年1月17日 10:24  

お答えありがとうございます。

>かうたっく様

ご教示頂いたコードで、プラウザのウィンドウを画面最大にすると正常表示になりました。ウィンドウ幅小さ目(1220以下くらい)だとカラム落ちになります。(全画面は、1920×1080のPC)

>わいひら様

カラム幅や余白をすべてデフォルトにすると、正常表示になります。また、メインカラム幅がデフォルトだと、カラム間の幅が10でも正常表示になりました。

いろいろやってみると、カラム落ちするのは、メインカラム幅が710以下で、カラム間の幅10以下の時でした。(私の環境では)

*今はデフォルトの状態になっています。


わいひら 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 11か月 前
投稿: 143
草村 - Twitter
2019年1月17日 12:53  

多分ここが原因っぽいです。
Cocoon設定で余白の数値を変えても変更されてないように見えます。

.sidebar-left .main {
margin-left: 20px;
}

右サイドバー用の.main{margin-right: XXpx;}の値は変更されるので、本来なら同じ数値が入るんじゃないか?と思います。


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

みなさんありがとうございます。
不具合を確認しました。
修正したものを以下にアップしておきます。
https://github.com/yhira/cocoon/archive/master.zip


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3561
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年1月17日 22:28  

お疲れ様です。私の環境:たぶんデフォルトで説明の通り変更した状態で確認しました。

まだ大画面だけカラム落ちをするようです。ただCSSを付けると問題ないようです。

@media screen and (min-width: 1232px){
	.sidebar-left .content-in {
		flex-wrap: nowrap;
	}
}

雑ですが。こんな感じで追記すれば、私の環境では問題ないようです。

nahosp2296さんの環境ではどうでしょうか?

もしstyle適用されてる場合、削除したうえでご確認くださいね。

 

*****追記****

変更箇所が適応されてるのは確認した状態です。

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

草村わいひら 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 11か月 前
投稿: 143
草村 - Twitter
2019年1月17日 22:50  

お疲れ様です。

私もテスト環境で試してみましたが、カラム落ちしました。

.mainのmargin-leftの値が変更されているのは確認しました。
しかしまだ↓のコードが優先されます。

.sidebar-left .main {
margin-left: 20px;
}

多分ですが scss/sidebar.scss のこの部分↓

margin-left: $between_main_and_sidebar;

.sidebar-left付きなので、初期値(20px)の優先度が高くなっているようです。


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

あれ?
僕の環境ではうまくいっていたんだけど。何でだろう…。
とりあえず、.sidebar-left .mainを削除することにしてみました。
https://github.com/yhira/cocoon/archive/master.zip
これでうまくいかない場合は、かうたっくさんのコードの適用も考えようと思います。


草村 件のいいね!
草村
(@kusamura_mono)
Estimable Memberサイト
参加: 11か月 前
投稿: 143
草村 - Twitter
2019年1月17日 23:15  

お疲れ様です。
素早いご対応ありがとうございました。

私の環境で不具合が改善されたのを確認しました!
わいひらさんの環境では前回の修正で上手くいっていたみたいなので何か別の条件もあったのでしょうか。
よければnahosp2296さんの方でも確認いただけると助かります*


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

私の環境で不具合が改善されたのを確認しました!

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

※私の適当なコードが入らず済んだようなので、個人的に安心しました 🤗 

**

※まだ済んでませんでした。あと適当とは:他のコードをチェックしていない。&自分の環境状態でのみチェックした。ってことです 🙄  😊  🤗 

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

わいひら草村 件のいいね!
nahosp2296
(@nahosp2296)
Active Member
参加: 1年 前
投稿: 8
2019年1月18日 08:11  

わいひら様

かうたっく様

草村様

私の環境でも、デフォルトの状態と、最初に投稿した状態(カラム幅710以下余白10)で、正常表示が確認できました。

画面も、フル画面と小さめの画面で確認できました。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 6822
わいひら - Facebookわいひら - Twitter
2019年1月18日 18:57  

みなさん、動作確認ありがとうございます!
自分の環境だと問題なくても、他環境だと不具合が出ることも稀にあるので、確認いただいて助かります。


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をコピーしました