Photo by
todand
【初心者向け】Studioのライブプレビューと公開の違い
Studioで作成している架空のヨガYogaサイトの制作メモです。
先日ヘッダーにハンバーガーメニューを設定したのですが、スマホで確認するとハンバーガーメニューを押しても反応しない。
※ちなみに「ハンバーガーメニュー」とは、スマホでWebサイトと見るとよく左上に表示される三本の線画縦並びになったマークです。ハンバーガーのように見えるから「ハンバーガーメニュー」というそうです。えーハンバーガーに見える?とは思っちゃいますが(笑)
話を戻します。
ハンバーガーメニューにはモーダルと言われる、画面上に別画面が開いて✕で閉じるというものを別途作って設定しないといけなかったらしい。Studioでハンバーガーメニューアイコンを設定して開いた先となる作成したモーダルへのリンクを設定。が、PC上ではモーダルが開くのにスマホは無反応・・・。
数時間色々調べて悩んだ挙句、なんてことは無い、スマホで見ていたURLは公開用のURL、PC上で見ていたのはライブプレビュー画面で、この2つは全く異なるものというのに気づきませんでした💦URLを見たら全然違う!
公開URL:https://black019491.studio.site
ライブプレビューURL:https://preview.studio.site/live/●●●

ちゃんと公開ボタン押して、更新しないといけないのですね💦
更新したらちゃんとスマホで機能しました。。数時間の悩みは一体。。
でもこうして色々覚えていけるもんだよねっと挫けず頑張ります。
ハンバーガーメニュー作成参考サイト
STUDIOでハンバーガーメニューを実装する方法を解説!
いいなと思ったら応援しよう!
少しでも好きかもって思っていただけたらサポートお願いします。好きになってもらえて励みにもなれたらこんなに幸せなことはないです😊