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

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

ただいまの
回答率

90.49%

  • WordPress

    7231questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • AMP(Accelerated Mobile Pages)

    29questions

wordpressでのAMP対応

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 84

naonao11

score 58

現在ローカルでサイトのamp対応を行っているのですが,#development=1つけデバッグしコンソール画面で確認した際にエラーが大量に出てきます。
以下そのエラーです。

941:2:0 The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'.

941:8:0 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value '/shared/css/import.css'.

941:9:0 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value '/shared/css/mobile.css'.

941:10:0 The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value '/shared/css/mobile.css'. 

941:37:0 Custom JavaScript is not allowed.

941:38:0 Custom JavaScript is not allowed.

941:39:0 Custom JavaScript is not allowed.

941:82:22 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

941:89:16 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

941:96:2 Invalid URL protocol 'http:' for attribute 'action' in tag 'FORM [method=GET]'.

941:96:2 The tag 'FORM [method=GET]' requires including the 'amp-form' extension JavaScript.

941:100:6 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

941:154:0 Custom JavaScript is not allowed.

941:162:12 The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

941:170:21 Invalid URL protocol 'javascript:' for attribute 'href' in tag 'a'.

941:175:0 Custom JavaScript is not allowed.

941:188:2 Custom JavaScript is not allowed.

941:195:11 The mandatory tag 'link rel=canonical' is missing or incorrect.

941:195:11 The mandatory tag 'meta name=viewport' is missing or incorrect.

941:195:11 The mandatory tag 'amphtml engine v0.js script' is missing or incorrect.

941:195:11 The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.

941:195:11 The mandatory tag 'head > style[amp-boilerplate]' is missing or incorrect.

941:195:11 The mandatory tag 'noscript > style[amp-boilerplate]' is missing or incorrect.

またコードについては以下に載せます。

<!doctype html>
<html amp>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>  sample1</title>
  <link rel="canonical" href="http://sample/aaa/941" >
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-custom>
  body {
    font-size: 15px;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #222;
    font-size: 16px;
  }

  header {
    display: block;
    width: 100%;
    height: 55px;
    box-sizing: content-box;
    box-shadow: 0px 0px 10px #555;
  }

  body {
    font-size: 15px;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #222;
    font-size: 16px;
  }

  header {
    display: block;
    width: 100%;
    height: 55px;
    box-sizing: content-box;
    background: #fff;
    box-shadow: 0px 0px 10px #555;
  }

  h1 {
    font-size: 2em;
  }

  .contentBox {
    overflow: hidden;
    width: 100%;
    margin-top: 40px;
    padding: 0;
  }

  .contentBox li {
    width: 46%;
    margin: 5px;
    text-align: center;
    float: left;
    display: table-cell;
    list-style-type: none;
    background-color: #ffc;
  }

  .contentBox li a {
    padding: 30px 0;
    display: block;
    text-decoration: none;
  }

  footer {
    border-bottom: 1px solid #d6434b;
    font-size: 14px;
    line-height: 1.5;
    width: 100%;
    background: #960e15;
  }

  footer nav {
    padding: 20px 0;
  }

  footer ul li {
    display: inline;
    margin-right: 3px;
  }

  footer ul li a {
    color: #fff;
    text-decoration: none;
  }

  footer div small {
    color: #d6434b
  }

</style>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
  <header>
    <div>
      <a href="/"><amp-img src="/shared/img/header_zan_logo.png" width="250px" height="30px" alt="画像名"></amp-img></a>
    </div>
  </header>
  <div>
    <div>

    <main>
              <div class="columnContent">
          <h1 class="single_title">sample1</h1>
          <time datetime="2018年7月18日">2018年7月18日</time>

                      <amp-img alt="" src="http://sample/wp/wp-content/eyecatch.jpg" width="360px" height="240px" layout="fixed"></amp-img>

                        </div>

      <ul class="contentBox">
        <li><a href="/">トップ</a></li>
        <li><a href="/column/category/ccc">ccc</a></li>
        <li><a href="/column/category/bbb">bbb</a></li>
        <li><a href="/column/category/xxx">xxx</a></li>
        <li><a href="/column/category/zzz">zzz</a></li>
        <li><a href="/column/category/www">www</a></li>
      </ul>

      </main>
  </div>
</div>
<footer>
  <div>
    <nav>
      <ul>
        <li><a href="/contact/">お問い合わせ</a></li>
        <li><a href="/term/">利用規約</a></li>
      </ul>
    </nav>
  </div>
  <div>
    <small>Copyright © Zeal Athlete Agency Inc. All Right Reserved.</small>
  </div>
</footer>

  <amp-analytics type="googleanalytics" id="analytics1">
    <script type="application/json">
      {
        "vars": {
          "account": "UA-11111111-1"
        },
        "triggers": {
          "trackPageview": {
            "on": "visible",
            "request": "pageview"
          }
        }
      }
    </script>
  </amp-analytics>
</body>
</html>


必須タグについては書き,禁止タグについては省いているのでここまでエラーが出るのがわかりません。
ご助力お願いいたします・・・

追記

https://validator.ampproject.org/
で上のコードを見てみるとValidation Status: PASS と出てきます。
これはローカル環境だからエラーが出ていたということなのでしょうか。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

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

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    ページ上部にスクロール設定について

    ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。 ご教授頂けますと嬉

  • 受付中

    レスポンシブルデザインについて

    ページ上部のメニューをクリックしたらスマホのサイトのようなメニューバーを表示させたいのですがどうすればよろしいでしょうか。 ちなみにこちらのサイトを参考にしました https://

  • 解決済

    レスポンシブデザインについて

    この画像の上部の油そば池袋とありますが幅を小さくしていくと 赤枠の箇所に油そば池袋と入れたいのですがどうすればよろしいでしょうか <!DOCTYPE html> <html

  • 解決済

    HTMLで作成している検索ボックスの入力欄の高さを広げたいです。

    前提・実現したいこと HTMLで作成している検索ボックスの入力欄の高さを広げたいですが 広げることができません。 cssで設定しているのですが上手くいかないのでご教授いただけた

  • 解決済

    railsでページの上部にflashでメッセージを表示させる

    いつもお世話になります。 現在railsでページを作っており、フォームとボタンを用意しております。ボタンを押した際に保存成功のメッセージをflashを用いて画面上部に表示し一定

  • 解決済

    [css]拡大の中心を中央にする

    CSSアニメーションを用いて正方形を徐々に大きくしていきたいのですが、左上の一点を中心に大きくなっていくような感じがします。 正方形の真ん中を中心に大きくしたい場合はどのようにすれ

  • 解決済

    ifのネストが深いので改善するべきか

     前提・実現したいこと 勉強でコードを書いています。 if文のネストが深くなってきたので可読性が悪いのでは無いかと書き直しています。 独学の為コードの可読性が低かったり汚かったりす

  • 解決済

    jqueryかcssのanimationで画像をループさせたい

     前提・実現したいこと cssのanimationを使って画像がループする処理を作っています。 また、その画像をクリックするとpaused、もう一度クリックするとrunningと切

同じタグがついた質問を見る

  • WordPress

    7231questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • AMP(Accelerated Mobile Pages)

    29questions