AMP Stories（ストーリーズ）というモバイルに最適化されたページを、Wordpressに導入する方法についてまとめます。
AMP Stories専用のワードプレス向けプラグイン「Amp Stories for wordpress」の使い方と、実際にAMP Storiesを作成してみた感想、今後の運用面での検討事項についてまとめています。
一応は、旅のブログなので、AMP Storiesの効果は絶大だと思うんですよね。
プラグイン「Amp Stories for wordpress」のインストール
まず、AMP Stories（ストーリーズ）を簡単に導入することができるプラグインである「Amp Stories for wordpress」を、ご自身のワードプレスにインストールします。
なお、このプラグインはワードプレスのクラシックエディタでないと稼働しません。一時的にクラシックエディタを使用したい場合には、以下のプラグインも合わせてインストールして有効化してください。
AMP Stories for WordPressの作成サンプル
このあとに書いている手順通りに作成したサンプルを、まずはご紹介します。
AMP Stories版「新鑑真号パーフェクトガイド2019」
AMP Storiesを作成する手順
「Amp Stories for wordpress」をインストールして有効化したら、あとは特に設定などは必要ありません。PHPのバージョンによっては所々でエラーの表示が出ますが、あまり気にせずに進めることにします。
AMP Stories作成画面は「新規投稿」の下の方！
いつも通りワードプレスで記事を作成する画面を開いて、記事の本文を入力する欄の下の方までスクロールすると「Amp Stories for WordPress」という項目が追加されているのが確認できます。
もしも入力欄が出てこない場合は、右端の▼をクリックするとAMP Storiesの各項目を入力するためのフォームが出現します。
AMP Storiesのアクティベート設定
まず最初のチェックボックス2つは、AMP Storiesの表示に関する項目です。
「Activate Amp Story」は、この投稿でAMP Storiesを起動させる（アクティブにする）かどうかです。今からAMP Storiesを作成するので、これをチェックします。
「Show Amp Story insted of post」は、この投稿のURLにアクセスした閲覧者に対して、強制的にAMP Storiesを見せるかどうかという選択です。モバイルとPCのどちらの閲覧者に対しても、必ずAMP Storiesを見せる場合にはチェックします。
これをチェックしない場合には、URLの後ろに「?amp=1」と付けた場合のみ、AMP Storiesが表示されます。
AMP Storiesのカバー（表紙）の設定
閲覧者がAMP Storiesにアクセスすると最初に表示されるページの設定です。
「カバータイトル（Cover Title）」「カバーサブタイトル（Cover Subtitle）」「表紙の写真・画像のアップロード（Upload）」の3つの項目によって、AMP Storiesの表紙を作成します。
AMP Storiesの全体の構成
ちなみに、AMP Storiesの全体像は、以下のような構成になっています。
表紙（Cover）
∟ ページ（AMP STORY PAGE）
∟ ブロック（TEXT BLOCK）
ひとつのストーリーの中には、1つだけ表紙（Cover）があります。そして、いくつものページ（AMP STORY PAGE）を繋げ合わせることでストーリーを構成します。各ページにはブロック（TEXT BLOCK）を何個も挿入することができます。
AMP Storiesのページを作成する
表紙では3つの項目しかありませんでしたが、ページ（AMP STORY PAGE）では詳細な設定を行うことができます。
まず、「ページのタイトル（Title）」を設定しますが、このタイトルを閲覧者向けに表示するかどうかは次のチェックボックス（Show Title on Page）で決定します。チェックすれば表示、チェックを外せば非表示です。
続いて、ページに背景画像（写真、イメージ）あるいはビデオ、さらに音声などを挿入します。
ビデオや音声などに適当なものがなければ、とりあえず一番上のところに写真などを入れてみてください。写真さえあればページとしては成立します。
ページにブロック（文章など）を追加
リンク要素のないテキストについては、最初の大きなテキストブロック（Text Block）に文字を入力します。そして、この文章の表示位置について「上（Top）」「真ん中（Center）」「下（Bottom）」から選択し、テキストの色（Text Block Color）を選択、さらにテキストの文字サイズ（Text Block Font Size）を入力します。
テキストの色に関しては「白」が良い場面が多いですが、背景となる写真ごとに使い分けるのがベストですね。
リンク要素のあるテキスト（文字をクリックすると別ページにリンクするテキスト）の場合には、こちらの入力欄を使用します。「リンク要素あり」と「リンク要素なし」のどちらにも文字を入れてしまうとテキストが重なって表示されますので注意してください。
「リンク先URL（Include Url insted）」には、リンクさせたい先のURLを入力します。また、「リンクさせる文字（Include Url Anchor Text）」には表示させたいテキスト（文章など）を入力します。
以上で、ひとつのページの作成が完了します。
AMP Storiesのページを追加
もし、同じページにさらに別のテキストを挿入したい場合には「Add More Text Blocks」を、次のページを追加して作業を進めたい場合には「Add More Amp Story Page」をクリックします。
全てのページの作成が終わったら「公開」
以上の作業を繰り返すことによってAMP Storiesの作成が完了したら、いつも通り記事の執筆が完了した時と同じように「公開」ボタンを押して、記事を公開します。
はじめてのAMP Storiesの雑感と検討事項
作成の手順については、ひとつひとつの項目を淡々と入力していくだけの作業ですので、特にハードルは高くないです。ただし、アップロード後に間違いを発見してもキャッシュが強いために、なかなかオンライン上でデータが変更されないのが運営上は怖いかなと感じました。
また、ブログのなかにAMP Stories（ストーリーズ）対応の記事を挿入した場合に、普通のブログ記事とは表示スタイルが違い過ぎて、閲覧者には不便を感じさせることになりそうだなと思います。
一方、「?amp=1」を付けなければ表示させないという設定にした場合に、一体誰がこのAMP Storiesを見るんだろうかとも思うので、他の記事との差別化を上手く行う必要があるように感じました。もしかしたら「固定ページ」でAMP Storiesを作成して、他のブログ記事とは独立した形で管理する方が良いのかもしれません。
とりあえず、以上です。
AMP StoriesにGoogleアドセンスを挿入する方法は、また改めて書きたいと思います。
