特典機能について

フッターに配置したロゴとCopyrightが見切れる | Cocoonテーマに関する質問 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

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

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

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

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

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

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
フッターに配置したロゴとCopyrig...
 
共有:
通知
すべてクリア

[解決済] フッターに配置したロゴとCopyrightが見切れる


pintai
(@pintai)
Active Member
結合: 1年前
投稿: 15
Topic starter  

スマホ時にフッターにロゴとフッターモバイルボタンが表示されます。
私は、Androidを使用しているのですが、この状態で、フッターまでスクロールすると、フッターモバイルボタンは消え(という表現がただしいのか・・)、ロゴとCopyrightが見えています。
ワタシ的には、OKです。
ただ、今日、友達から指摘(iPhone8)されたのは、上記と同じようにフッター下までスクロールした時、固定ナビが消えずにそのまま表示されているため、ロゴ下半分とCopyrightがフッターモバイルボタンの下に隠れたようになっています。
これを、Androidの表示のようにできるでしょうか。

※スキンでダークエンジを使用させていただいています。

もしかして、私だけの減少でしょうか・・。


投票2020
(@tohyo2020)
投票サイトサイト Moderator
結合: 2年前
投稿: 136
 

pintaiさん

不具合・カスタマイズ対象ページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

このページ上部の注意書きがないと誰も何をどう判断して良いものかわからないと思います。
何かしらの情報を書き込んでください。


わいひら 件のいいね!
pooh
(@pooh)
Eminent Member
結合: 3年前
投稿: 22
 

こんにちは。私も同じ状況です。iPhone実機でもSimulatorでも再現しましたので動画にしてみました。

https://youtu.be/mo50vZbvRDI

下にスクロールするとフッターモバイルボタンは消えますが、一番下まで行くとまた表示されるのでCopyright部分が隠れてしまいます。スクロールしている途中には見えるので特に不都合を感じていませんでしたが、ロゴマークがある場合は気になるかもしれませんね。


さる子
(@saruko)
メンバーサイト Moderator
結合: 2年前
投稿: 482
さる子 - Twitter
 

「Androidと同じ表示」にはなりませんが、こちらのCSSでコピーライトの下に余白が追加できます。コピーライトがモバイルボタンで隠れることは回避できます。

.footer-bottom-content .copyright{
  margin-bottom: 50px;
}

数値はパソコン・モバイルの表示を見つつ、好み数値に変更してください。

 

iPhoneとAndroidを同様の挙動にできるかは、ちょっと私では分かりません。こちらは詳しい方の書き込みをお待ちください。

ただiPhoneは独特な挙動が多いので、Android同様の動作は難しい可能性もあります。その場合はCSSで対応していただくことになると思います。


わいひら 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3476
 

iPhoneの他のブラウザでは、どういう挙動になるのか、お試しいただきたいです。

ブラウザ固有の挙動の可能性もあると思います。


わいひら 件のいいね!
pintai
(@pintai)
Active Member
結合: 1年前
投稿: 15
Topic starter  

pooh さん、動画アップまで行っていただきありがとうございます。
昨日は、見た画面はこの動きです。

さる子 さん、ありがとうございます。
iPhoneだといい具合です。
Androidだとロゴの下がちょっとスペースができます。

mk2 さん、ありがとうございます。
先程、iPhone8の中古を買ってきて動作確認をしましたが、Google ChromeやOperaでも同じような動作でした。

投票2020さん、環境情報は下記になります。
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.7.1
カテゴリ数:5
タグ数:3
ユーザー数:1
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
SiteGuard WP Plugin 1.6.0
WP Multibyte Patch 2.9
----------------------------------------------

 

Cocoon使用例のような紹介ページがございましたが、こちらに掲載されていますサイトは、同じような現象がでるようでした。

https://funfunjp.com/cocoon-site-design

copyright部分は、なるべく隠れないようにしたいな・・とは思ったもので、ご迷惑をかけてしまったようですみません。

This post was modified 7か月前 by pintai

mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3476
 
投稿者:: @pintai

先程、iPhone8の中古を買ってきて動作確認をしましたが、Google ChromeやOperaでも同じような動作でした。

ということは、iPhone固有のものかもしれませんね。

poohさんの動画を拝見した感じでは、上に引っ張った後、「戻る」動きをしているように見えます。

