よろしければ、お手数ですが該当ページのURLもお願いいたします。
他のトピックにあるのかもしれませんが、このトピックしか見ない方もいると思うので。

@yhiraさま

失礼致しました。

その様な配慮も必要ですね。

こちらのテスト中サイトでのお話となります。

https://cocoon.momo-express.com/

補足ですが、どうやっても押せないのでは無く、上下にスクロール調整して、まれに押せるタイミング（横棒と重ならないで表示される場合もある）を見つけることが可能です。

でも、それは調整が非常に難しいので現実問題としてはモバイル時の画面下の真ん中のボタンは操作不能なようでした。

パソコンのエミュレーターでは、そういった状態にはならないようです。
ただ僕はiPhoneを持っていないので、ちょっとこればっかりはiPhoneを持っている人でないと分からないかもしれません。

わいひら様

コメントありがとうございます。

頂いたパソコンのエミュレーター画面を拝見すると、物理的なホームボタンがあるiPhoneが前提になっているようです。

今現在のiPhoneの多くは、既に物理的なホームボタンが無くなって（物理ボタンの故障が多いらしい）

私の添付画像のような、のペットした液晶だけで出来ているiPhoneに三世代くらい前から変化しております。

徐々に、私と同じ状況のiPhoneユーザーが増えてくると思われます。

ホームボタンが物理的なボタンとしては無い状態で、代わりに横棒の液晶上の表示になっているので

それがフッターエリアのボタンエリアと重なってしまうようですね。

どうすれば直るのか。。。

フッターボタンを使わないようにすれば良いのですが、それも勿体ないですし、どなたか

iPhoneX以降の物理的なホームボタンがないiPhoneをお使いで、達人ユーザーさんがいたら

作者様に何か情報をいただけたら嬉しいです。

私にはバーチャルなボタン同士が干渉して使えないことしかお伝えしようがなく。

iPhoneX iOS13.6 Safariで動画撮ってみました。
フォーラムでは動画はどう表示されるのでしょう…。

下にスクロールしている最中に下のバーと重なります。
上に少しスクロールすると戻ってきます。

重なった状態でモバイルメニューを押そうとしたのが動画の4秒ぐらいのとこです。
Safariのメニューの方が出てきて押せませんでした。

補足ですが、どうやっても押せないのでは無く、上下にスクロール調整して、まれに押せるタイミング（横棒と重ならないで表示される場合もある）を見つけることが可能です。

上に少しスクロールすると表示されるので押せるかなと思います。

あとはCocoon設定>モバイル設定>モバイルボタンの固定表示にチェックを入れると、スクロールしても隠れなくなります。

本来の挙動としては、下にスクロールした時はバーに重ならずに、完全に画面外に消えていなければいけないのかなと思いました。

バーの領域はブラウザ領域でない判定なのでしょうか…。

現在はスクロール時に-50pxされるようになっていますが、もっと下にして完全に見えなくして良いのかも知れません。

はるさん、誠にありがとうございます。

そうなんです。

正に、この感じで困ってました。

画面下のモバイルボタンが完全に押せない訳では無いけど、操作を工夫してやっと押せる難しさなので、かなりストレスな感じです。

訪問してくれた人に面倒くさいなあ。

と悪い気分を感じさせてしまうと新規の顧客になるかも知れない人を離れさせてしまう要素になったら損だなあと気にしてます。

今はまだ実験段階のサイトなので大丈夫です。

Cocoonの親テーマのCSSには、既に以下の記述があるみたいですが・・

.mobile-footer-menu-buttons {
   padding-bottom: constant(safe-area-inset-bottom);
   padding-bottom: env(safe-area-inset-bottom);
}

これだけだと、上手くいかないのかな・・・

以下のような記事を見つけましたが、果たしてCSSだけで上手くいくのかどうか・・

それともJavaScript等で制御しないといけないのか・・

【iPhoneX・iPhone11】固定フッターのセーフエリア対応

はるさんの動画を見てみると、私の６sとは、表示や挙動が異なるような気がします。

Cocoonのサイトや他のCocoonを使ったサイトでも同様の表示になるのでしょうか？

私のiphone6sでは、検証できないので、何の役にも立たず、です。 ? 

リフィトリーさん

情報ありがとうございます。

何でなのか、私のiPhone11proでは、その記述ではダメみたいなのです。

その記述の内容は全く理解してないのですが、効果がありそうな記述なんでしょうけど。残念です。

ちなみに私のサイトの単独問題では無いらしく

