質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1591閲覧

amp-scriptのエラー[ amp-script ] script# amp-pop must have target="amp-script".

TakehiroShinmyo

総合スコア16

AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/08/27 05:39

前提・実現したいこと

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決できました。シンプルに階層のミスでした。

投稿2019/08/27 05:52

TakehiroShinmyo

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問