AMP対応ページのアフィリエイトリンクのところが空白ができていやーんなので修正するの巻
はじめに
本ブログはWordPressで作成していまして、ブログテーマにはLION BLOGを使っています。
LION BLOGは無料だし、AMPにも対応していて、とてもありがたいのです。
でも最近、AMPページを確認したら貼っているアフィリエイトリンクのところにそれはそれは大きな空白ができていてはちゃめちゃになっていることに気づきました。今さら。。。
AMPページを見てみると、
テキストリンク広告の「Xserverドメイン」とその下のバナー広告の間に意図していない空白がびよーんて広がっています。
なんじゃこりゃ。
と、いう状態を修正したときのメモです。これが最善かはわかりませんが。
とりあえず状況の説明
AMPじゃない通常の表示はこう。普通。
で、AMPページを見ると冒頭のように空白が出現してしまう、と。
このように、、、（重なる部分ができるように撮影しているので見づらいです。すみません。）
続き
またまた続き（やってるうちにバナーの内容が変わってしまってます。。。）
そのまた続き
はい、こんなになっちゃいます。
よく見るとバナーも目一杯サイズがでかくなっています。。。
実は、さきほどの画像のページにはAMP対応のリンクじゃないからうまくいかんのか？と思って、AMP対応のアフィリエイトリンクも貼ってありました。
すると、AMPページでは意図したように表示されますが、
通常ページで表示したときの「AMP対応のアフィリエイトリンク」の「その2 バナーのみ」 のところをご確認ください、
今度は通常ページでAMP用のバナー広告が見えなくなっていることがわかります。
だめやん。。。
あちらを立てればこちらが立たず。おお、人生で初めてちゃんと使ったかもしれんぞこの言葉。
悪さをしている原因
まず初めに、使っている通常のリンクはこんな感じで記述されています（xxxxは伏せ字）
<a href="https://px.a8.net/svt/ejp?a8mat=xxxxxxx+xxxxxxx+xx+xxxxxx" rel="nofollow">Xserverドメイン</a>
<img border="0" width="1" height="1" src="https://www17.a8.net/0.gif?a8mat=xxxxxxx+xxxxxxx+xx+xxxxxx" alt="">どうやらimgタグ部分（クリックを集計するためのwidth=”1″ height=”1″になっている小さな画像が埋め込まれています）が、amp-imgのレスポンシブレイアウト機能によってうにょーんて画面に合わせて引き伸ばされてしまっているようです。
どういうことかというと、
LION BLOGでは、AMPページのときはimgタグをamp-imgタグに変換してくれるようになっています。
そしてこのamp-imgタグは、
layout=”responsive”
を指定することで、表示される画面サイズに合わせてうまく画像を表示してくれるようになります。
これが先ほどのwidth=”1″ height=”1″の小さな画像にも適用されてしまうことで、
画面の幅だけ拡大されてしまい、空白ができているように見える、と。
でも、この部分を削除したら集計に影響が出るらしいし、もしかしたらワタシのほうが削除されるかもしれないので削除したくないなあ、と。
。。。。。。。。ん？
リンクの記述を見ると「layout=”responsive”」、そんな記述はないですね。
ということは、ブログテーマのほうでimgタグをAMP対応タグのamp-imgタグに書き換えた時に入ってるっぽいですね。
で、確認してみました。
WordPressのダッシュボードから辿って、functions.phpを見てみます。
で、ありました。6201行目から6203行目のところです。
imgをamp-imgに変換するときに、
layout=”responsive”
が入るようになっています。あ、原因これやん。
ここを修正することにします。
WordPressの管理画面からだとファイルの編集権限がないみたいなので、
サーバーに行って編集することにします。（このブログはエックスサーバーです）。
ええっと、functions.phpがある場所は、
public_html/wp/wp-content/themes/lionblog
でした。
functions.phpの中身を開いて、6201行目付近のamp-imgのlayoutのところを”intrinsic”に変更して上書き保存してやります。以下は変更後のコードの抜粋です。
//画像タグをAMP用に置換
$the_content = preg_replace('/<img (.*?)>/i', '<amp-img layout="intrinsic" $1></amp-img>', $the_content);
$the_content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="intrinsic" $1></amp-img>', $the_content);念のためWordPressに戻って確認。
ちなみに”intrinsic”に設定すると、表示画面サイズが大きくなっても画像に設定してあるwidthとheightまでしか引き伸ばされなくなります。
なのでAMPページでもwidth=”1″とheight=”1″のままでいてくれるはず。
確認してみる
該当部分をAMPページで表示してみます。
うまくいったようです。めでたしめでたし。
（と、思ったら、border=”0″を残したままだとAMPエラーになるので、そこはこっそり削除しておきます。）
おわりに
こうして、functions.phpの
laytout=”responsive” を
layout=”intrinsic”
に変更することで、無事に空白問題が解決できたのでした。
ついでに、小さめの画像をいい感じに貼っていたのに、AMPページにするとすごく引き伸ばされてしまっていた画像たちも元のサイズに戻りました。
今回、そういうlayout設定に変えたので、これによる影響が許容できるようなページの作り方をする必要がありそうですね。。。思いつかんけど。
あ、あと、重要なファイルを書き換えることになりますので、もし実施される方がいらっしゃいましたら、くれぐれも慎重に、また、自己責任にてお願いします。
おしまい。
実施環境
WordPress 5.9
LION BLOG ver.2.0.0
参考にしたページ
今回のテストで使ったアフィリエイトリンク
——-普通のアフィリエイトリンクここから——-
その１（テキストリンクのみ）
Xserverドメインその２（バナーのみ）
——-普通のアフィリエイトリンクここまで——-
——-AMP対応のアフィリエイトリンクここから——-
その１（テキストリンクのみ）
Xserverドメインその２（バナーのみ）
——-AMP対応のアフィリエイトリンクここまで——-