サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2020年9月10日 04:33
いつもお世話になっております。
このフォーラムのモバイルフッターメニューの「MENU」「情報」ボタンで、本来左右からスライドして出てくるメニュー表示がおかしいようです。
再現がなかなか難しく、単にフォーラムを表示しただけでは再現できませんでした。
私が再現できたのは、以下の操作手順です。
- フォーラムを表示
- モバイルフッターメニューの「情報」を選択し、PCではサイドバーにあたるものが右からスライド
- 「最近の投稿」から任意の投稿を選択し、表示させる
上記操作後に、モバイルフッターメニューの「MENU」「情報」を選択すると、表示がおかしくなるようです。
私のスマホはAndroidで、ブラウザはChromeです。
因みに、私のサイトでは再現出来ませんでした。
（Cocoonはver.2.2.3.1）
続いての投稿で、画像を添付します。
トピックスターター 2020年9月10日 04:36
上記投稿の手順で、モバイルフッターメニューの「情報」を選択した際の表示です。
PCだとサイドバーにあたるものが、赤枠の範囲でスクロールしていました。
トピックスターター 2020年9月10日 04:39
同様に、最初の投稿の手順で、モバイルフッターメニューの「MENU」を選択した際の表示です。
同じく赤枠内でスクロールしていました。
2020年9月10日 12:40
こんにちは。
こちら先日別の不具合に対応した事で起きたものと思われます。
下側のモバイルメニューが押しにくい時（iPhoneのホームバー問題）
ひとまず
translateY(0)
とした部分を
none
とする事で一応表示されるはずです。が。
noneとした場合でも、モバイルボタンの「サイドバーを表示したままページをスクロール※」するとサイドバーが非表示になってしまうと思います。
※サイドバー内ではなくページ全体をスクロールした時
（メニューも同じ）
iPhone側の不具合対応をtransformではない別の方法に変えるか、モバイルボタンの構造の見直しが必要かもしれません…。
わいひら reacted
2020年9月10日 13:52
先日のiPhoneのホームバー対策が別な事でご迷惑になっているようで済みません。
ちょうど今日、私もモバイル時にMENU表示がおかしくなる場合があって、再現方法を確認したらご報告をと思ったところでした。
ただ再現したり、しなかったり、どうしたものか？
と思っていた矢先にこちらの投稿にたどり着きました。
もし、ホームバー対策を一旦元に戻した場合、または別な対策を取った場合など、必要があればiPhone11pro環境でのテストはお声がけがあったら喜んでお手伝いさせていただきますので。
わいひら reacted
2020年9月10日 20:46
こっちにも同様の不具合も書き込みがあったんですね。
https://wp-cocoon.com/community/postid/39616/
とりあえず一旦元に戻しておきます。
https://github.com/yhira/cocoon/commit/aaeb39d5146c9d23119046b984e2f39b3cc28bdd
元に戻したバージョンはこちら。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
後で検証したいと思います。
2020年9月10日 20:57
その他の報告と動作動画。
https://wp-cocoon.com/community/postid/39633/
iPhone11proのChromeで利用中の出来事ですが、ハンバーガーメニューを押しても中味は空で、閉じる×印のみ表示される場合が多発してます。
私は画面の上、下、両方に同じ内容のハンバーガーメニューがありますが、上下とも再現する時は当時です。
再現方法は不明ですが、ブラウザを開いて該当URLを開き、ハンバーガーメニューを操作すると言う当たり前の手順の中で、1割程度の再現率かな？と思われます。
動画を撮りましたので添付可能であればこの後添付してみます。
iPhoneしか今は手元にないので、細かい事を書かずに投稿します。
とりあえず、今日9/10の18:46現在の最新版のcocoonです。
2020年9月10日 21:27
一応、不具合について補足しておきます。
position:fixedは通常ブラウザ(ページ全体)を基準に位置の設定がされますが、
祖先(親以上の)要素にtransformが設定されていると基準がその要素になります。
これはCSSの仕様だったと思います。
再現性が低いのは、スクロールイベントによってtransformが設定されるからで、
ページを開きスクロールをせずボタンを押すと表示されますが、一度スクロールしてしまうと以降は表示がおかしくなる、という状況かと思います。
先日の書き込みの時にサイドバーまで考えが及びませんでした…申し訳ないです。
わいひら reacted
2020年9月10日 21:55
とりあえず元に戻す事で了解です。
旧バージョンが提供される事も安心感の一つですね。
なかなか難しい課題、タッチバー問題は関わるとは、、、
それはそうとして、とりあえず敏速な対応は信頼感がありますね。
トピックスターター 2020年9月10日 22:10
自分で書き込んでおきながら、何だか高度な話が飛びかい、傍観するしかなさそうです。
今後、何かご対応がなされた時には、私もテスト・確認など、ご協力させていただければと思います。
（と言っても、macOS・iOS系の端末は持ってないですが。）
わいひら reacted
2020年9月11日 07:54
Cocoonバージョン: 2.2.3.3に戻しました。
当たり前ですが、iPhone11proでのホームバー問題も最初にリセットされてしまった状態です。
ホームバーとcocoonのメニュー干渉問題は、予想以上に難しい課題みたいなので長期戦なのでしょうか。
何か案が出た場合は、いつでもテスト要員として動きますので。
それと前に質問した事と重複ですが、アイコンサイズは大きくすると問題になるユーザーさんもいると言う事ですが、そこをサイズをユーザー側で選択可能にする作りは難しいでしょうか？
大と小とか選択可能にするとか。
アイコンサイズで対応では本来のやり方ではない場当たり対処だとは思うのですが、
老眼対策にもなると思うと、完全に無駄ではなく、純粋にアイコンサイズが選択できるのも良い気がしました。
素人が思う以上に、もしかしたらアイコンサイズも大事な話が沢山影に隠れている可能性を考えると、馬鹿馬鹿しい事を言っているのかも知れないのですが、その場合はお許しください。
2020年9月11日 13:54
CSSで、 env(safe-area-inset-bottom) を、margin-bottom で指定すると、モバイルボタンの下に隙間ができてしまうものの、位置が変わることはわかったと思うのですが、padding-bottom で代替値を指定した方法は、まだ、試していなかったような気がします。
以下のように指定すると、どうなるでしょうか？（ダメ元です）
.mobile-footer-menu-buttons {
padding-bottom: env(safe-area-inset-bottom, 50px);
}
なにぶん、6sしか持っていないので、自分では試せません。
この投稿は4年前 2回ずつリフィトリーに変更されました
わいひら reacted
2020年9月11日 15:45
リフィトリーさん、こんにちは
やってみます！ 少々お待ちください。
実のところ、複数のブログに対して、自分が何をやっているのかも分からなくなって来まして、
アドバイスを頂いた内容も整理が出来なくなってましたが、これをやってみるべきだと分かって良かったです。
2020年9月11日 15:49
@momochan さん
私はJavaScriptでの方法はよくわからないので、CSSで何とかなるものなら、試してみたい、というスタンスです。
スクロール時に全部隠れない、ということはあるみたいですが、とりあえず、ボタンが押せるようにならないかと・・
2020年9月11日 15:50
/*リフィトリーさんホームバー隠れる対策1*/
.mobile-footer-menu-buttons {
margin-bottom: env(safe-area-inset-bottom);
}
/*リフィトリーさんホームバー隠れる対策2*/
.mobile-footer-menu-buttons {
padding-bottom: env(safe-area-inset-bottom, 50px);
}
として、片方を機能停止する形で試した印象では、
対策１の方が対策２よりも良い感じです。
対策２にしてしまうと、画面を下から上へスクロールする途中で止まると添付写真のようにホームバーの影響でcocoonのボタンが押せないようです。
現在の試験は
2020年9月11日 15:54
対策１の方も写真を添付します。
/*リフィトリーさんホームバー隠れる対策1*/
.mobile-footer-menu-buttons {
margin-bottom: env(safe-area-inset-bottom);
}
こんな感じでスクロール途中で止めてもボタンが押せるので問題は無い感じです。
稼働中の
でテスト中ですが、このままで良い感じが。
2020年9月11日 15:56
対策１の場合は、スクロールが一番下まで来た時に
cocoonのメニューバーが上に少し浮き上がって変な気がするのですが、これは今は神経質になっているから気がついた程度なのかな？
と思えば無視しても良いような気もしてます。
どうなんでしょうねえ。
浮いた瞬間の写真を添付します。
2020年9月11日 18:25
momoさん動作確認のご協力ありがとうございます。
私も実機を持っていれば色々試せるのですが…もどかしい ?
一度、「本来の正常動作」について整理させてください。
momoさんが確認してくださったスクリーンショットはすべて「本来はモバイルボタン全体が隠れる」のが正常かと思います。
見分けるポイントは「ヘッダーモバイルボタンが隠れている時 ＝ フッターモバイルボタンは隠れる」です。
outerHeightの値が気になるので、
ホームボタンのないiPhoneをお持ちの方、よければこちらのページを表示した時のスクリーンショットいただけますでしょうか。
https://codepen.io/kusamura_mono/full/abNGzPW
ちなみにiPhone8だと添付のようになります。
わいひら reacted
2020年9月11日 18:49
リフィトリーさん、こんばんは
そうなのですね。
私はメニューが押せれば嬉しいとしか観ておらず、本来の正常動作か否かの視点は無かったみたいです。
私にはスクリーンショット撮るしか出来ませんが、こんな事で皆様のお役に立てれば嬉しいことです。
2020年9月11日 18:54
momoさんありがとうございます。
box3の横に数字がないですが、リロードしてみたら表示されますか？
2020年9月11日 19:00
ご確認ありがとうございます。
私はメールの画面から該当リンクを直接クリックしたので変だったようです。
一度、フォーラムに来てから、リンクをクリックしたら違いました。
再度添付します。
草村 reacted
2020年9月11日 19:56
momoさん本当にありがとうございます！
（ここからちょっと独り言的な内容です）
https://codepen.io/kusamura_mono/full/dyMeoxB
すべてのboxにmin-height:50px;
box1はpagging-bottom:0;
box2はpadding-bottom:20px.
box3はpadding-bottom: env(safe-area-inset-bottom);
をCSSで指定しています。表示されている数字(50・70等)はouterHeightの値です。
こちらのスクショでは（Chromeかな？）paddingが反映していますが
こちら(Safari)の方ではpaddingが反映していませんね。
outerHeightの値がモバイルボタンの高さより小さいから隠れないのかと思ったのですが値自体は正しそう…？
Safariはブラウザ下部の戻る進む等のボタンの有無で、env(safe-area-inset-bottom)の値が変わるのだろうか。
だとしたら以前のトピックではるさんが書き込まれてた方法で対処できるかも？(少し変更しています/IE11は動かない気がする)
footerMenu.css("bottom","calc( -1 * (env(safe-area-inset-bottom) + " + footerHeight + "px) )")
あとは、わいひらさんの修正方針が気になります。
はる reacted
2020年9月11日 20:22
あとは、わいひらさんの修正方針が気になります。
僕も、不具合環境がないので可能性のありそうなものを適用して試してもらうしかなさそうです ?
とりあえず、草村さんが書かれたコードを適用してみました。
https://github.com/yhira/cocoon/commit/e5981f7b037098a061126e3212ef35b6efff030d
よろしければ、以下からダウンロードしてアップロードし試してみていただいてよろしいでしょうか。
https://github.com/yhira/cocoon
2020年9月11日 20:24
草村さんの次に書き込んだつもりが、書いてる間に書き込みがが ?
独り言の中で、理解出来る所だけやって見ました。
なんか、良さげな雰囲気です。
の動作が今までで1番良さそうな気がします。
草村さんが書かれたJavaScriptの修正方法で、問題なく動作する感じでしょうか？
ボタン動作なども大丈夫でしょうか？
momo reacted
2020年9月11日 20:30
@yhiraさん、そうなんです。
親テーマのJavaScriptに書き込んで良い感じなんです。
今までビビって親テーマに触れなかったのですが、ボタン動作も大丈夫だと思います。
2020年9月11日 20:39
@yhira様
今、アップロード中です。
例によって、夜間はエックスサーバーが遅い感じで、FTPもう少しかかりそうです。
2020年9月11日 20:50
やっとFTP終了するも、何かをミスしたらしくHPそのものが表示不能になりました。
再度、ダウンロードしたファイルを展開して、再アップロードしてます。
2020年9月11日 21:03
二度目のFTPもダメでした。
page.phpの十行目にエラーみたいな表示ですが、私には理解不能なので約１時間前のバックアップに戻し中です。
稼働中の業務サイトでいきなり実験したのが大失敗でした(笑)
今後は実験サイトを利用したいと思います。
2020年9月11日 21:07
混雑の雰囲気の時間帯に数千ファイルをFTPするのは危険なのかもしれないですね。
それでpage.phpが半端にアップロードでもされたのでしょうか？
とりあえず、１時間前の状態に全体を復元作業が終了しました。
これで親テーマのJavaScriptに書き込んだ状態まで直りました。
ちなみに、ここまでの実験は
稼働中サイトで
です。
明日からは実験用のサイトで実験したいと思います。先を焦りすぎましたし油断でした。
この投稿は4年前ずつmomoに変更されました
2020年9月11日 21:14
今、実験用サイトに、上記の状態でサイトごとコピーしようと試みたのですが、
日中であれば数分でファイル転送できそうな事が、表示時間で１時間以上待たされるようです。
これでは、途中で何かエラーがあっても不思議では無い感じがするので、この先の作業は夜明けまで無理そうです。
最近、昔以上にエックスサーバーの夜間の動きが重くて大変です。あるいは私の使っているドコモ光が重いのか？分からないのですが。
とりあえず、ファイル転送が重すぎて本日の実験が終了せざるおえない報告でした。
2020年9月11日 21:18
今日の作業は終了ですが、私の環境では
以下の実験が成功したように感じてます。
私よりもWordPressに知識のある方でiPhoneX以降のホームバー搭載機種をご利用の方のご確認も欲しいところですが。
ちょっと私のチェック能力は低そうなので完璧ですとか言うのが不安なので(笑)。
ーーーー草村さん投稿よりーーー
だとしたら以前のトピックではるさんが書き込まれてた方法で対処できるかも？(少し変更しています/IE11は動かない気がする)
footerMenu.css("bottom","calc( -1 * (env(safe-area-inset-bottom) + " + footerHeight + "px) )")
ーーーーー草村さん投稿引用以上です
草村 reacted
2020年9月11日 22:03
動作の様子を録画してみました。iPhoneX iOS13.6 Safariです。
スクロール時にフッターがちゃんと隠れることと、メニューやサイドバーの表示は問題ないようです…！
動画はmomoさんのサイトをお借りしましたが、自サイトに適用しても問題なく動作することを確認済みです。
多分これで大丈夫そう…！？
footerMenu.css("bottom","calc( -1 * (env(safe-area-inset-bottom) + " + footerHeight + "px) )")
マイナスにしたい時は-1を掛ければ良かったのですね。
私の元のコードはfooterHeightをマイナスにしてたりグダグダでしたね。
草村さんのテストサイトも見てみましたが、momoさんの2枚目のスクショと同様でした。
なんでbox3でセーフエリア分高くならないのか不思議ですね。
2020年9月12日 00:18
momoさん、はるさん動作確認ありがとうございます！
仰る通り戻る進むボタンの有無で値が変わってるっぽいです。
でもouterHeightの値は50のまま変わらずでした…。
おかげで原因がわかったかもです。
このテストでは「ページを表示したタイミング」の1回しかouterHeightの値を取得していません(Cocoonのモバイルボタンも同じような状態)
最初の1回だけ高さを取得しても、safe-area-inset-bottomの値は状態によって変化して高さが変わるため、実際の高さと数値が一致しない。という感じです。
スクロール中ずっと高さを取得しつづけるのはパフォーマンス的によろしくなさそうなので、今回の対応で他の環境でも不具合なければ良いですね！
2020年9月12日 03:06
草村さん、春さん、後半、話が理解出来てませんでしたが、草村さんとはるさんの話から、確認作業が順調に進んでいる様子がわかりました。
これで新しいiPhone対策も完成間近ですね。
私も、わいひらさん提供の新しいcocoon-master.zipをアップロードしたサイトと、草村さん＆はるさん合作の？JavaScriptを親テーマで書き換え版の二種類を両方稼働させてみました。
わいひらさん提供cocoon-master.zipで上書きサイト
草村さん＆はるさん合作の？JavaScriptを親テーマで書き換え版
https://cocoon.momo-express.com/
どちらも同じ動作で大丈夫に思えます。
昨夜、９時ころに前者のわいひらさん対策版のテストがNGだったのは、やっぱり回線やサーバーが混雑で転送エラーか何かでファイルが壊れちゃっていたのかもしれませんね。
今、早朝三時はスムーズにFTP出来た為か？大丈夫でした。
わいひら reacted
2020年9月12日 03:08
@yhira様
昨夜の実験では妙なエラーで実験ならずでしたが、先ほどネットが空いている早朝3時になったらエラーもなくなって、実験は大成功に見えます。
私的には、この新しいcocoon親テーマで良い感じになってます。
わいひら reacted
2020年9月12日 03:09
動作の様子を録画してみました。iPhoneX iOS13.6 Safariです。
スクロール時にフッターがちゃんと隠れることと、メニューやサイドバーの表示は問題ないようです…！
動画はmomoさんのサイトをお借りしましたが、自サイトに適用しても問題なく動作することを確認済みです。
多分これで大丈夫そう…！？
footerMenu.css("bottom","calc( -1 * (env(safe-area-inset-bottom) + " + footerHeight + "px) )")マイナスにしたい時は-1を掛ければ良かったのですね。
私の元のコードはfooterHeightをマイナスにしてたりグダグダでしたね。
草村さんのテストサイトも見てみましたが、momoさんの2枚目のスクショと同様でした。
なんでbox3でセーフエリア分高くならないのか不思議ですね。
はるさんの確認があるとほっとします。
これで出口が見えたと言うか、完成した感じでしょうか？
2020年9月12日 03:12
@haruinoueさん、この辺りのお話し、私も草村さんへ、私も何か返信をしなければと思ったのですが、そろそろ頭が着いて行けなくなって、特にiPhoneで作業しているとブラウザが自動起動した時にSafariだったりChromeだったり、も含めて頭が混乱してスルーしてしまった状態でした。
はるさんのお陰で大事な話が進んだようで良かったです。
2020年9月12日 20:23
皆様、ご確認ありがとうございます。
動画もありがとうございます。
https://wp-cocoon.com/wp-content/uploads/wpforo/default_attachments/1599829498-footermenu2.mp4
草村さんと、はるさんにいたっては、解決方法までいただいて、感謝申し上げます。
とりあえず今回の変更で、いけそうな雰囲気なので次はこのスクリプトを適用してアップデートしようと思います。
ただ、また何かあるかもしれないのでこのトピックはクローズしないでオープンにしておこうと思います。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。