このブログではAmazonアソシエイトを利用しており、Amazonから直接作成できるiframeを使った画像とテキストのリンクを利用しています。
基本的にはAmazonから発行されるコードを所定の位置に配置するだけで良いのですが、それだとデザイン的に少し困ったデザインになります。まず、現在の私のサイトで発行されたリンクを見てみるとこんな感じです。
今このページを見ている方にはこれが中央に揃えられているように見えると思います。
しかし、何の工夫もせずに配置すると以下のようになります。
このように左端に寄ってしまいます。特に、モニターを利用する際に、左によってしまうのは顕著にレイアウトの崩れとして認識できます。逆に、文字が画面いっぱいに広がるようなモバイルデバイスの場合は少し左寄っている程度になるため、普段からモバイルデバイスで執筆したりプレビューしている方は気づかないかもしれません。
今回はこれを中央に配置する方法を記します。この話題は他のサイトでも様々なやり方で解決されているのですが、Wordpress向けの解説でなかったり、コードを改変する必要があったりするので、Amazonから発行されるコードは変更せずに、Wordpressでどのように実装するのかを説明します。
というか、Wordpress向けの説明でもなぜか中央に配置できず、躓いていたのでその部分の解説をするというのが今回の記事の一番のアピールポイントになると思います。
説明に入る前に、他のサイトだと躓いたポイントは2つ。
一つ目は、中央に配置できる場合とできない場合があったこと。これは最近のコードだと配置できず、少し前に発行されたコードだと中央に配置できるということがありました。
二つ目が、先ほど少し書いているのですが、Wordpressで他のサイトで設定されているように実装しても、中央に配置されないということがありました。これはテーマに起因する症状ですが、おそらく他のテーマでもWordpressへのiframe周りの実装方法自体は似たり寄ったりだと思うのでその部分の解決方法を記します。
では、中央に配置する方法を説明します。この実装方法は執筆時点(2022/06/05)で利用可能な方法です。
Amazonが発行するコードは、Wordpressのような高機能なCMSに対してではなく、昔のようにHTMLに直接書いたりすることを想定していたのでしょう。そのため、iframeを使用しており、コードをそのままコピペで配置するだけでリンクを設置することができます。
ですが、Wordpressのような高機能CMSになると、それを特定の方法で張り付けると思ったように配置できません。これは、iframe以外の画像であったり、文字サイズに至るまで、様々なレイアウトがデザインされたようにしか配置できないからです。
そうなると、個人で好きなようにテーマをカスタムすることが難しくなるため、簡単にカスタムできるように、Wordpressに提供されている機能が「追加CSS」です。
追加CSSという言葉に聞き覚えがあったり、実際に利用してカスタムしてる方も多いと思います。これを使って設定していきます。
追加CSSに以下のコードを追記します。
iframe[src^="//rcm-fe.amazon-adsystem.com/"] {
margin: auto;
display: block;
}何もトラブルが無ければこれだけで終わりです。表示を確認してみてください。古い記事なども含めて確認してください。問題なければこれで良いですし、古い記事で反映されない等の問題があれば先に進んでください。
何をしているかというと、Amazonから発行されるコードを用いて条件を判定して、そのiframeの配置をオーバーライドしています。そのiframeのコードは以下のようになっています。
<iframe sandbox="allow-popups allow-scripts allow-modals allow-forms allow-same-origin" style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=&language=ja_JP&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B09K6YGYD7&linkId=a59d5bc153b674ff15a8ede0aa43dcd5"></iframe>この中にこの部分があります。
src="//rcm-fe.amazon-adsystem.com...この条件に当てはまるiframeだけをオーバーライドして中央に配置できるようにしています。
もし、古い記事などで問題が出る場合は、追加CSSに以下のように追記してください。上4行は上述のコードと同じです。
iframe[src^="//rcm-fe.amazon-adsystem.com/"] {
margin: auto;
display: block;
}
iframe[src^="https://rcm-fe.amazon-adsystem.com/"] {
margin: auto;
display: block;
}書き方からわかると思いますが、古いコードはリンク先の記述方法が違っており、そのせいで昔の記事ではiframeが正しく判定されず左によってしまいます。昔と言っても、おそらくコードの改変があったのが2022年の4月頃だと思います。なので、ここ数か月の記事で問題が出てきます。
これで問題なく中央に揃えばいいのですが、ここまでやっても中央に配置できない場合があると思います。私が実際にそうでした。面倒ですが、ここはテーマのソースコードを読んで解決を図ります。
調べる過程は良いとして、結果だけ書くと、style.cssの記述に原因がありました。私はテーマを作る側ではないので、意図はわかりかねますが、このように実装されていた理由がわかりません。
私は面倒くさがりなのでTwenty-Twenty-Oneというデフォルトのテーマを使っていますが、他のテーマでも同じような設定になっている可能性があります。その部分の特定方法を残しておきます。
テーマエディターでstyle.cssを開いて、コードを適当に指定した状態で「Ctrl」と「F」キーを押します。するとコードを検索できるようになると思うので検索欄に「iframe」と入れます。Enterを押すと順番にiframeに関する記述の部分があると思うので、順番に見ていきます。
その中で「margin」を設定している場所があればその部分で止まってください。私が利用しているテーマだとこのようになっていました。
.entry-content > iframe[style] {
margin: var(--global--spacing-vertical) 0 !important;
max-width: 100% !important;
}この部分で注目すべきは2行目の最後の「!important」という記述。今まで追加CSSに追記してオーバーライドして配置を変えようとしていたわけですが、この「!important」というのはこの要素のオーバーライドを禁止する記述です。
そのため、追加CSSに何を書いても、この「margin」に関する記述が一切オーバーライドできないため、中央に配置できなかったわけです。
なので、このmarginの行にある「!important」の記述を削除し、以下のようにします。
.entry-content > iframe[style] {
margin: var(--global--spacing-vertical) 0;
max-width: 100% !important;
}このようにすることで中央に配置できるようになりました。これ以外の原因だと私にはわからないので質問しないでくださいね。
これでiframeを自由に配置することができるようになりました。
以上です。お読みいただきありがとうございました。