戻ってしまうので、モバイルフッターメニューが表示されるのだと思います。

私のAndroidでは、上に引っ張っても「戻る」という動きはしないです。
そのため、モバイルフッターメニューは表示されないのだと思います。

Androidでも、1番下まで移動して、指でほんの少しだけ下へ動かすとモバイルフッターメニューが表示されます。
この動きを、iPhoneは自然にしてしまっているのだと思います。

さる子さんご提示のように、余白を作るしかなさそうには思いますが・・・。


わいひら 件のいいね!
pintai
(@pintai)
Active Member
結合: 1年前
投稿: 15
Topic starter  

mk2 さん、ありがとうございます。

昨日からGoogleにて検索しまくっているのですが、下記のようなページを見つけました。

https://newsite-make.com/reflection-coping/

safariでのcssが効かない時の対処はこうする と記載してあるところがあって、逆に考えると、safariだけの設定?になるのかと思って、さる子さんのご回答を元に、下記のようにしてみました。

_-webkit-full-screen-document, .footer-bottom-content .copyright{
margin-bottom: 50px;
}

上記の書き方が、見様見真似で正しいのかどうかも分からないのですが、iPhone(safari)は上記が反映され、Androidスマホでは反映されていないようでした。
ただ、iPHONE(Opera)でみた場合、同様に、イメージ通りになっていたので、safariだけの設定じゃないのか・・と、???です。

ちなみに私が使用しているAndroidスマホは、Pixel4a(5g)です。

This post was modified 7か月前 by pintai

わいひら 件のいいね!
pintai
(@pintai)
Active Member
結合: 1年前
投稿: 15
Topic starter  

すみません。

ソースでも、引用でも、CSSの情報がうまく記載できません・・・。

文字が、一部、欠落します。

This post was modified 7か月前 2回 by pintai

mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3476
 

pintaiさん

フォーラム上部に案内があります。

トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw

HTMLではありませんが、notepad.pwに貼り付ければ問題ないはずです。

 

もしくは、テキストエディタに貼り付けて、テキストファイルとして添付・アップしても大丈夫です。
ローテクは意外と最強です。
(閲覧する側は、ダウンロードして開いてと手間が少し増えますが。)


わいひら 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3476
 

ちなみに・・・。

pintaiさんがお書きになったものは、「CSSハック」と言われるものかと思います。

今も、これを使うのもなのか・・・と言われると、私には判断が付きません。

ブラウザ毎に対応を細かく指定していくということは、あまり歓迎されるものではないような気はします。

(そして、今回の話では、同じChromeでも、iPhoneとAndroidで挙動が違うという事に…?)

 

【ご参考】
css hacks 2020 ( IE11 / Edge / Chrome / Safari / Firefox )
https://qiita.com/feo52/items/b58de2c43e1ba7b10b2e

ブラウザ別のCSSハック
https://netamame.com/browser-css-hack/

 

Wikipediaには、以下のような記載もあります。
https://ja.wikipedia.org/wiki/CSS%E3%83%8F%E3%83%83%E3%82%AF

W3Cの標準仕様に従ったWebサイトを作成すれば、理想的には各ブラウザでの表示の差は生じない(あるいは少なくなる)ことになるが、実際にはブラウザによりCSSのサポートが異なり、また比較的サポートの遅れたブラウザが進んだブラウザに置き換わるまでには時間を要するため、表示の差異が生じる原因となる。特にIE5.5以前(IE6.0の互換モードなども含む)ではボックスモデルの解釈がW3C標準のものと異なり、widthプロパティの値にボーダーとパディングを含めていたことがこれらのブラウザが無視できないシェアを占めていた時期のWebサイト作成の障害の一つだった。解決法としてはブラウザ間での違いが目立たない値に指定する(例えばボックスモデルの問題はボーダーとパディングをともに0とする)などいくつかの方法が考えられるが、CSSハックはそうした実装の違いをCSSコーディングのテクニックで吸収する方法の一つである。

具体的には各ブラウザの実装状況やバグを逆手に取り、ブラウザによって異なる宣言を読み込ませることとなる。ハックの中には対象とするブラウザ以外にも効果を及ぼすものもあるため、そうしたブラウザ向けに正規の方法で値を指定し直す場合もある。CSSハックの定義は曖昧で、一部のブラウザのみが実装しているセレクタなどを単に使用しただけのものをCSSハックに含めるかは場合による。

