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

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

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

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

Q&A

0回答

275閲覧

amp-listで「もっと読む」ボタンが表示されない

idkohhi

総合スコア15

AMP(Accelerated Mobile Pages)

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

0グッド

0クリップ

投稿2018/08/09 01:49

編集2022/01/12 10:55

・実現したいこと:amp対応のサイトに「もっと読む」(read more)ボタンを設置したい
amp対応のサイトを作ろうとしています。
jsonのファイルが長く、「もっと読む」(read more)で対応しようと思っています。

AMPのリスト表示を実装する
https://qiita.com/psn/items/448f09f6da7fbb4077aa

上記のサイトを参考にしてみましたが、「もっと読む」ボタンが表示されません。
自分では気ずかない単純なことかもしれませんが、先に進めません。

ご指摘・アドバイスいただけないでしょうか。
よろしくお願いします。

amptest09.php

<html amp> <head> <meta charset="utf-8"> <link rel="canonical" href="http://qiita.com/psn/items/448f09f6da7fbb4077aa"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <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 custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script> <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> <script async src="https://cdn.ampproject.org/v0.js"></script> <style amp-custom> .list-overflow { position: absolute; bottom: 0; background: #9E9D9D; width: 100%; } </style> </head> <body> <h1>amp-listを表示するよ!</h1> <div> <a id="development=1"></a><a href="#development=1">バリデーションのフラグ( #development=1 )を付ける</a><br> 付けたらF12を押してからF5押しましょう。 </div> <!-- ここに新しい要素を置きます --> <amp-list width=300 height=100 src="./link-list.json"> <template type="amp-mustache"> <a href="{{url}}">{{title}}</a> <br> </template> <div overflow role=button aria-label="もっと読む" class="list-overflow"> もっと読む </div> </amp-list> </body> </html>

link-list.json

{ "items": [ { "title": "1番目のリンク", "url": "https://example.com/items/01#1" }, { "title": "2番目のリンク", "url": "https://example.com/items/01#2" }, { "title": "3番目のリンク", "url": "https://example.com/items/01#3" }, { "title": "4番目のリンク", "url": "https://example.com/items/01#4" }, { "title": "5番目のリンク", "url": "https://example.com/items/01#5" }, { "title": "6番目のリンク", "url": "https://example.com/items/01#6" }, { "title": "7番目のリンク", "url": "https://example.com/items/01#7" }, { "title": "8番目のリンク", "url": "https://example.com/items/01#8" }, { "title": "9番目のリンク", "url": "https://example.com/items/01#9" } ] }

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問