https://wp-cocoon.com/manual/

を開いても、私のiPhoneでは同じく、下の真ん中付近のcocoonで出すボタンは、iPhoneのホームボタンの替わりとなる横棒で重ねられてしまってます。

momoさんと同様の補足ですが、特定のサイトだけでなくフォーラムを開いても下スクロール時はメニューが完全には隠れません。

6sでは再現しないということで、やはりホームバー付きの機種特有の問題だと思います。

はるさん、いつもフォローありがとうございます。

あの横棒はホームバーと言うのですね。

ホームバー機種に特有の問題とすると、今現在はユーザー比率がまだ主流にはなってないと

思いますが、この先の機種もホームバーだとしたら徐々に多数派になってくると思います。

私はこの機種にして初めてホームバー搭載機種でした。

既に半年以上もホームバーを使っておりますが、未だに慣れ切れず

従来の物理的ホームボタンが懐かしいです。

と愚痴を言ってもこの先はホームバーが主流になるのでしょうから

慣れるしかありませんけど。

今回の問題、iPhone X以降の機種だと使いにくくなると言う状況のようですが、

やっぱり可能であればcocoonの使いやすさが、邪魔されるのは勿体ないです。

改善されたら嬉しいです。←わいひら様　ご検討くださいませ。

ホームバーが問題を作り出したのですし、ホームバーは良いとも思えない仕組みですが、

アップルが撤回して昔のボタンに戻すとも思えないので、この先の普及を見据えたら

ホームバーにも対応した方が、それがコーポレートサイトに限らず、ブログであっても

訪問してくれるユーザーに良いと思うのです。

更に参考ですが、他のテーマでホームバーとの干渉はどう対策しているのか？

確認してみました。

素人目に見て、単に、モバイルボタンが少し大きめで、ホームバーより上までボタン領域になってて問題無く押せる感じです。

これは他のテーマはモバイルバーに対応した結果か？

たまたま、モバイルボタンが少し大きいからセーフだったのか？

わかりませんが、ホームバーは問題になりませんでした。

投稿者:: @momo

素人目に見て、単に、モバイルボタンが少し大きめで、ホームバーより上までボタン領域になってて問題無く押せる感じです。

この状態のスクリーンショットをいただけますでしょうか。
手元に動作環境がないので、テキストだけだとなんとも。

おそらく、以下のどれかを行えば良いのかもしれませんが、前回も書きましたが動作環境がないので、僕自身は対応させたくても確認できない感じです。
https://qiita.com/kanakana0330@github/items/6ae264b9da00c326ab1d

わいひら様

写真撮りました。

ホームバーとモバイルメニューが重なる瞬間を撮影した物です。

cocoonと他社テーマで同じタイミングでの撮影です。

参考になると良いのですが。

他にも私のiPhoneでご協力可能なことはさせて頂きますので。

対応しようとして頂いてありがとうございます。

画像ありがとうございます。他テーマの状態がわかりました。
対応されているというよりは、やっぱり「ボタンが大きいので押せる」ということみたいですね。
ただ、Cocoonでアイコンサイズ変更すると、現在の大きさ込みで設定した方の表示がずれてしまうので、その方法は使えそうにないかもしれません。

なので、このトピックが目立つように、しばらくトップに固定しておこうと思います。
動作環境持っている方で、「こうしたら改善されたよ」という方がおられたら、書き込めるように。

単に大きくする案は、採用難しい件、あちらを立てればこちらが立たず、難しい問題でしたか。

解決策が出るまで、自分なりにモバイルメニューは廃止するか？考えてみます。

もし仮に、JavaScriptは使わず、CSSだけで解決できる可能性もある、と仮定すれば、iphone X等のホームインジケーターが表示される実機を持っていらっしゃる方なら、ご自身のテストサイトなどで、CSSを書いてテストしてみることはできるかと思います。

この方は、paddingは効かないがmarginなら効くと書いていらっしゃいます。

iPhoneのバーが邪魔！対策を教えてほしい..

この方は、固定フッターの高さとボタンのline-hightを指定す方法を書いていらっしやいます。

固定フッターのiPhoneX対応

env(safe-area-inset-bottom)をpadding-bottomで指定しても効かないのなら、以下のように高さを指定してみるとどうなるのか・・・

.mobile-footer-menu-buttons {
   height: calc(50px + env(safe-area-inset-bottom));
}

実機とCocoonを使ったサイトも持っている方なら、試すのは簡単で、子テーマのCSSか追加CSSにコードをコピペして、ファイルを上書き保存するだけです。