ブラウザの置き換えは常に続いているため、あるブラウザを対象としたCSSハックはそのブラウザのシェア低下とともに意味が薄れることになるが、一方で別のブラウザを対象とした新たなCSSハックが生み出される可能性もある。またブラウザのバグを利用するものであるため、サイト作成時点では問題なく使用できたとしても、将来新しいブラウザがリリースされる際にバグが修正されることで古いブラウザ向けの宣言が制作者が意図に反して適用される可能性がある。実際にIE7のリリースによりそれ以前は通用していたCSSハックに問題が発生することとなった。CSSの記法として妥当(valid)でない(Validatorでinvalidと判定される)ものも存在する。こうした点から使用に関しては種々の議論がある。

 


わいひら 件のいいね!
pintai
(@pintai)
Active Member
結合: 1年前
投稿: 15
Topic starter  

これで大丈夫でしょうか。
ただ、大した情報ではございませんが・・。

https://notepad.pw/share/w1dtsz9lc

 


mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3476
 

pintaiさん

notepad.pwは大丈夫だと思います。

ご提示いただいたコードを、サーバーおよびローカルの両テスト環境に反映してみました。

Windows-Chrome
Android-Chrome

上記には反映されないようです。

が…。
逆にSafariへの反映確認は私にはできません。

WindowsやAndroidには、他のブラウザも入れてはいますが、今回は他のブラウザで確認はしておりません。

こういうコードは、全環境が整った方しかテストができないという点では、難しさを感じます。
また、ブラウザの仕様などが変わっていく中で、どう対応していくかという難しさもあると思います。
(個人的には、こういうコードはあまり歓迎しないです。)

 

個別にご対応をなさるのよろしいかと思います。
(あくまでも自己責任という事で。)

できることならば、他のOS・ブラウザでどういう挙動になるのか、ご確認なさっておくのがベストかと思います。
(バージョン違いで挙動が違うことも考えられますので。)

Safariにのみ反映されるということは、MacやiPadでは、フッターの高さが伸びているということだと思いますし。


わいひら 件のいいね!
pintai
(@pintai)
Active Member
結合: 1年前
投稿: 15
Topic starter  

mk2 さん、ありがとうございます。

余計なことをしてしまいしたね。
コード削除しておきました。

今回の私が書き込んだものは、ハック?というものなんですね。
ブラウザ毎の対応をしていくのは、良くないということで、勉強になりました。
推奨されれないということで、お手上げ状態ですが、今回のことで色々勉強になりました。

色々ご迷惑をおかけしてすみません。


pintai
(@pintai)
Active Member
結合: 1年前
投稿: 15
Topic starter  

ご返信いただきました他の皆様もありがとうございました。m(_ _)m


さる子
(@saruko)
メンバーサイト Moderator
結合: 2年前
投稿: 482
さる子 - Twitter
 

@pintai 

結論を出す前に、一応わいひらさんの返信を待ったほうがいいかと思います。もしかしたらCocoon側で修正できる可能性もあります。できない可能性もありますが…。


mk2 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3476
 

若干誤解があるようですので。

別に、削除が必要なコードではないかと思います。
いくつかリンクした通り、広く知られているもののようです。

「CSSハック」という言葉の印象が良くないのかもしれませんが。

私が歓迎されないと書いたのは、ブラウザ別に個別に対応していくのは、どうなのかと思ったものです。
そして、W3C標準でないというところも、難しさを感じたという事です。
(ブラウザ別という意味では、ベンダープレフィックスというものもありますが、それは先行実装という位置づけだったように思いますし。)

標準的でないということは、いつ仕様が変わるか分かりませんし、バージョン違いで対応が変わる可能性もあります。

それを、メンテナンスし続けていくのは大変だという印象を持ったという事です。
(正式なアナウンスもされずに変わったりしそうですし。)

W3C標準でも、仕様は変わりますが、その際にはアナウンスもありますし。

 

そんなこんなで、個別にご対応なさるのは問題ないのではないかと思います。
(ただ、何かの標準にはしづらいと思った次第です。)

 

この方法を使うのか、それとも他に方法があるのか・・・。
そういうところは、わいひらさんのご判断かと思います。

