- このトピックには8件の返信、4人の参加者があり、最後に
により3年、 8ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】バージョン: 13.2.3
【お使いの Snow Monkey Blocks のバージョン】バージョン 10.2.0
【お使いの Snow Monkey Editor のバージョン】バージョン 4.0.0
【お使いのブラウザ】safari、chrome
【当該サイトのURL】### 発生している問題
トップに戻るボタンを画像にする実装を行ったが、スマホ（実機）のみ表示されない.
### 試したこと
・プラグインMy Snow Monkeyを使って
my-snow-monkry>override>template-parts>common>page-top.php（こちらに上書き）
<div id="page-top" class="c-page-top" aria-hidden="true"> <a href="#body"> <img src="使用する画像のURL" /> <!-- <span class="fas fa-chevron-up" aria-hidden="true" title="<?php esc_html_e( 'Scroll up', 'snow-monkey' ); ?>"> </span> --> </a> </div>このようにしてトップに戻るボタンの画像を表示させました。
PC、タブレットでは表示されますが、スマホ（実機）では表示されていません。
どのような原因が考えられますでしょうか？いいねをした人: 居ませんブラウザ幅の違いから表示・非表示が変わるということであれば、まずはメディアクエリを疑うのでCSSを確認する必要があるかと思います。また、追加されている画像も読み込みがされているか、CSSがどうなっているかも確認してください。
ディベロッパーツールで確認するときちんと表示されていて、特に問題があるようには思えないんですが、実機になると表示されていません。
実機でSafariとChrome両ブラウザにて表示されないという認識でよいでしょうか？スマホのOSの記載もお願いします。また、カスタマイズされた部分へCSSなどカスタマイズされているようであれば、それも記述をお願いします。
こちらで同バージョンにてiOS実機にてSafari/Google Chromeともに表示の確認はしましたので、カスタマイズ起因の可能性が高いかもしれません。
スムーズに解決されたい場合にはURL共有をされることをお勧めします。
いいねをした人: 居ませんCSSで、画像に置き換えてみてはどうですか？
#page-top a svg { display: none; } #page-top { background: url(https://snow-monkey.2inc.org/wp-content/uploads/2018/04/logo.png) no-repeat center center; background-color: transparent; background-size: contain; }いいねをした人:Olein様、まーちゅう様、キタジマ様
ご対応いただきありがとうございます！
実機でSafariとChrome両ブラウザにて表示されないという認識でよいでしょうか？
→SafariとChrome共に表示されませんでした。
スムーズに解決されたい場合にはURL共有をされることをお勧めします。
→現在進めている実案件の内容ですので共有することができず申し訳ございません。
まーちゅう様のアドバイスを実践したところ反映させることができました。
私のスキル不足のため原因の切り分けができていないのですが、ひとまずこの実装で進めていこうと思います。
重ねて御礼申し上げます。いいねをした人: 居ません
- トピック「トップに戻るボタンを画像にする実装について」には新しい返信をつけることはできません。