前提・実現したいこと
ampのページをwpで作成しているのですが要素をフェードインさせるアニメーションをやりたく調べてみたらamp-scriptと呼ばれるものでカスタムscriptを呼び出せるとのことでした。やってみたのですがエラーが発生してしまいました。恐らく内容としては「amp-popのIDを持っているものはtarget="amp-script"を持っていなければならない」というような内容かと思います。どなたかわかる方いましたらお力添えいただけますでしょうか。
よろしくお願いいたします。
発生している問題・エラーメッセージ
[ amp-script ] script# amp-pop must have target="amp-script".
該当のソースコード
1呼び込みたいjsの処理 <script id="amp-pop" type="text/plain" target="amp-script" > <?php if (is_single() && !is_attachment()) { ?> $(function(){ var cvBtn = $('#amp_cvPop'); var bgPop = $('#amp_bgPop'); var closeBtn = $('#close'); var ua = navigator.userAgent; var diff = 600; if ($('#target')[0]) { var point = $('#target').offset().top - diff; cvBtn.hide(); bgPop.hide(); closeBtn.on('click',function(){ cvBtn.remove(); if ((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0) { bgPop.remove(); } }); $(window).scroll(function (){ if ($(this).scrollTop() > point) { cvBtn.fadeIn(); if ((ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0) && ua.indexOf('Mobile') > 0) { bgPop.fadeIn(); } } }); } }); </script> <?php } ?> 2.対応させたいhtml部分 <amp-script layout = "container" script = "amp-pop"> <div id="amp-pop"> <div id="amp_bgPop" style="height: 100%;top: 0;width: 100%;position: fixed;left: 0;z-index: 99999;background: black;opacity: 0.5;"></div> <div id="amp_cvPop" class="cvPop1"> <a id="scv5" href="https://career-ch.com/event_post/consultation7"> <p class="eventPopMain1">就活のプロによるサポートイベント <img id="close" src="https://career-ch.com/wp/wp-content/uploads/2018/06/icon_119160_125.png" alt="バツボタン" width="128" height="128" class="alignnone size-full wp-image-6081" /></p> <div style=" overflow: hidden;"> <a id="scv5" href="https://career-ch.com/event_post/consultation7"> <div class="sppopimg"><p class="popImg1"> <img class="top_slider_pc" src="https://career-ch.com/wp/wp-content/uploads/2019/03/scv4.jpg" alt="就活相談会の画像"> <img class="top_slider_sp" src="https://career-ch.com/wp/wp-content/themes/cc/lp/images/soudankai.jpg" alt="就活相談会の画像"></p><div class="popText1"> <p class="eventPopSub011">お悩み解決&内定獲得へ!</p> <p class="eventPopSub021">就活のプロに頼ろう"就活相談会"</p> <p class="cvDetails1">詳細はこちら</p></div></div></a><a id="scv6" href="https://career-ch.com/event_post/startup12"> <div class="sppopimg"><p class="popImg1"> <img class="top_slider_pc" src="https://career-ch.com/wp/wp-content/uploads/2019/07/naitou.jpg" alt="START UP 就活の画像"> <img class="top_slider_sp" src="https://career-ch.com/wp/wp-content/uploads/2019/08/naitoubnr.jpg" alt="START UP 就活の画像"></p> <div class="popText1"> <p class="eventPopSub011">これから就活を始める皆さんへ</p> <p class="eventPopSub021">【21卒】START UP 就活セミナー</p> <p class="cvDetails1">詳細はこちら</p> </div> </div> </a> <a id="scv7" href="https://career-ch.com/event_post/deokure9"><div class="sppopimg"> <p class="popImg1"> <img class="top_slider_pc" src="https://career-ch.com/wp/wp-content/uploads/2019/04/icatch_deokure.jpg" alt="出遅れ&やり直し就活の画像"> <img class="top_slider_sp" src="https://career-ch.com/wp/wp-content/themes/cc/lp/images/deokure.jpg" alt="出遅れ&やり直し就活の画像"></p> <div class="popText1"> <p class="eventPopSub011">出遅れても大丈夫!</p> <p class="eventPopSub021">まだこれから"出遅れ&やり直し就活"</p> <p class="cvDetails1">詳細はこちら</p></div></div></a> <a id="scv8" href="https://career-ch.com/event_post/event_offer5"><div class="sppopimg"> <p class="popImg1"> <img class="top_slider_pc" src="https://career-ch.com/wp/wp-content/uploads/2017/12/kyujin-1.jpg" alt="求人フェアの画像"> <img class="top_slider_sp" src="https://career-ch.com/wp/wp-content/themes/cc/lp/images/kyujinfair.jpg" alt="求人フェアの画像"></p><div class="popText1"> <p class="eventPopSub011">あなたに合う求人が見つかる!</p><p class="eventPopSub021">納得内定を狙う"求人フェア"</p><p class="cvDetails1">詳細はこちら</p></div></div></a></div></div> </div> </amp-script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。