誤解を招いてしまったようですので、その部分は申し訳なく思います。


mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3476
 
投稿者:: @mk2_mk2

この方法を使うのか、それとも他に方法があるのか・・・。
そういうところは、わいひらさんのご判断かと思います。

上記は、Cocoonで対応する場合はということです。

(対応するしないや、する場合の方法など。何だか良い表現が見つからず、正しく表現できているのか分かりませんが・・・。)

個別にご対応なさるのは良いと思うんですよ。

念のため。


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 13481
わいひら - Facebookわいひら - Twitter
 
投稿者:: @pooh

こんにちは。私も同じ状況です。iPhone実機でもSimulatorでも再現しましたので動画にしてみました。

こちらのSimulatorというのはどういったものでしょうか。
僕はiPhoneを持っていないので、そのSimulatorというものがあるのでしたら、それで確認してみます。


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 13481
わいひら - Facebookわいひら - Twitter
 

できれば、不具合の出るiOSとSafariのバージョンも知りたいです。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

前略

私のiPhoneは未だ6sでiosのバージョンは15.0.2です。

safariのバージョンは604.1のようです。

 

私のiPhone6sでもpintaiさんご指摘の症状となっています。

また、同じiPhone6sのFirefoxブラウザでも同様の症状です。

 

あまりスマホで閲覧しないので、いつからこうなっていたかはわかりません。

 

もしかしたら、iPhone特有のスクロールバウンス(弾んで少し戻る)が影響しているのかもしれませんが、これを無効化する方法がわからないので、やはり、ハックを使って試してみました。

 

Cocoon設定の「アクセス解析・認証」タブの「フッター用コード」に下の画像のJavaScriptのコードを記入し、

(※NotePadでも上手く保存してくれないようです)

 

子テーマのCSSファイルに以下を記入してみました。

.iPhone #footer {
    padding-bottom: 50px;
}
This post was modified 7か月前 2回 by リフィトリー

わいひら 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3476
 
投稿者:: @leafytree

iPhone特有のスクロールバウンス

スクロールバウンスっていうんですね。
iPhoneユーザーではないので、初めてきました。

Chromeは、overscroll-behaviorプロパティを使用することで抑制できるようです。

https://developers.google.com/web/updates/2017/11/overscroll-behavior

https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior
(上記ではEdgeも対象外になっていますが、Can I useによると、今は対応しているっぽいです。)

ただ、肝心のSafariが対応していないようです。

 

「iNoBounce」というJavaScript(jQuery)プラグインもあるらしいですが・・・。
この辺りは良く分からないです、私の知識では。

 

これで解消するかも分からないです…。


わいひら 件のいいね!
Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1006
Akira - FacebookAkira - Twitter
 

バウンス効果が原因だと思います。

iPhone をお持ちの方で、以下をお試しいただける方はいらっしゃらないでしょうか。

