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

AMPの主要コンポーネントと、WordPressの「AMP」プラグインを活用し、AMPページを作成・アレンジしていく一冊です。

出版日 2017年1月
ISBN 4802610912
ISBN-13 978-4802610919
出版社 ソシム株式会社
ページ数 320ページ
判型 B5変型

はじめに

AMP(Accelerated Mobile Pages)はGoogle が中心となって開発を進めているフレームワークです。AMP を利用してWebページを作成すると、ページ制作者はこれまでのように手間のかかる設定をアレコレと施さなくても、次のような恩恵を得ることができます。

  • ページの高速表示を実現。Googleのキャッシュによりさらに高速化。
  • 閲覧範囲のコンテンツから順次データを読み込み。不要なデータは読み込みません。
  • 画像や広告で表示位置がずれていかない、ストレスのない表示を実現。
  • モダンなページデザインもコンポーネントの組み合わせで手軽に実現。など

さらに、WordPressで構築したサイトであれば、WordPress の開発元であるAutomatic社が開発しているプラグインですぐにAMPページを作成することができます。AMPページのアレンジも、慣れ親しんだテンプレートで自在にコントロールすることが可能です。

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

本書は、WordPressの「AMP」プラグインを活用し、AMPページを作成・アレンジするテクニックについて解説した書籍です。WordPressのテンプレートを自由にカスタマイズできる方を対象に解説していますので、WordPressに関してはプラグインの利用に必要になる部分など、必要最低限の解説しかしていません

WordPressに関する解説が必要な方は下記の姉妹書を参考にしてください(いずれもエビスコム著/ソシム刊)。

『WordPress レッスンブック HTML5&CSS3準拠』
『WordPress デザインブック HTML5&CSS3準拠』
『WordPress ステップアップブック』

本書の構成

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

Chapter 1 AMPとWEB

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

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

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

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

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

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でアレンジしていきます。

もくじ

Chapter 1
AMPとWEB

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

Chapter 2
基本的な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のデベロッパーツールでモバイルデバイスの表示を確認する
主要なデバイスの画面サイズ

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

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フォントやアイコンフォントを使用する

Chapter 4
メディアの表示

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の表示
本文中のビデオ/オーディオの表示

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

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

Chapter 6
AMPページのアレンジ

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

Chapter 7
AMP ONLY

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

APPENDIX

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