【ブログに AMP 対応してる?】 WordPress のテーマに Simplicity が超絶オススメな件

シェアしてもらえると嬉しいです!

kero-icon
こんにちは! ケロケロです。
(@kerokero_DIY)

・・・ AMP(Accelerated Mobile Pages)

ブログなどを運営している人なら、一度は目にした言葉でしょう。

上手い言い回しが分かりませんが、グーグル先生とツイッター先生が共同で設定したみたいですね。

ざっくり言うと、

「対応させると、スマホ上でページを表示させるのがメッチャ早くなる」

という仕様です。

『それならサッサと対応した方がオトクですやん!』

と、考えるのは確かにそうなんですが・・・、そうカンタンには行かないんです。

というわけで、今回は

  • このブログをampに対応させる
  • Simplicityは、かゆいところに手が届く

の内容をお届けします!

それでは、レッツラ AMP!

スポンサーリンク

そもそも AMP ってなんなのさ?

クルマのパワーアンプなら得意なんですけどね。

ツイッターをパラパラ閲覧しているところ、にわかに「AMP」という技術が騒がれ始めました。

その時の私の解釈は、

kero-icon
メリットはあるけど、すごいめんどくさそう

ということで、しばらく放ったらかしにしてたのです。

これが AMP だ!

そしてしばらく経ったおり、ある情報が目に入りました。

これを見た私は、

kero-icon
なるほど! これが AMP か!

と、ストンと理解することができたのです。 そのサイトさんがコチラ。

参照サイトはコチラ

AMP化させるメリットは大きいですが、デメリットも分かりやすく記載されています。

これは一読しておいたが方が・・・、イイんですか?

イイんです!

この記事で私がAMPを語っている場合は、上記サイトさんの受け売りをドヤ顔で喋っていると思ってください。

読んでみて感じたこと

まず思ったのは・・・、

kero-icon
AMP化させるなら、絶対に早い方がいい・・・

ということ。

なんでかって言うと、

『AMP化させるだけならカンタンなんだけど、記事によっては修正が必要になる可能性があるため』

後になるほど修正がツラくなりそうなので、今の内にやろう!

というか、初めてAMPを知った時にやっとけば良かった。

kero-icon
と後悔しても、後の祭りだワッショイワッショイ。

はい、というわけで、ブログをAMP化させます!

usa-icon
まわりくどいわー

私のブログ環境

ブログ運営する上で、有名どころだと「はてなブログ」がありますが、私が利用しているのは WordPress になります。

ドメイン・レンタルサーバーの設定やコストなど、メンドクサイ点はありますが、Wordpressは楽しいし面白いです。

kero-icon
他のブログサービスを利用したことがないので、比べようがないですが・・・

使用しているテーマは、Simplicity と呼ばれる[わいひら]さんが開発された無料のテーマになります。

Simplicity サイトはコチラ

元々、シンプルな見た目がいいな、と思っていたので、このテーマはぴったんこカン・カン。

でも、そのシンプルな見た目とは裏腹に機能が充実で柔軟性がすごいです!

これがまた、無料であるということに驚愕。

kero-icon
足向けて寝られません!

そもそも備わっている機能からしてオススメなんですが、AMP対応に関しても超絶オススメです!

もう、確認テストやらエラーチェックやら、かゆいところに手が届くんです。

AMP にプラグインは使わない

Simplicity での AMP 化に、特にWordpressでプラグインは使用しません。

テーマのカスタマイザーにて、 AMP を有効化できます。

詳しくは、 『SimplicityのAMP機能の使い方。カスタマイズ方法など』 にて確認できます。

私もやってみましたが、手順としては、

[外観] – [カスタマイズ] – [AMP] – [AMPの有効化]

にチェックを入れるだけ。

kero-icon
これだけ、ホントにこれだけです

細かい改変は Simplicity が吸収

AMPは、モバイル上で素早く表示させるために、いわゆる凝った演出の部分を削ぎ落とします。

自分のブログにAMPを有効化させて、さてどんな見た目になるかな・・・、と確認してみたら、