ダメで元々なので、お暇なときにでも、やってみてください。

リフィトリーさん

情報ありがとうございます。

子テーマのcssに追加してみました。

ほんの少し良い方向に、ホームバーが前ほどは邪魔に見えなくなりました。

が、まだ、cocoonのボタンは反応出来ないようでした。

css追加の前後の画面を添付します。

右側は対処後で少しだけバーからボタンが上に出てきました。

ちなみに実験サイトは

https://cocoon.momo-express.com/

です。

@momo さん

なかなか難しいですね。

env(safe-area-inset-bottom)の値が取得できているのか、それとも50pxの値だけが何らかの形で効いたのか・・

 
ちなみに、本当に なんの根拠もないのですが、50pxの値を100pxとかに増やすと、もう少し上に上がってくるのでしょうか？

.mobile-footer-menu-buttons {
   height: calc(100px + env(safe-area-inset-bottom));
}

単なる、当てずっぽうです。

リフィトリーさん

100pxに変更して見ました。

何と、逆に元に戻ってしまった感じです。

何かキャッシュとかで変なことになったのか？

もう少し時間を開けてチェックしますが、この件は、なかなか簡単には行きませんね。
無料テーマであるcocoonなので、最新機種をどんどん試験用に導入って事も出来無いと
思うので仕方ないところですね。

今回の私のcocoon実験サイトは、コーポーレートサイトにcocoon使いたくての実験でしたが
cocoonの魅力が高速性やモバイル時の使いやすいメニューなど多かったのですが断念です。

仕事に絡むだけに、流石にiPhoneX以降、iPhoneXs,iPhone11まで三世代を見切る訳にも
行か無いので、コーポレートサイトのテーマの乗り換えは断念して、フッターメニューを
出さ無いでも良いまたは、多少の事は気にし無いで見てくれそうな趣味のブログにだけ
cocoonを導入したいと思います。

誤字脱字が多い私が言うと信憑性が無いのですが、私の誤字脱字の多い業務サイトを見た
知り合いに言われたのは、誤字脱字は会社の業務品質の信用を落とすとのことでした。
同様にここ数世代の機種に対応が遅れている状態のコーポレートサイトに見えると
同じような事を思われてしまう可能性を気にしてしまいました。

別段、あの状態のメニューでも押せ無い訳では無いので、そこまで気にする必要は無い
のかも知れません。

cocoonは、有料テーマでも出来無いほどの超高速な動作、AMP対応に既になっているなど
むしろ素晴らしい点が多いのに、とりあえず、今回のところは趣味のブログにだけcocoonで
お世話になりたいと思います。

あとは細かい事を気にせず、楽しくcocoonを利用させて頂きますね。

リフィトリーさん、わいひらさん、この先もお世話になります。

@momo さん

実機を持っていない以上は、持っていらっしゃる方からの情報を頼る以外に方法がないと思われます。

ちなみに、padding-bottomでは、env(safe-area-inset-bottom)を指定しても反応がないみたいですが、

margin-bottomにすると上の方に表示されますでしょうか？

.mobile-footer-menu-buttons {
   margin-bottom: env(safe-area-inset-bottom);
}

リフィトリーさん

根気強く、ご対応頂けることに感謝と、驚いてます。

作者様すら諦めつつあると思ったので正直絶望してました。

今回の実験は概ね成功だと思います。

もしかしたら大成功なのかも知れません。

写真を添付します。

左右の写真はどちらも対策後の状態ですが、上下のスクロールした時に、見え方が変わる瞬間を撮影しました。

右の写真だと大成功な感じがします。

左の写真だとスクロール状態によっては、cocoonの出すフッターメニューが下から離れて上に浮き上がるので多少の違和感があるのと、コンテンツの見た目の邪魔になっています。

ただ、この場合はいつも左の画像になるのではなく、時々そうなっているだけなので、実験前のボタンが押せ無い問題に比較したら無視できる程度に向上したと思います。

これだとコーポレートサイトに導入しても、例の細かい知人から指摘を受ける事も無いかも知れません。

またまた嬉しい悩みが出てきました。

ただ、私は本当のところWordPressのど素人で、このメニューバーが下から浮き上がる状況が他に問題を含むのか、気にしなければ大成功なのか？ちょっとわからなかったりします。

長々と書いたから肝心な事を明確に出来て無いと思いましたので補足します。

ボタンが押せ無い問題は完全に回避されました。

なので、これで大成功として終了しても大丈夫な気がします。

