ブログのモバイル(AMP)対応を完了。ほぼリーマンの仕事レベルだな。

ピアノ

ども。MrBachLoverです。6月頃から毎日更新し始めて気合入れれ記事を書いていたら、ブログのアクセスが6月以降1万PV/月を越え始めており、7月は1万4千PV。ちゃんと毎日更新して質の高い記事を書くことはとても大事だと実感しています。

そこで問題となるのがモバイル対応(AMP(Accelarated Mobile Pages)対応)。『BachLoverのブログ』はモバイル対応していなかったのですが、どうやらモバイル対応したほうが良いらしいのです。

という訳で数日前からモバイル対応(AMP対応)に仕掛って、本日午前中に暫定策含めモバイル対応(AMP対応)を完了しましたので記事にしておこうと思います。

レモンちゃん
レモンちゃん

Wordespress + Cocoon のテーマならモバイル対応は数クリックで出来ちゃうはずだよ。何がそんなに大変だったの???

わたくし
わたくし

レモンちゃん、世の中そんなに甘く無いんだよ。
一杯ドツボにハマりまくったんだから。モーーー。
BachLover、牛になった気分。

事の発端:AMP対応のプラグインでハマる

WordPressのプラグインにAMP対応用の物があり、それをインストールしたところ、
サッパリ上手くAMPが表示されません

どう上手く表示されないかと言うと、スタイルシートが全然効かない。
だから、

画像がドデカくなったり、
文字が米粒のように小さくなったり、
さらに、吹き出しが変。
顔写真やレモンちゃんの写真がダブって見える。

ほぼ、お化け屋敷級ですなー。

ググって調べたら、Cocoonのテーマ(わたくしが使ってるテーマ)は
AMPにかんたんに対応出来るのだとか。

という訳で、テーマの設定シート「AMP]のタブで
AMP(Acceralated Mobile Pages)を有効にしてみたところ、

へー。問題なし。

でもって、対応完了かと思いきや、

サチコ(Google Serch Console)にエラーを指摘される
Safari でCSS(スタイルシート)が読み込まれない
もしもアフィリエイトのかんたんリンクがAMP対応していない

の問題が発生。

ドつぼ:サチコのAMPエラー対応

サチコのエラー指摘は5種類ぐらいあり、
それぞれ、地味にページをソースコードレベルで編集して
タグの属性追加やら、色々な手当をしました

まあ、要するにCocoon のテーマは無料テーマという訳でAMPに
完全対応はしていないのですヨ。

だから無料なのかも。

こんなことならちゃんとサポートを受けられる
有料テーマにしておけばよかった。(汗)

ですが、後の祭り。

一通り修正して再度検証を依頼しており、現在、検証待ち。
ザーッと、この対応で6時間ぐらい使いましたね

ドつぼ:Safari でCSS(スタイルシート)が読み込まれない

ChromeでAMP対応ページが綺麗に表示できたので
めでたしメデタシと思っていたところ、

ん??? SafariでAMPのページを表示すると崩れる。

なんでぇ????

色々調べてると、どうやらキャッシュ関連のプラグインで
CSSを圧縮したりJS(ジャバスクリプト)の流し込みの仕方を変えたり
してたのが問題だった模様。

そうそう、吹き出し画像が2個表示されちゃった件も
キャッシュの設定変えたら解決しました
(画像の遅延読み込みをOffにした)

この対応も1−2時間掛かりました

ドツボ:『かんたんリンク』はAMP非対応

もしもアフィリエイトの『かんたんリンク』は
AMP対応非対応である事が判明。

これ放置すると物販収入がゼロになる訳で、
かなりマズイかも。

暫定対応として「かんたんリンク」があるページは
全てAMP対応対象外に設定。
(※ページ毎にAMPを作るか作らないかの設定ができる)

後日、全部の『かんたんリンク』を
手作業でAMP対応しているリンクに
切り替えていく予定。

だけど、コレは時間が掛かる。

10個/週 とかで見直ししようと思っています

この恒久対応は年内、下手すると正月一杯まで掛かりそうです

一旦のAMPの対応の完了ではあるが…

という訳で、一連のAMPの対応活動により
『BachLoverのブログ』は一応,AMP対応できたと
いえなくもないのだが、

【宿題】もしもアフィリエイトのかんたんリンクの総見直し

というかなり思いお仕事が残っている。

対応の筋道はググってほぼ調査済みではあるが、
いかんせん、元気が必要だ。

このAMP対応、マジでリーマンにお仕事級ですな。WWWwww-

ではでは〜


コメント

タイトルとURLをコピーしました