kero-icon
・・・、そんなに違和感ないな

というのも、元も Simplicity はシンプルな作りですし、私も色を変えたりといった程度しかカスタマイズしてなかったので、閲覧には全く問題ありませんでした。

強調したかった部分(太字など)が、普通の文字になっているので、その辺りは修正が必要みたいです。

その他には、タイトル下の SNS シェアボタンなど、一部非表示になっているものもありますが、その辺りのレイアウトとかの改変は全部、 Simplicity がやってくれてます。

そう、アドセンスやカエレバなどの改変もやってくれてるんです。

いやもう、すごいですほんとに。

修正が必要になる部分

レイアウトなど、テーマに関する部分は、全て Simplicity が AMP へ対応してくれてますが、さすがに自分で作成した記事には修正が必要です。

  1. WordPressのエディタから、標準で付いている強調表示(太字など)にした部分
  2. CSSで、カスタマイズした部分(背景色の変更など)
  3. プラグインは、場合によっては無効に

これらは、以下の通り修正していくことで、AMPページでも対応できます。

Simplicity が、かゆいところに手が届くんですわ。

1.強調表示の修正

WordPress のエディタだと、上に文字などをカスタマイズできる便利アイコンがあります。

amp-simp-1

例えば、この「B」アイコンで太字にしている場合には、AMPページでは太字になりません。

ゴメンナサイ。 太字じゃなくてテキストカラーでした。

よく強調表示でテキストカラーを「赤」に設定していたんですが、これがAMPページだと通常色の「黒」になります。

上の文章は、実際にテキストカラーを赤にしてます。 AMPページだと通常文字色です。

AMPでは、HTML内に直接記載された文字装飾のカスタマイズ(インライン)、削除されちゃうみたいです。

WordPressのエディタで文字色を変えるとインラインのため、AMPページでは反映されないのです。

なんてこったい。

じゃあ、AMPじゃ文字装飾ができないのかい・・・?

と思ったそこのアナタ。

kero-icon
諦めないで!
usa-icon
・・・

Simplicityでは、独自に文字装飾をしてくれる設定があります!

amp-simp-2

この「スタイル」から文字装飾を設定してやれば、AMPページでも表示されます。

これは、インラインで設定するのではなく、CSSによる外部読み込みで反映しているタメです。

当初私は、バージョン1.9.3を利用していましたが、その時にはこの設定はありませんでした。

AMP化させるため、最新バージョンにアップデートさせたところ、こちらの設定ができるようになったんです。

ということで、今までの記事に、文字装飾をしていた部分に修正が必要になります。

kero-icon
記事が増えていかない内に、気づけてよかったです

記述内容を置換するプラグインもありますが、なんとなく怖いので、これを機に記事のリライトをしながら修正していきます。

今後追加していく新記事は、「スタイル」から反映させた方が良いですね!

2.CSS に独自カスタマイズした情報を AMP へ

WordPress の管理画面より、

[外観]ー[テーマの編集]ー[style.css]

にて、何かしらのカスタマイズをしている方がほとんであると思いますが、この設定はAMPページには反映されません。

なんてこったい。

じゃあ、AMPにゃカスタマイズができないのかい・・・?
と思ったそこのア・ナ・タ。

kero-icon
諦めないで!
usa-icon
・・・

Simplicity には、 style.css と同じ場所に amp.css があります。

これは、AMPページ用のCSSファイルのように、こちらにカスタマイズすればAMPページに反映されます。

私の場合は、それほどカスタマイズしてなかったので、コピペでいけました。

すごいよ、Simplicity

AMP ページでも通常のページでも、見た目がほとんど一緒になったよ。

3.プラグインが無効になる場合も

見た目がほとんど一緒になったよ・・・、と思ったら。

プラグインが機能してませんでした。

プラグインとは、ざっくり言うと WordPress の機能を拡張するオプションみたいなもんです。

私が利用していたプラグインに、「Speech bubble」というものがあります。

これは、Line や facebook の吹き出しのイメージで、会話形式で文章を作れるんです。

一部の記事で利用していたんですが、AMP では機能しませんでした。