下から浮き上がるのは、何らかの見た目の派手さを狙ったと思えなくも無いし。

もし、このメニューバーが下から離れて浮き上がる事が、何かの問題を引き起こす可能性があるとしたら？

その場合の書き込みなのですが。。。

アイコンサイズを他社テーマのように大きくする事で、既存ユーザーに弊害があるかも知れ無いと言う作者様のお話は理解したのですが、このアイコンサイズをユーザーが選択可能にするのは難しいのでしょうか？

大、中、小とかユーザーが好みで選択可能だったら、今回の問題も回避されるし、老眼ユーザーが多いサイトには大きなアイコンとか、アイコンの個数が多く設置したいユーザーは細かいアイコンにするとか便利かも？

と思ったり。

でも、今回の問題は、もしリフィトリーさんにご対応頂いた方式で、問題がなさそうでしたら、私としては、この対策で大満足です。

@momo　さん

momoさんのご協力でenv(safe-area-inset-bottom) が何らかの値を取得しているらしいことがわかりました。

まだ、十分とは言えない状態のようですが、一歩前進したかもしれません。

幸いなことに、私の iphone6s には、何ら影響がありません。

ちょっと小用で、外します。

9月4日の書き込みの通り、

投稿者:: @haruinoue

本来の挙動としては、下にスクロールした時はバーに重ならずに、完全に画面外に消えていなければいけないのかなと思いました。

と思うので、現在行われている「中途半端に表示されている状態」から「全体が表示されるようにする」方向の修正は間違いでないかと思います。

「全体が表示されるようにする」のが目的であれば

投稿者:: @haruinoue

あとはCocoon設定>モバイル設定>モバイルボタンの固定表示にチェックを入れると、スクロールしても隠れなくなります。

で良いと思います。

固定表示されないように設定しているのなら、スクロールした際には完全に隠れるのが正しい挙動だと思います。

色々試してみて、javascript.jsの

https://github.com/yhira/cocoon/blob/master/javascript.js#L106

 footerMenu.css("bottom", "-" + footerHeight + "px");

を

footerMenu.css("bottom","-"+footerHeight+"+env(safe-area-inset-bottom)px")

に書き換えることで私の環境(iPhoneX iOS13.6 Safari)ではスクロール時に完全に隠れるようになりました。

ただ数値とenv(safe-area-inset-bottom)を足し算してpxを付ける書き方が正しいのかどうか分からないのでこの点調整が必要かも知れません…。

はるさん、お知らせありがとうございます。

スクロール時は完全に隠れてしまう方が希望です。

ボタンを押す場面以外では、画面は広くしてコンテンツを見易く表示させたいのです。

それで、はるさんの実験も真似てみたいのですが、

子テーマで

footerMenu.css("bottom","-"+footerHeight+"+env(safe-area-inset-bottom)px")

を

子テーマのjavascript.js

に一行書くので良いのでしょうか？

今のところ私の子テーマのjavascriptは空っぽなのです。

もしかして、これは親テーマで書き換えでしょうか？

こんな質問する時点で危険な作業なのか？と思ったりして。

先程のコード、消えるは消えるのですがアニメーションせずパッと消えてしまうので開発者ツールで確かめてみたら遥か下の方まで消し飛んでいました…。

env(safe-area-inset-bottom)の仕様をイマイチ理解できていないかも知れません。

あとcalcを使うのが正しい気がしてきました。

footerMenu.css("bottom","calc(env(safe-area-inset-bottom)-"+footerHeight+"px)")

はるさん、すでに私の理解を超えてまして、何が何だか分からない状態です。

とりあえず、javascript.jsを触るのは一旦やめておきますね。

書き込み被ってしまいました。

投稿者:: @momo

もしかして、これは親テーマで書き換えでしょうか？

親テーマの書き換えです。

wp-content/themes/cocoon-masterの中にあるjavascript.jsというファイルを開いて、
106行目の

footerMenu.css("bottom","-"+footerHeight+"px");

を

footerMenu.css("bottom","calc(env(safe-area-inset-bottom)-"+footerHeight+"px)")

に書き換えます。

phpファイルではないので、間違った作業をしてもサイトが開けなくなるほど危険なものではありません。

分からなくなったら https://github.com/yhira/cocoon/blob/master/javascript.js の内容をコピペすれば元に戻ります。

はるさん、やはり親テーマでしたか。

結構、ビビっていてまだ試してません(笑)

見えないところまですっ飛んでいたと言うのが怖いような気がして。

