amp-bindで「続きを読む」ボタンを作る方法。beizのノートコンテンツへスキップホームコンピューターamp-bindで「続きを読む」ボタンを作る方法。amp-bindで「続きを読む」ボタンを作る方法。more)ボタンを作る方法を紹介します。AMP公式に「続きを読む」ボタンを作る例が掲載されていますが、これは、ボタンが押されたら別リソースにjsonを取りに行って(fetchして)、現在の内容を更新するというものです。https://ampbyexample.com/advanced/show_more_button/今回はそうではなく、続きの内容をhtmlの中に直接書いておいて、ボタンでそれを表示する方法を紹介します。amp-bindをロードしておきます。次のように、[見出し]、ボタン、[続きの内容]の順で配置します。次のようにスタイルシートで.hiddenクラスにdisply:none;を指定します。none;}以上です。解説:[続きの内容]には、class=”hidden”属性を付けておきます。これがclass属性のデフォルト値になります。buttonのon属性に、tap:AMP.setState()を指定して、ボタンが押されたらmore_text変数にtrueが代入されるようにします。[続きの内容]の[class]属性に、more_textがtrueの場合は、空文字列に書き換えられるようにします。none;の適用が外れ、続きの内容が表示されます。定義されていない変数を参照すると、nullが返ります。‘default’などとすることで、fooがnullの場合に’default’を初期値にすることもできますが、今回はnullのままでよいと考えます。応用例として、次のようにコードを変更すると、「続きを読む」が「たたむ」とトグルできるようになります。'hidden'">[続きの内容]でこぼこでこぼこ仲間たち</p>ちなみに、ボタンが押されたら、見出しのテキストをごっそりと入れ替える次のような方法もあります。'[見出し]キラキラ星の木の下に[続きの内容]でこぼこでこぼこ仲間たち'})">続きを読む</button></p>しかしこの方法は、full_textの中身がセキュリティの事情で評価されずに出力されるため、タグが入っている場合には、タグがhtmlspecialcharsを通したようにそのまま出てきてしまいます。そのため、hiddenで隠しておくのがよいのではないかと思います。以上、amp-bindで「続きを読む」ボタンを作る方法。こんな記事も読まれていますAMPのCDNキャッシュをupdate-cacheを使って強制更新する方法。update-pingは廃止。LaravelでURL末尾のスラッシュを付ける方法。音波振動歯ブラシ「ドルツ」8モデルの一覧比較。ソニッケアー11機種のスペック一覧!違いを徹底比較。図で比較するルンバ24機種の特徴と比較。ひと目で分かる本体性能と付属品の違い。ヘアドライヤー10種類の一覧比較。ナノケア・イオニティ。コンタクトレンズ39種類の酸素透過率Dk/Lと含水率のランキング・一覧表比較。炊飯器5種を一覧比較!各機種のおすすめポイントを紹介。c‮ro.setonzieb@tcatno‬gホームプライバシーポリシ。