Simplicity2のAMPページで、AmazonJSを中央寄せする方法

WordPress の テーマSimplicity2は、ボタンひとつで AMP 対応が済んでしまう、超ありがたい無料テーマです。私のブログでも使わせてもらっています。

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

ところで、Simplicity2 上で AmazonJS を使用している場合、AMP ページでは Amazon 標準のウィジェット広告が表示される仕様になっています(AMP ページでは JavaScript が使えないため)。次の画像のような感じでウィジェットが出ます。

広告ウィジェットは、このように左寄せで表示されます。ですが、私のブログでは広告や画像の類は全て中央寄せにしているため、左寄せだと違和感がありました。

そこで、中央寄せにするカスタマイズをしてみました。次のような感じです。

ということで、この記事では、Simplicity の AMP ページで出力される Amazon 広告ウィジェットを中央寄せするカスタマイズの方法をまとめておきます(結構マニアックですが・・・)。

方法は2つあります。

(追記:3つ目の方法を追記しました。)

スポンサーリンク

方法1(手作業で div を追加)

1つ目の方法は、WordPress の投稿編集画面にて、AmazonJS のショートコードの前後に div タグを追記します。そして div タグには class を指定しておき、そのクラスに対してスタイルをあてる、というものです。

普段次のように表示されているであろうショートコードを、

次のようにします。

div に対して amazonjs_amp というクラスを割り当てました。

そして、Simplicity2 の amp.css にて、次のスタイルを記述します。

これで中央揃えになります。

この方法は誰でもできて簡単ですが、デメリットは、AmazonJS のショートコードひとつひとつに対して手作業で div タグを追記しなければならないという点です。

もしかすると、Search Regex とかのプラグインをうまく使えば、一括置換もできるかもしれませんが、私のほうではうまくいきませんでした。

また、これから先 AmazonJS のショートコードを書くたびに div タグを追記する必要があり、記事作成時の手間が少し増えてしまいます。面倒です。

なので、私は次のもう1つの方法を今のところはとっています。

方法2(テーマファイルを編集して自動で div を追加)

方法の2つ目は、少し難しいやり方です。Simplicity2 のテーマ内のソースをいじります。

こちらの方法は PHP ファイルの内容を変更するものですので、失敗すると WordPress がうまく動かなくなるかもしれません。ご注意ください。

まず、「外観」>「テーマの編集」にて、Simplicity2 テーマを選択し、amp.phpを開きます。

該当ファイルの54行目付近に「//noscriptタグの削除」とありますので、そこを探します。

上記は <noscript>、</noscript>という文字列をそれぞれ空白(というか、文字列無し)に置き換えるというコードです。

これを、空白ではなく div の開始タグ・終了タグに置き換えるというコードに変更します。

こうすると、AMP ページで AmazonJS の広告出力部分が div で囲まれます。あとは方法1と同じで、amp.css に次のスタイルを書きます。

これで中央寄せは完了です。

この方法であれば、AmazonJS のショートコードに対してひとつひとつ手を入れなくて済むので、楽です。

ただし、Simplicity2 のテーマのバージョンアップを実施した場合は、もう1度上記のカスタマイズを行う必要があります。

追記:方法3(プラグインを編集して自動で div を追加)

もう1つ、思いつきました。AmazonJS の PHP ファイルを編集して div タグが追加されるようにするというやり方です。

このやり方の場合も、失敗すると WordPress が正常動作しなくなりますので、ご注意ください。

まず、WordPress 管理画面の「プラグイン」>「プラグイン編集」より、AmazonJSを選択し、amazonjs/amazonjs.php を表示します。

次の場所を探してください。

{$link_html} の前後に div タグを追記します。

以上の追記が終わったら保存します。あとは方法1と同じで、amp.css にスタイルを記述します。

以上で中央寄せになります。

なお、AmazonJS の更新があったときは、上記をやり直す必要があります。

ただし、AmazonJS の更新は Simplicity2 のバージョンアップの頻度よりもずっと少ないです。こっちのほうが良さそうなので、私は方法2からこちらのやり方に切り替えました。

おわりに

今回のカスタマイズは思いのほか難しかったです。

実はもっと簡単な方法があるかもしれません。知っている方は、教えてください!

スポンサーリンク
スポンサーリンク