それでも子テーマを導入したり、今回のcocoonの色々は勉強になってます

こんにちは。

スクロールした時に隠れる動作をtransformで制御する方法に変えるとどうなるでしょうか。

私は実機を持っていないのでよければ確認できる方お試しいただけると助かります。
確認の際は、追加したCSS（margin-bottom: env(safe-area-inset-bottom);等）があれば削除してからお試しください。

＜確認方法＞

1. 「Cocoon設定＞モバイル」へ移動
   「モバイルボタンの固定表示」に☑チェックを入れて固定表示にする
   
2. 以下のコードを子テーマのjavascript.jsに追加して保存
   https://notepad.pw/share/0v0vevq2t

※すみませんシェア用じゃなく編集用のアドレス掲載してしまったので修正しました(21:29)

はるさんへ

まだ、最後のアドバイスを試さないでおります。

リフィトリーさんのアドバイスを盛り込んだ状態に、この最後のはるさんの方式を盛り込んで良いのか？

別々にしないと変な事になるのか？とかまったく分からないレベルなのです。

もしかしたら、やってみないと分からない事なのかも知れませんが、聞いてみたら回答が出る事かも？

と、

すでに本格稼動中サイトにcocoonを使い始めた事もあり、無防備に実感する前に質問させて頂きました。

何度もお手数おかけします。

すみません。早速、ミスりました。

無防備に実感する前に質問させて頂きました。

では無く

無防備に実験する前に質問させて頂きました。

でした。

@草村さん

さすがです！問題なく動作しました！

私の環境ではこの方法で解決で良さそうです。

@ももさん

リフィトリーさんのと私のを追加していたら削除した上で、草村さんの方法を試していただくのが良いと思います。

こちらなら親テーマをいじらないので安心です。

リフィトリーさん、はるさん、草村さん、本当にありがとうございます。
草村さんの方法で、momoさんの環境が改善されるのであれば、そのコードを親テーマの方にも適用したいと思います。

草村さん、おはようございます。

パーフェクトでした！

モバイルメニューが下から浮き上がり過ぎることもなく、それでいてcocoonのメニューがホームバーで邪魔される事もないです。

iPhone11Pro上で完璧にcocoonのモバイルメニューが動きました。

リフィトリーさん、はるさん、草村さん、わいひらさん、皆さんご対応ありがとうございます。

それにしても、こちらは無料テーマに対して、しかも無料サポートなのに、敏速に協力体制があってすごいですね。

しかも、私だけがレベルが全く噛み合って無いのですが、皆様穏やかにお相手頂きましてありがとうございます。

これで本件は無事にハッピーエンドですね！

一応、対応版を以下にアップしておきました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
よろしければ、正常動作状態のスクリーンショットを一枚貼っておいていただければ幸いです。

わいひら様へ

早速、ありがとうございます。

別スレッドには書いたのですが、私は自力のカスタマイズは当面難しいレベルだと感じたのでコーポレートサイトに cocoonは一度断念します。

アップデート内容は、私のしつこい要望だったので、この決断は大変申し訳ないのですが、でも、 cocoonのユーザーのみならず、 cocoonで作成されたブログを訪問するiPhoneX以降のユーザーの恩恵にはなると思うので、コーポレートサイトへの導入を断念することをお許しください。

趣味のブログでは今後も利用させて頂きます（カスタマイズなしで）。

スクリーンショットは、後ほど準備します。

まずは、ビジネスサイトがGoogleでインデックスが更新され無いうちの、元への戻し処理を急ぐので。しばしお待ちください。

わいひら様

現在、FTPアップロード中ですが、時間帯として混雑なのか？遅々として進まないのでお時間がかかりそうです。

わいひら様へ

対策版ファイルをFTPした後のiPhone11Proでのスクリーンショットを添付します。

いろいろな瞬間全てにおいて大丈夫でした。

メニューが隠れるべき時は完全に消える。出るべき時はボタンが押せるようになっている。

数分の実験ですが大丈夫だろうと思います。

少なくとも、このくらい大丈夫なら仮に何かの瞬間に再発するケースがあっても気にする人はいないと思いますし。

皆様のご協力でiPhoneX以降のユーザーが気持ちよく cocoonで作成されたブログを閲覧可能になったはずです。

そして間も無く発表されるiPhone12も当然ながらホームバー搭載だと思うので、ますます本件の需要は高くなると思いますので。

ご確認ありがとうございます。
また修正後の状態も確認させていただきありがとうございます。