これはもう、地道に手直していくしかないですね。

kero-icon
諦めるな!
オマエならやれる!
usa-icon
自分でやってください

確認できていませんが、これ以外にも影響が出るプラグインもあるかもしれません。 特にコンテンツに関する部分は・・・

AMP ページの確認もエラーチェックもシンプルに

はい。

AMPへの有効化もできたし、修正箇所も分かったし。 これでOK!

でも、

kero-icon
ちょーっと待ったぁー!
usa-icon
ゴメンナサイ!
kero-icon
あばよっ!

じゃなくてですね、ちょっとお待ちを。

やっぱり修正したら、直ぐページの確認をしたいじゃないですか?

PC で修正して、スマホで AMP ページを確認して・・・、なんてしなくていいんです。

そう、 Simplicity ならね。

PC上からそのまま確認、エラーチェック

記事を投稿した後、PC上でとりあえず記事をチェック!

すると・・・、

タイトル下に以下のようなリンクがあります。

amp-simp-3

[AMP]リンクをクリックすれば・・・なんということでしょう。

amp-simp-4

PC ブラウザ上で、AMP ページが確認できるではありませんか。(分かりやすくするために、縁取りしてます)

そして!

[AMP]リンク横にある、[テスト]リンクをクリックすれば!

amp-simple-1

はい! エラーチェックもできるんです。

ココでは残念ながらエラーが出てますが、メッセージを確認すれば、どの箇所がマズイのか分かります。

ありがちな AMP エラー

いくつかエラーがでた記事がありましたが、致命的なエラーはありませんでした。

私が経験したエラーはただ1つ。

カエレバリンクで、商品画像がリンク切れしてた箇所

なので、ちゃんと商品画像が表示されるリンクに貼り直したらエラーも直りました!

問題無い時はこんな感じです。

amp-simple-2

この画面が出れば、ホッと一息。

search console も要チェック!

まぁ、確認はカンタンに出来るとしても・・・、

そんな1記事ずつチェックはできんやん・・・、

と、思っているそこのソナタ!

kero-icon
諦め・・・
usa-icon
諦めるな!
kero-icon
oh・・・

記事に AMP エラーが出てる時は、Search Console が教えてくれます!

エラーの時は、通知が来てる

ある日、Search Console にこんな通知が来ておりました。

amp-simple-3

で・・・、通知の中身を見てみると、エラーが出てるURLを教えてくれます。

amp-simple-4

URLをクリックすれば、詳細も教えてくれます。

amp-simple-5

というわけで、Search Console をチェックしてれば、エラーが出てる記事の通知が来ますので、順次修正すれば OK ですね!

AMP ページのアクセス数は?

AMPを有効化させて2周間程しかたってませんが、参照元に、

cdn.ampproject.org

という存在が現れ始めました。

全体のアクセス数の割合で言うと、1.62%になります。

2周間でこの数値を多いとみるか、少ないとみるか・・・は、分かりません。

ただ、増え方は、ほぼ右肩上がりになってますので、今後も増えていくことが予想されます。

今回のまとめ

AMP 有効化させればアクセス数がじゃんじゃん増える!

というわけではないですが、ページが素早く表示されるというのは、ユーザーにとっては満足度が高くなるはずです。

結果的に、ブログへの満足度も高くなるのではないでしょうか・・・

それでは今回のまとめをカンタンに。

今回の内容をプレイバック PartII
  • AMP でページの表示が早くなる
  • AMP 有効化だけならカンタン!
  • 記事の修正が必要になるので、有効化させるならお早めに!
  • AMP 化も含め、Simplicityは超オススメ!
  • Search Console もチェック!

usa-icon
では、最後に一言どうぞ
kero-icon
そぉっすね〜、今回は、
エー・エム・ピーっすね〜
usa-icon
エー・エム・ピー?
kero-icon
A(『諦めるな』)
M(マツオカシュウゾウ)
P(ポジティブぅ〜)
usa-icon
・・・

スポンサーリンク

シェアしてもらえると嬉しいです!

お気軽にフォローしてね!

関連コンテンツ