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

本書ではWordPressで構築したサイトを用意し、WordPressの「AMP」プラグインを利用して記事の個別ページのAMP版（AMPページ）を作成していきます。

Chapter 1　AMPとWEB

AMPとは何か、どのようなメリットがあるのかなどを確認していきます。

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

WordPressの「AMP」プラグインをインストールし、標準で生成されるAMPページを確認します。AMPの文法チェックやキャッシュの確認なども行います。

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

AMPページ用のテンプレートファイルを用意し、オリジナルのAMPページを１から作成していきます。まずは記事を表示し、スタイルシートでデザインを整えていきます。

Chapter 4　メディアの表示

AMPページに画像、ビデオ、SNSの投稿といった各種メディアを表示します。本文中に挿入したメディアはAMPの文法に違反しない形で出力されることを確認します。

Chapter 5　ナビゲーションの作成

AMPページにナビゲーションメニューや関連記事メニューを用意し、サイト内の他のページにアクセスできるようにします。また、SNSのシェアボタンを用意し、記事を共有できるようにしていきます。

Chapter 6　AMPページのアレンジ

AMPに用意されたコンポーネントを活用し、ナビゲーションメニューやヘッダー画像などのデザインをアレンジしていきます。広告の表示やアクセス解析の設定なども行います。

Chapter 7　AMP ONLY

AMPページのみでサイトを構築する「AMP ONLY （Canonical AMP）」にする方法を紹介します。

本書で作成するサンプル

本書では次のようなオリジナルのAMPページを作成していきます。

オリジナルのAMPページの作成

Chapter 3～5では次のようなAMPページを作成していきます。

AMPページのアレンジ

完成したAMPページはChapter 6でアレンジしていきます。

もくじ

[mokuji]

1-1 Webが目指した世界の先にあるもの
1-2 AMPとは何か
1-3 AMPページの作成
1-4 AMPページの表示
AMPに関する公式ドキュメント
WordPressの「AMP」プラグインに関する公式ドキュメント

2-1 基本的なAMPページの作成
2-2 Webサイトを用意する
2-3 「AMP」プラグインをインストールする
2-4 AMPページの表示を確認する
2-5 AMPページの文法をチェックする
ソースコードを入力してAMPページの文法をチェックする
Chrome拡張機能でAMPページの存在と文法をチェックする
2-6 キャッシュされたAMPページを確認する
2-7 検索結果の表示を確認する
Chromeのデベロッパーツールでモバイルデバイスの表示を確認する
主要なデバイスの画面サイズ

3-1 AMPページ用のテンプレートファイルを用意する
3-2 AMPページに記事のタイトルと本文を表示する
記事のタイトルにAMP HTMLで使用できないタグが含まれている場合
3-3 AMP HTMLの基本的な設定を記述する
WordPressの「AMP」プラグインを使わずにAMPページを作成する場合
3-4 スタイルシートで記事のデザインを指定する
3-5 記事の編集画面で本文のデザインを指定する
3-6 記事の投稿日と更新日を表示する
投稿日を「○時間前」、「○日前」という形式で表示する
3-7 記事が属するカテゴリーとタグを表示する
3-8 ヘッダーとフッターを追加する
横幅と左右の余白サイズを制御する<div class=”container”>
3-9 Webフォントやアイコンフォントを使用する

4-1 メディアを表示する方法
4-2 画像を表示する
4-3 画像をレスポンシブにして記事の横幅に合わせて表示する
4-4 アイキャッチ画像を記事の横幅に合わせて表示する
プレースホルダとフォールバック
AMPページのコンテンツの最大幅
4-5 本文中の画像の表示を確認する
本文中に挿入済みの画像の配置を変更する
本文中に挿入済みの画像にキャプションを付ける
4-6 外部メディアの表示を確認する
外部メディアの挿入方法
YouTubeの表示を確認する
Twitterの表示を確認する
Instagramの表示を確認する
Facebookの表示を確認する
Googleマップの表示を確認する
<amp-iframe>のプレースホルダに画像を表示する
<amp-iframe>の表示位置に関する制限
4-7 ギャラリーの表示を確認する
本文中のアニメーションGIFの表示
本文中のビデオ／オーディオの表示

5-1 ナビゲーションメニューをフルスクリーンで表示する
5-2 SNSのシェアボタンを作成する
シェアボタンのアイコンをアイコンフォントで表示する
シェアボタンの数を変更したときの表示
シェアボタンで共有するページをAMPページにする
共有時に付加するテキストを指定する
<amp-social-share>の属性で使用できる変数
はてなブックマークのボタンを作成する
FacebookのアプリIDを取得する
5-3 関連記事をカルーセルで表示する
カルーセルの矢印ボタンをアイコンフォントでアレンジする
カルーセルの表示形式を指定する
カルーセル内の記事をカード型のデザインにする
PC環境におけるカルーセルのスクロールバーの表示を隠す

6-1 条件に応じて使用するテンプレートを変更する
AMPページに適用されるスタイルシートの設定ファイルを変更する場合
6-2 ヘッダー画像を大きく表示したデザインにする
6-3 記事のタイトルを表示スペースに合わせて表示する
6-4 ナビゲーションメニューをスライドインで表示する
サイドバーの表示内容が多いときの表示
6-5 大きい画面で２段組みのレイアウトに切り替える
フレキシブルボックスレイアウトの仕組み
AMPページに読み込まれた画像ファイルを確認する
6-6 広告を表示する
スクロールせずに見える範囲に表示する広告
広告を画面下部に固定表示する
6-7 アクセス解析ツールの設定を追加する
<amp-analytics>の設定が機能していることを確認する
GoogleアナリティクスのトラッキングIDを取得・確認する
複数の<amp-analytics>の設定を出力する
<amp-pixel>でトラッキングピクセルを設置する

7-1 記事の個別ページをAMPオンリーにする
標準のリライトルールの設定を確認する方法

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

[/mokuji]