Web 制作
amp-list に構造化データのマークアップはできない
amp-list で出力するデータに schema.org で構造化データをマークアップしようと試みましたが、方法が分かりませんでした。行ったことや検証したことを書き留めます。
Web 制作
amp-list で出力するデータに schema.org で構造化データをマークアップしようと試みましたが、方法が分かりませんでした。行ったことや検証したことを書き留めます。
Web 制作
Web フォントなどカスタムフォントの読み込みを監視する AMP コンポーネント amp-font の解説です。FOUT や FOIT を制御できます。
Web 制作
Google Fonts を preload で先読みし、サイト表示を高速化する方法の紹介です。また、コアウェブバイタルの改善ができます。
Web 制作
Google フォームを AMP ページに埋め込む方法の紹介。使用するコンポーネントは amp-iframe です。
Web 制作
2018 年 7 月に AMP が style 属性のインラインスタイルに対応しました。style 属性を使用しても AMP エラーは出ません。
Web 制作
amp-image-slider を使えば、AMP で 2 枚の画像をスライドで比較できます。ビフォーアフター画像などに最適。
Web 制作
AMP でスムーススクロールを実装する方法。on 属性にイベントの tap とアクションの scrollTo を組み合わせます。
Web 制作
要素のレイアウトを指定する AMP の layout 属性に追加された intrinsic の紹介。簡単にレスポンシブ対応が可能です。
Web 制作
WordPress テーマ Cocoon の AMP ページに、画像の「拡大表示」「ギャラリー表示」「スワイプ操作によるスライド表示」を実装するカスタマイズ。
Web 制作
JavaScript の classList.toggle() と同じように、AMP ページで class を動的に変更する方法です。
Web 制作
WordPress テーマ Cocoon の AMP ページに、Lightbox と同じような画像拡大表示を実装する方法の紹介です。
Web 制作
サイトを重くせず、固定ヘッダーなどが「下スクロールで消える」「上スクロールで現れる」アニメーションを実装する方法です。
Web 制作
Web Storage API の sessionStorage を使い、classList.toggle で切り替えた class をページを移動しても再読み込みしても維持する方法。
Web 制作
WordPress テーマ「Cocoon」の一覧リストのカードが、スクロールで画面に入るとふんわりと表示するアニメーションの実装方法。
Web 制作
Intersection Observer API を使い、スクロールで表示領域に入った要素にブラウザに負荷をかけずアニメーションをつける方法の紹介です。
Web 制作
amp-ad タグに media 属性を指定し、AMP に設置する Google Adsense のサイズを画面幅に合わせて変更する方法の紹介です。
Web 制作
「左から徐々に表示」「上下から徐々に表示」など、画像を徐々に表示する CSS を使ったアニメーションの紹介です。
Web 制作
グラデーションを使った見出しデザインのサンプル集。CSS を提示しています。
Web 制作
単色の背景色がグラデーションに変化するホバーエフェクトの CSS 指定方法の紹介です。
Web 制作
JavaScript ライブラリ Infinite Scroll を使用し、WordPress に無限スクロールを実装する方法の紹介です。
Web 制作
WordPress テーマ「Simplicity」と「Cocoon」の関連記事リストの中間に、Google AdSense のインフィード広告を設置するカスタマイズの紹介です。