- AMP
amp-script で button タグの属性の変更が HTML に反映されない
class や aria-* などの属性を amp-script で追加や更新、削除をする場合、button タグの HTML に変更が反映されません。
AMP
AMP に関する記事
- AMP
WordPress プラグインの AMP のコメントフォームで reCAPTCHA を使用する
WordPress プラグインの AMP を使用しているサイトのコメントフォームに reCAPTCHA v3 を導入する方法の紹介です。
- AMP
さらなる高速表示のための AMP ページの最適化
AMP ページは、必ずしも AMP キャッシュで表示されるわけではありません。しかし、最適化により常に高速な表示が可能です。
- AMP
AMP に最適な PWA を 1 行で実装する AMP Service Worker の使い方
AMP ページで簡単に Service Worker を利用できる AMP Service Worker の紹介です。AMP ランタイムや HTML などをキャッシュできます。
- WordPress
- AMP
WordPress の AMP ページに amp-list の無限スクロールを実装する方法
WordPress の AMP ページにおいて、amp-list で作る動的なリストの無限スクロールを実装する方法の紹介です。関連記事や検索結果ページなどのリストに適しています。
- AMP
AMP でヘッダーなどを下スクロールで非表示・上スクロールで再表示
AMP ページにて、下スクロールで非表示になり上スクロールで表示するヘッダーやフッターボトムの作り方の紹介。amp-fx-collection を使います。
- AMP
AMP の第 3 の CSS 指定方法 amp-keyframes
AMP の amp-keyframes 属性を持つ style タグの説明です。@keyframes 専用、CSS サイズ制限の対象外などの特徴があります。
- AMP
amp-list に構造化データのマークアップはできない
amp-list で出力するデータに schema.org で構造化データをマークアップしようと試みましたが、方法が分かりませんでした。行ったことや検証したことを書き留めます。
- AMP
AMP ページに Google フォームを埋め込む方法
Google フォームを AMP ページに埋め込む方法の紹介。使用するコンポーネントは amp-iframe です。
- AMP
CSS が柔軟に！AMP が style 属性のインラインスタイルに対応
2018 年 7 月に AMP が style 属性のインラインスタイルに対応しました。style 属性を使用しても AMP エラーは出ません。
- AMP
2 枚の画像をスライドで比較できる amp-image-slider の使い方
amp-image-slider を使えば、AMP で 2 枚の画像をスライドで比較できます。ビフォーアフター画像などに最適です。
- AMP
AMP でスムーススクロールを実装できる scrollTo の使い方
要素のレイアウトを指定する AMP の layout 属性に追加された intrinsic の紹介。簡単にレスポンシブ対応が可能です。
- AMP
AMP の layout 属性に intrinsic が追加
要素のレイアウトを指定する AMP の layout 属性に追加された intrinsic の紹介。簡単にレスポンシブ対応が可能です。
- WordPress
- AMP
【Cocoon】AMP でスワイプ対応の画像拡大ギャラリーを実装する方法
WordPress テーマ Cocoon の AMP ページに画像の「拡大表示」「ギャラリー表示」「スワイプ操作によるスライド表示」を実装するカスタマイズの紹介です。
- AMP
AMP で toggle のように class を切り替える 2 つの方法
JavaScript の classList.toggle() と同じように AMP ページで class を動的に変更する方法です。
- WordPress
- AMP
【Cocoon】AMP で画像拡大表示のライトボックスを実装する方法
WordPress テーマ Cocoon の AMP ページに Lightbox と同じような画像拡大表示を実装する方法の紹介です。
- AMP
AMP でのアドセンス広告のサイズを画面幅に応じて変更する方法
amp-ad タグに media 属性を指定し、AMP に設置する Google Adsense のサイズを画面幅に合わせて変更する方法の紹介です。
- AMP
- WordPress
AMP に「ページトップへ戻る」ボタンを設置する方法
amp-animation と amp-position-observer を使い、AMPページ に「ページトップへ戻る」ボタンを設置する方法の紹介です。
- WordPress
- AMP
WordPress で video タグの動画を AMP に対応する方法
amp-video を使い、WordPress のメディアにアップロードした動画を AMP に対応する方法の紹介です。
- WordPress
- AMP
Simplicity に画像付き SNS フォローエリアを設置するカスタマイズ
WordPress テーマ Simplicity に画像付きの SNS フォローボタンを設置するカスタマイズの紹介です。AMP にも対応しています。
- WordPress
- AMP
Simplicity の AMP に WordPress のコメント欄を設置するカスタマイズ
Simplicity の AMP ページに、WordPress のコメントリストを表示するカスタマイズの紹介です。
- WordPress
- AMP
WordPress の AMP ページに検索フォームを設置する方法
WordPress の AMPページに検索フォームを設置する方法の紹介です。拡張コンポーネント amp-form を使用します。
- WordPress
- AMP
amp-sidebar で WordPress の AMP にスライドメニューを設置
WordPress の AMP ページにスライドメニューを実装する方法の紹介です。拡張コンポーネント amp-sidebar を使用します。
- フォント
- AMP
AMP ページで Google Fonts を使う 2 つの方法
AMP ページで Google Fonts を使う方法の紹介です。link タグで読み込む方法とサーバーにフォントファイルを設置し preload で読み込む方法の 2 つがあります。