親テーマの javascript.js の 110 行目の部分を…。

} else {

このように変更します。

} else if (footerCurrentPos - footerStartPos < -20) {

これで解決するでしょうか?

尚、上へのスクロール量が 20px 以上ないとフッターモバイルボタンが現れなくなります。20px は、AMP の同様の動作が 20px を採用しているので真似しました。


わいひらさる子 件のいいね!
pooh
(@pooh)
Eminent Member
結合: 3年前
投稿: 22
 
投稿者:: @akira

バウンス効果が原因だと思います。

iPhone をお持ちの方で、以下をお試しいただける方はいらっしゃらないでしょうか。

試してみたところ、一番下で弾んで戻ってもフッターモバイルボタンが現れなくなりました。
こちらで解決だと思います。

投稿者:: @yhira

こちらのSimulatorというのはどういったものでしょうか。

Simulatorは、Appleの開発環境Xcodeに含まれるツールで、macOS上でiPhoneやiPadの各機種をエミュレートしてiOSを動作させるものです。
Windowsマシンでは動作しないと思います。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@akira さん

ローカルのテストサイトでLocalのライブリンクでテストしてみました。

 

「-20」ですと、必要なスクロール量が多すぎて、フッターモバイルメニューが出てくるのが遅れてしまい、実用的ではないようです。

 

「-7」ですと、早くスクロールするとバウンドも大きくなり、フッターモバイルメニューが出てきてしまいます。

 

「-8」ですと、ギリギリなんとか出てこなくなるみたいです。

 

ただ、「-8」でも、フッターモバイルボタンが出てくる反応は少し遅くなるので、人によっては、反応が鈍くなったと感じる方もいるかもしれません。


わいひらさる子 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@akiraさん poohさん

「-8」でもかなり早くスクロールするとバウンドも多くなり、フッターモバイルメニューが出てきてしまいますが、通常のスクロール速度なら出てこないみたいです。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@mk2_mk2 さん

「overscroll-behaviorプロパティ」も一応試してみたのですが、やはり上手くいきません。

 

「iNoBounce」も少しだけ試してみたのですが、どうも上手くいきませんでした。使い方がわからないだけかもしれませんが、どなたかのツイートで、今は使えないような情報もありました。(正確なことはよくわかりません)

 

 


わいひらmk2 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

Akiraさんのコードで「-8」に設定してゆっくりスクロールしたとき


わいひらさる子 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

Akiraさんのコードで「-8」に設定してちょっと強めにスクロールしたとき


わいひらさる子 件のいいね!
pintai
(@pintai)
Active Member
結合: 1年前
投稿: 15
Topic starter  

こんなに書き込みがあるとは、ちょっとびっくりしております。
いろいろすみません。

結論から言いますと、私の場合・・になりますが、昨日記載いたしましたCSSハックで対応できています。

わいひらさんの体調がよくなりご判断をいただくまでの間は、このハックでいこう考えています。
こちらはmk2さんが書かれたように自己責任で・・ということで。

また、今回、私は気になったのでトピックに挙げたのですが、歴史のあるCocoonのフォーラムで、そもそもこちらに話題に上がっていない(iPhoneを使っていらっしゃるCocoon運営者もたくさんいると想定し・・)時点で、それほど重要なことでもないのではないかとも感じ、書き込むことでもなかったのか・・とちょっと恥ずかしくもあります。

ただ、ハックという存在があるのは、勉強になりました。
ブラウザー依存(特にIEという存在)というものがあって、標準仕様では対応できない不具合?に一時的に対応するものだと考えますので、本現象においては自己責任において使用したいと思います。

私がハック情報を削除したのは、有識者(私よりもこの分野に関し知識のある方)の方が望ましくないと言われている情報を載せ、Cocoonを使用していらっしゃるユーザーの方がこの情報をみて、運営していらっしゃるサイトに今後混乱を招くことがないようにと思ったからです。

あくまで自己責任なので。

この書き込み自体が、わいひらさんや書き込みいただきました方のお時間を強いいてしまったことをお詫びいたします。

ひとまず、私が購入したiPhoneの情報としまして下記に記載させていただきます。

機種:iPhone8
Ver:14.8.1
通信回線:Docomo

ブラウザー:safari(14.1.2)
検索エンジン設定:Google(デフォルト設定)


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@akira さん

私のサイトに「-8」で適用してみました。

Androidでは、どうでしょうか?

 

エイチttps://leafytree.info/


わいひら 件のいいね!
pooh
(@pooh)
Eminent Member
結合: 3年前
投稿: 22
 

@leafytreeさん

確かに-20だとページ下でバウンドしてもほとんど出てこなくなりますが、上に戻ったときになかなか出てこないですね。

-8くらいだと、自分の場合もページ下で出てきたり出てこなかったり微妙なところです。
操作する人やページの長さによってもどの程度の速度でスクロールするかは違ってきますから、最適値はこれ、とは決めにくいと思います。
自分は表示されても特に不都合はないので、-20よりは-8の方がありがたいです。

@pintaiさん

自分は気にしていませんでしたが、サイトの作りによっては気になる方もいらっしゃるのはわかります。
書き込まれたことで、皆さんが問題点を認識して改善に繋がるのは良いことだと思います。


Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1006
Akira - FacebookAkira - Twitter
 

>> pintai さん

pintai さんのご質問は、とても素晴らしいと思います。誰も気付いていなかった不具合が分かったのですから。

>> リフィトリーさん

私の感覚だと Android で違和感なく操作できます。鈍いとは思いませんでした。

リフィトリーさんのご意見を参考に、私であれば javascript.js の 104 行目から 112 行目をこのように変更します。

if (footerCurrentPos - footerStartPos > 20) {
  if(footerCurrentPos >= 100) {
    // footerMenu.css("bottom", "-" + footerHeight + "px");
    // footerMenu.css("bottom","-"+footerHeight+"+env(safe-area-inset-bottom)px");
    footerMenu.css("transform","translateY(calc(env(safe-area-inset-bottom) + " + footerHeight + "px))");
  }
} else if (footerCurrentPos - footerStartPos < -10) {
  footerMenu.css("transform", "translateY(0)");
}

変更点は 3 つあります。

① 下へのスクロール量が 20px 以上の時に、フッターモバイルボタンを隠す

② 上へのスクロール量が 10px 以上の時に、フッターモバイルボタンを再表示する

③ GPU アクセラレーションを効かせるために、bottom ではなくtransform: translateY() を使う(ブラウザの負荷を抑えられる上に、アニメーションがスムーズになる)

スクロールでの表示・再表示をする場合は、スクロール量に余裕を持たせるのが一般的ではあります。余裕がなく 1px のスクロールで動いてしまうと、性急な動きが理由で頭痛やめまい、吐き気などの症状が出る方がいらっしゃるためです。あとは、この余裕をどれほどにするかなのかな。

そもそも余裕を持たせるかを含め、わいひらさんや皆さんのご判断におまかせします。


リフィトリー 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@akira さん

早速、私のサイトに適用してみました。(Akiraさんのコードそのままで、何も変更していません)

エイチttps://leafytree.info/

車のハンドル同様に、ある程度の「あそび」が必要ということですね 😀 

しばらく、このままにしておこうと思います。

 

This post was modified 7か月前 2回 by リフィトリー

さる子
(@saruko)
メンバーサイト Moderator
結合: 2年前
投稿: 482
さる子 - Twitter
 
投稿者:: @pintai

歴史のあるCocoonのフォーラムで、そもそもこちらに話題に上がっていない(iPhoneを使っていらっしゃるCocoon運営者もたくさんいると想定し・・)時点で、それほど重要なことでもないのではないかとも感じ

iPhoneとAndroid両方で確認できる、確認する人がほとんどいないのだと思います。今までコピーライトが隠れてしまうのは仕様だと思っていたので…。まさかiPhoneだけだったとは思いませんでした。

iPhoneとAndroidの差異を気付ける人はあまりいないので、貴重な情報だと思います。

 

iPhoneからリフィトリーさんのサイトを触らせていただきました。

コピーライトが隠れることはなくなりましたが今までは「下までスクロールするとフッターメニューが出る」のが当たり前だったので、じゃっかん違和感があるというか、表示の仕方が急に変わって戸惑うというか…。

iPhoneしか使ってなかった人は「モバイルフッターメニューの表示がおかしくなった」バグと思うかもしれません。バグの修正(仕様変更?)するときは周知があったほうがいいと思います。


わいひらリフィトリー 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

わいひらさんのご参考になるように・・

Akiraさんの

https://wp-cocoon.com/community/postid/58261/

のコードを適用したとき。

 

This post was modified 7か月前 2回 by リフィトリー

わいひら 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

Akiraさん

出先でよく確認できないのですが、私のサイトのフッターモバイルボタンが正常に機能していないようです。

 

スライドインサイドバーや、スライドインメニューがフッターモバイルメニューの高さ分しか表示されない場合がほとんどのようです。

 

そのままにしてありますので、ご確認いただけますと助かります。

 


mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3476
 

リフィトリーさんが仰っているのは、以下のことと思われます。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@akira さん

どうも、「transform: translateY()」が影響しているっぽいですが、せっかく良かれと導入されたものなので、生かす手はありますでしょうか?


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 13481
わいひら - Facebookわいひら - Twitter
 
投稿者:: @leafytree

Akiraさんのコードで「-8」に設定してゆっくりスクロールしたとき

投稿者:: @leafytree

Akiraさんのコードで「-8」に設定してちょっと強めにスクロールしたとき

とりあえず見てみた感じ、こちらで十分のような。

Akiraさんが最初に書かれた添付画像の修正案だと、サイドバー表示にエラーは出ないんですよね?

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

わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 13481
わいひら - Facebookわいひら - Twitter
 

エラーが出ない方法として、とりあえずはこっちにしておくというのもいいのかもしれない。
※動作確認はしていません。

      if (footerCurrentPos - footerStartPos > 20) {
        if(footerCurrentPos >= 100) {
          // footerMenu.css("bottom", "-" + footerHeight + "px");
          // footerMenu.css("bottom","-"+footerHeight+"+env(safe-area-inset-bottom)px");
          footerMenu.css("bottom","calc( -1 * (env(safe-area-inset-bottom) + " + footerHeight + "px) )");
        }
      } else if (footerCurrentPos - footerStartPos < -10) {
        footerMenu.css("bottom", 0);
      }

さる子リフィトリー 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@yhira さん

ちょっと今取り込み中なので、少し後で試してみます。

Akiraさんの返信も待ってみたいと思います。


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@yhira さん Akiraさん

とりあえず、私のサイトはわいひらさんの書いてくださったものに差し替えました。

差し替え後は、モバイルボタンの不具合は解消しているようです。


わいひらさる子 件のいいね!
Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1006
Akira - FacebookAkira - Twitter
 

大変申し訳ないです。translate の指定がある子要素の存在を忘れていました。

現状はスクロール連鎖を止められないため、translate が使えませんでした。別途 JavaScript の追加が必要ですので、bottom のままがいいと思います。

まとめると、下の 3 択でしょうか。-8px や 20px は調整をお願いします。

① とりあえず、今回の問題を解決するもの。上スクロールの量だけを調整。

} else if (footerCurrentPos - footerStartPos < -8) {

② 上スクロールの量の変更に合わせ、下スクロールの量も調整するもの。

if (footerCurrentPos - footerStartPos > 20) {
  if(footerCurrentPos >= 100) {
    // footerMenu.css("bottom", "-" + footerHeight + "px");
    // footerMenu.css("bottom","-"+footerHeight+"+env(safe-area-inset-bottom)px");
    footerMenu.css("bottom","calc( -1 * (env(safe-area-inset-bottom) + " + footerHeight + "px) )");
  }
} else if (footerCurrentPos - footerStartPos < -8) {
  footerMenu.css("bottom", 0);
}

③ jQuery は変更せず、CSS で何とかする。

This post was modified 7か月前 by Akira

わいひら, リフィトリーさる子 件のいいね!
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@akira さん

ありがとうございます。

Akiraさんのおかげで解決へ向かいそうです。

 


リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6764
 

@yhira さん Akiraさん

私のサイトはAkiraさんの最初のご案内のJavaScript.jsの110行目を

} else {

から、

} else if (footerCurrentPos - footerStartPos < -8) {

に書き換える、という状態しました。

 

と申しますのも、今回の件は、iPhonenのバウンス効果が問題であって、他には問題がなかったので、修正は必要最小限で良いのかもしれないと考えたからです。

 

Akiraさんの動作にあそびを持たせる、という考え方もとてもよく理解できますが、必要最小限という意味では、Akiraさんの最初のご提案かなと思った次第です。

 

とりあえず、私のサイトはこのようにしてあります。

 

動作確認にご利用ください。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 13481
わいひら - Facebookわいひら - Twitter
 
僕の環境で動作確認したところ、以下のみで対応することにしました。
 
} else if (footerCurrentPos - footerStartPos < -8) {
 
以下を入れると、僕の環境(※Chrome Developer Tool)では添付画像のようにゆっくり動かすとボトムツールバーが非表示にならなかったりしたので、最小限の修正にしました。
 
if (footerCurrentPos - footerStartPos > 20) {
 
GitHubにもアップしておきました。
------------------------------------------------
https://github.com/yhira/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------


Akira 件のいいね!
Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1006
Akira - FacebookAkira - Twitter
 

頭痛やめまい、吐き気」など怪しげなことを私が書いているので、参考情報を追記しておきます。

WCAG 2.1 達成基準 2.3.3: インタラクションによるアニメーションを理解する

日本語翻訳: https://waic.jp/docs/WCAG21/Understanding/animation-from-interactions.html

原文: https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html

This post was modified 7か月前 by Akira

わいひら 件のいいね!
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

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

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

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

サービス運営期間:18年

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
×DBは手動で復旧(データ取得は無料)
×ファイルも手動で復旧(データ取得は無料)
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
×ファイルは手動復旧(データ取得は無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

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

サービス運営期間:6年

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