Follow #ソシム販売部Twitterアイコン

 

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

エビスコム

GoogleのWebフレームワーク「AMP」で高速表示を実現する!

定価
3,080円(本体価格 2,800円)
  • 発売日
    2017年1月23日
  • 判型/ページ数
    B5変形/320ページ(オール4C)
  • ISBN
    978-4-8026-1091-9

この書籍を問い合わせる

キーワード:
/ / / / / /

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ページを生成する

ダウンロードデータ

本書で解説したサンプルデータをダウンロードできます。
なお、使用方法などに関しては、必ず書籍の該当箇所をご確認の上、ご利用ください。
ダウンロード後、解凍したファイル内に「readme.txt」ファイルなどが含まれる場合は、使用前にこちらもご確認ください。

(約9MB。zip形式で圧縮してありますので、ダウンロード後解凍してください)

正誤情報

お問い合わせ

本書に関するお問い合わせは、下記のボタンをクリックしてお問い合わせフォームよりお問い合わせください。

この書籍を問い合わせる

[ この書籍をシェアする ]

関連する書籍

カテゴリから本を探す

シリーズから本を探す

本を探す