WordPress AMP対応 モダンWeb制作 レッスンブック

AMP（Accelerated Mobile Pages）は、Googleが中心となって開発を進めているフレームワークです。AMPを利用することで、これまでのような手間のかかる設定をしなくても、Webページの高速表示を実現できます。

本書では、WordPressを使って構築したサイトで、AMP対応ページを作成・アレンジしていく方法をステップ・バイ・ステップで解説していきます。

●基礎
WordPressの開発元が提供しているプラグインで、AMPページはすぐに作成できます。
●実践
AMPページをカスタマイズして、ビデオ、SNS投稿などの各種メディアを表示します。
●応用
ナビゲーションメニューや、広告の表示、アクセス解析の設定などのアレンジを行います。

第1章　AMPとWEB

1-1 Webが目指した世界の先にあるもの
1-2 AMPとは何か
1-3 AMPページの作成
1-4 AMPページの表示

第2章　基本的なAMPページの作成

2-1 基本的なAMPページの作成
2-2 Webサイトを用意する
2-3 「AMP」プラグインをインストールする
2-4 AMPページの表示を確認する
2-5 AMPページの文法をチェックする
2-6 キャッシュされたAMPページを確認する
2-7 検索結果の表示を確認する

第3章　AMPページのカスタマイズ

3-1 AMPページ用のテンプレートファイルを用意する
3-2 AMPページに記事のタイトルと本文を表示する
3-3 AMP HTMLの基本的な設定を記述する
3-4 スタイルシートで記事のデザインを指定する
3-5 記事の編集画面で本文のデザインを指定する
3-6 記事の投稿日と更新日を表示する
3-7 記事が属するカテゴリーとタグを表示する
3-8 ヘッダーとフッターを追加する
3-9 Webフォントやアイコンフォントを使用する

第4章　メディアの表示

4-1 メディアを表示する方法
4-2 画像を表示する
4-3 画像をレスポンシブにして記事の横幅に合わせて表示する
4-4 アイキャッチ画像を記事の横幅に合わせて表示する
4-5 本文中の画像の表示を確認する
4-6 外部メディアの表示を確認する
4-7 ギャラリーの表示を確認する

第5章　ナビゲーションの作成

5-1 ナビゲーションメニューをフルスクリーンで表示する
5-2 SNSのシェアボタンを作成する
5-3 関連記事をカルーセルで表示する

第6章　AMPページのアレンジ

6-1 条件に応じて使用するテンプレートを変更する
6-2 ヘッダー画像を大きく表示したデザインにする
6-3 記事のタイトルを表示スペースに合わせて表示する
6-4 ナビゲーションメニューをスライドインで表示する
6-5 大きい画面で2段組みのレイアウトに切り替える
6-6 広告を表示する
6-7 アクセス解析ツールの設定を追加する

第7章　AMP ONLY

7-1 記事の個別ページをAMPオンリーにする

APPENDIX

AMP HTMLで使用できないHTML&CSS
AMP HTMLのコンポーネント
layout属性で指定できるコンポーネントの表示形式
構造化データの編集
カスタム投稿タイプの記事のAMPページを生成する