Amazonで販売されている本を横並びで表示する方法につきまして

Amazonで販売されている本を横並びで表示する方法を投稿してみました。

Amazonで販売されている商品の各ページの上段にはアフィリエイトバーが表示され、①テキスト広告②画像広告③テキストと画像広告ーの3種類を選択できるようになっています。

このうち、画像広告を複数、横に並べて表示する方法をあれこれ考えていました。同じ広告を別のページで表示する場合は、商品の変更の際にfront-page.phpやsigle.phpなど複数のページでの変更が必要になり、時間の無駄になりますので、テーマサイトのディレクリトリ(./lib)にまとめておいた方が効率的になると考えたからです。

基本的にはAmazonのサイトに飛ぶリンク画像なので普通は縦に表示されますが、flexboxを使って横並びにすることができます。まず、テーマのディレクトリにあるstyle.cssに次の記述をしました。
.amazon {
display: flex;
justify-content: center;
align-items: center;
}

次に、複数の商品画像をamazon.phpに記述します。

<?php
echo <<< amazon
<div style="display: flex; justify-content: center; align-items: center;"><br>
<!-- 日本経済の黒い霧 -->
<a href="https://www.amazon.co.jp/%E6%97%A5%E6%9C%AC%E7%B5%8C%E6%B8%88%E3%81%AE%E9%BB%92%E3%81%84%E9%9C%A7-%E6%A4%8D%E8%8D%89-%E4%B8%80%E7%A7%80/dp/4828423850?crid=2A1P8DK0K821T&keywords=%E6%97%A5%E6%9C%AC%E7%B5%8C%E6%B8%88%E3%81%AE%E9%BB%92%E3%81%84%E9%9C%A7&qid=1661180493&s=books&sprefix=%E6%97%A5%E6%9C%AC%E7%B5%8C%E6%B8%88%E3%81%AE%2Cstripbooks%2C211&sr=1-1&linkCode=li2&tag=seiban1953-22&linkId=8fc60d4f2ee2a49cf4bd863613afa555&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4828423850&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=seiban1953-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=seiban1953-22&language=ja_JP&l=li2&o=9&a=4828423850" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br>
<!-- 日本のコロナ対策はなぜ迷走するのか -->
<a href="https://www.amazon.co.jp/%E6%97%A5%E6%9C%AC%E3%81%AE%E3%82%B3%E3%83%AD%E3%83%8A%E5%AF%BE%E7%AD%96%E3%81%AF%E3%81%AA%E3%81%9C%E8%BF%B7%E8%B5%B0%E3%81%99%E3%82%8B%E3%81%AE%E3%81%8B-%E4%B8%8A-%E6%98%8C%E5%BA%83/dp/4620326593?keywords=%E6%97%A5%E6%9C%AC%E3%81%AE%E3%82%B3%E3%83%AD%E3%83%8A%E5%AF%BE%E7%AD%96%E3%81%AF%E3%81%AA%E3%81%9C%E8%BF%B7%E8%B5%B0%E3%81%99%E3%82%8B%E3%81%AE%E3%81%8B&qid=1661180546&s=books&sprefix=%E6%97%A5%E6%9C%AC%E3%81%AE%E3%82%B3%E3%83%AD%E3%83%8A%E5%AF%BE%E7%AD%96%E3%81%AF%2Cstripbooks%2C153&sr=1-1&linkCode=li2&tag=seiban1953-22&linkId=d4a76c6291b60a5f1c46ffaf93b2176c&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4620326593&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=seiban1953-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=seiban1953-22&language=ja_JP&l=li2&o=9&a=4620326593" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br>
<!-- 日韓徴用工裁判と日韓請求権協定 -->
<a href="https://www.amazon.co.jp/%E5%BE%B4%E7%94%A8%E5%B7%A5%E8%A3%81%E5%88%A4%E3%81%A8%E6%97%A5%E9%9F%93%E8%AB%8B%E6%B1%82%E6%A8%A9%E5%8D%94%E5%AE%9A-%E9%9F%93%E5%9B%BD%E5%A4%A7%E6%B3%95%E9%99%A2%E5%88%A4%E6%B1%BA%E3%82%92%E8%AA%AD%E3%81%BF%E8%A7%A3%E3%81%8F-%E5%B1%B1%E6%9C%AC-%E6%99%B4%E5%A4%AA/dp/4877987266?keywords=%E5%BE%B4%E7%94%A8%E5%B7%A5%E8%A3%81%E5%88%A4%E3%81%A8%E6%97%A5%E9%9F%93%E8%AB%8B%E6%B1%82%E6%A8%A9%E5%8D%94%E5%AE%9A&qid=1661180602&s=books&sprefix=%E5%BE%B4%E7%94%A8%E5%B7%A5%E8%A3%81%E5%88%A4%E3%81%A8%2Cstripbooks%2C150&sr=1-1&linkCode=li2&tag=seiban1953-22&linkId=cd7699ed23ffd4baee2701c2c7e411ce&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4877987266&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=seiban1953-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=seiban1953-22&language=ja_JP&l=li2&o=9&a=4877987266" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br>
<!-- 昭和天皇と戦後日本 -->
<a href="https://www.amazon.co.jp/%E6%98%AD%E5%92%8C%E5%A4%A9%E7%9A%87%E3%81%AE%E6%88%A6%E5%BE%8C%E6%97%A5%E6%9C%AC%E2%80%95%E2%80%95%E3%80%88%E6%86%B2%E6%B3%95%E3%83%BB%E5%AE%89%E4%BF%9D%E4%BD%93%E5%88%B6%E3%80%89%E3%81%AB%E3%81%84%E3%81%9F%E3%82%8B%E9%81%93-%E8%B1%8A%E4%B8%8B-%E6%A5%A2%E5%BD%A6/dp/4000610554?crid=3PD48RM7T0M1X&keywords=%E6%98%AD%E5%92%8C%E5%A4%A9%E7%9A%87%E3%81%AE%E6%88%A6%E5%BE%8C%E6%97%A5%E6%9C%AC&qid=1661180668&s=books&sprefix=%E6%98%AD%E5%92%8C%E5%A4%A9%E7%9A%87%E3%81%AE%E6%88%A6%E5%BE%8C%2Cstripbooks%2C140&sr=1-1&linkCode=li2&tag=seiban1953-22&linkId=392dd7e24bc32dc93f0f0a9442b71423&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4000610554&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=seiban1953-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=seiban1953-22&language=ja_JP&l=li2&o=9&a=4000610554" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br>
<!-- 戦後史の正体 -->
<a href="https://www.amazon.co.jp/%E6%88%A6%E5%BE%8C%E5%8F%B2%E3%81%AE%E6%AD%A3%E4%BD%93-%E3%80%8C%E6%88%A6%E5%BE%8C%E5%86%8D%E7%99%BA%E8%A6%8B%E3%80%8D%E5%8F%8C%E6%9B%B81-%E5%AD%AB%E5%B4%8E-%E4%BA%AB/dp/4422300512?crid=29RC33K2QSGLP&keywords=%E6%88%A6%E5%BE%8C%E5%8F%B2%E3%81%AE%E6%AD%A3%E4%BD%93&qid=1661180693&s=books&sprefix=%E6%88%A6%E5%BE%8C%E5%8F%B2%E3%81%AE%2Cstripbooks%2C155&sr=1-1&linkCode=li2&tag=seiban1953-22&linkId=38b690d689ee1cf452bbeb8bec19b422&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4422300512&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=seiban1953-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=seiban1953-22&language=ja_JP&l=li2&o=9&a=4422300512" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br>
<!-- 仕事の現場でサクッと使えるWordpress -->
<a href="https://www.amazon.co.jp/WordPress-%E4%BB%95%E4%BA%8B%E3%81%AE%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%82%B5%E3%83%83%E3%81%A8%E4%BD%BF%E3%81%88%E3%82%8B-%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E6%95%99%E7%A7%91%E6%9B%B8-5-x%E5%AF%BE%E5%BF%9C%E7%89%88-Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E9%A4%8A%E6%88%90%E8%AC%9B%E5%BA%A7/dp/4297111853?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=3VNWL8X0BOHCT&keywords=Wordpress&qid=1661163871&s=books&sprefix=wordpress%2Cstripbooks%2C202&sr=1-5&linkCode=li2&tag=seiban1953-22&linkId=6e326811243bb8f3d0d6a66b938a3694&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4297111853&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=seiban1953-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=seiban1953-22&language=ja_JP&l=li2&o=9&a=4297111853" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br>
<!-- HTML&CSSによるWebデザイン -->
<a href="https://www.amazon.co.jp/%E3%80%90Amazon-co-jp-%E9%99%90%E5%AE%9A%E3%80%911%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FHTML-CSS%E3%81%A8Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7-DL%E7%89%B9%E5%85%B8-Flexbox/dp/4797398892?crid=1E4O2R14FLROI&keywords=html+css&qid=1661162810&s=books&sprefix=HTML%2Cstripbooks%2C459&sr=1-3&linkCode=li2&tag=seiban1953-22&linkId=1aad03adad060f3aa67ddc46389ec8bb&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4797398892&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=seiban1953-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=seiban1953-22&language=ja_JP&l=li2&o=9&a=4797398892" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br>
<!-- Python完全入門 -->
<a href="https://www.amazon.co.jp/Python-%E5%AE%8C%E5%85%A8-%E5%85%A5%E9%96%80-%E6%9D%BE%E6%B5%A6%E5%81%A5%E4%B8%80%E9%83%8E/dp/4815607648?crid=25YA2TB9V85RM&keywords=python%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%AE%8C%E5%85%A8%E5%85%A5%E9%96%80&qid=1661244346&s=books&sprefix=python+%E5%AE%8C%E5%85%A8%E5%85%A5%E9%96%80%2Cstripbooks%2C231&sr=1-4&linkCode=li2&tag=seiban1953-22&linkId=1adec9c0fc6f5cbeaded549244df48ad&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4815607648&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=seiban1953-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=seiban1953-22&language=ja_JP&l=li2&o=9&a=4815607648" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br>
<!-- Python大全 -->
<a href="https://www.amazon.co.jp/%E3%82%B7%E3%83%AA%E3%82%B3%E3%83%B3%E3%83%90%E3%83%AC%E3%83%BC%E4%B8%80%E6%B5%81%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC%E3%81%8C%E6%95%99%E3%81%88%E3%82%8B-Python%E3%83%97%E3%83%AD%E3%83%95%E3%82%A7%E3%83%83%E3%82%B7%E3%83%A7%E3%83%8A%E3%83%AB%E5%A4%A7%E5%85%A8-%E9%85%92%E4%BA%95-%E6%BD%A4/dp/4046057548?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=1H7ECLO349L52&keywords=Python&qid=1661496106&s=books&sprefix=python%2Cstripbooks%2C158&sr=1-2-spons&psc=1&spLa=ZW5jcnlwdGVkUXVhbGlmaWVyPUFENElOTVRDUlMyNE8mZW5jcnlwdGVkSWQ9QTAyOTIzNTMzMDdJVTVGTlFGRUpOJmVuY3J5cHRlZEFkSWQ9QTNISjIzT1VZMTNZQ0gmd2lkZ2V0TmFtZT1zcF9hdGYmYWN0aW9uPWNsaWNrUmVkaXJlY3QmZG9Ob3RMb2dDbGljaz10cnVl&linkCode=li2&tag=seiban1953-22&linkId=267d98f17f271835c2891c57cac7f1d9&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=4046057548&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=seiban1953-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=seiban1953-22&language=ja_JP&l=li2&o=9&a=4046057548" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /><br>
</div><br>
amazon;
?>

次に、single.php内の必要な箇所に上記amazon.phpをインクルードします。

<div style="text-align: center;">
【Amazon Sponsor】
<?php include("lib/amazon.php"); ?>
</div>

sigle.phpをFTPでアップロードして正しく表示される確かめます。なお、PHPのインクルード関数のphpファイルは動作可能になっている必要があるようです。ここでは、echo関数を使って複数行を表示する仕組みにしてみました。このため、Amazonのサイトからコピーした文字列の終わりには必ず「<br>」を付ける必要があります。本エディターの仕様により、タブは挿入されず、消されてしまいますのでコピー&ペーストの際にはタブを挿入したほうが見栄えが良くなります。

なお、Amazonからゲットした文字列は非常に長いため、表示が若干乱れてしまいます。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう