GoogleのWebフレームワーク「AMP」で高速表示を実現する!
AMP(Accelerated Mobile Pages)は、Googleが中心となって開発を進めているフレームワークです。AMPを利用することで、これまでのような手間のかかる設定をしなくても、Webページの高速表示を実現できます。
本書では、WordPressを使って構築したサイトで、AMP対応ページを作成・アレンジしていく方法をステップ・バイ・ステップで解説していきます。
●基礎
WordPressの開発元が提供しているプラグインで、AMPページはすぐに作成できます。
●実践
AMPページをカスタマイズして、ビデオ、SNS投稿などの各種メディアを表示します。
●応用
ナビゲーションメニューや、広告の表示、アクセス解析の設定などのアレンジを行います。
1-1 Webが目指した世界の先にあるもの
1-2 AMPとは何か
1-3 AMPページの作成
1-4 AMPページの表示
2-1 基本的なAMPページの作成
2-2 Webサイトを用意する
2-3 「AMP」プラグインをインストールする
2-4 AMPページの表示を確認する
2-5 AMPページの文法をチェックする
2-6 キャッシュされたAMPページを確認する
2-7 検索結果の表示を確認する
3-1 AMPページ用のテンプレートファイルを用意する
3-2 AMPページに記事のタイトルと本文を表示する
3-3 AMP HTMLの基本的な設定を記述する
3-4 スタイルシートで記事のデザインを指定する
3-5 記事の編集画面で本文のデザインを指定する
3-6 記事の投稿日と更新日を表示する
3-7 記事が属するカテゴリーとタグを表示する
3-8 ヘッダーとフッターを追加する
3-9 Webフォントやアイコンフォントを使用する
4-1 メディアを表示する方法
4-2 画像を表示する
4-3 画像をレスポンシブにして記事の横幅に合わせて表示する
4-4 アイキャッチ画像を記事の横幅に合わせて表示する
4-5 本文中の画像の表示を確認する
4-6 外部メディアの表示を確認する
4-7 ギャラリーの表示を確認する