これまでにも記事にしてきましたAmazonJSですが、どうもスマートフォンで表示するとimgsizeオプションの値に何を指定しても"small"として扱われてしまうようです。
そのため、以下の過去記事はスマホで見ると何とも間抜けな状態となってしまい、AmazonJSで作成したショートコードをキャプチャ画像に置き換える羽目になりました＾＾；
-
-
【AmazonJS】画像サイズを変更して見やすい広告を作成する！
前回の記事にて、AmazonJSを使用したAmazonアソシエイト広告の作成を紹介しましたが、表示画像が小さい点が気になっていました。 AmazonJSのテンプレートの選択メニューでは、画像のみの表示 ...
というわけで、AmazonJSの表示をスマートフォンでもイケてる感じにしたいと思います！
imgsizeオプションが無効化される原因
AmazonJSのスタイルシートを確認してみると、スマホ表示の場合に画像サイズが最大60pxまでになっていました＾＾
対象ファイル：wp-content/plugins/amazonjs/css/amazonjs.css
114～118行目
@media (max-width: 480px) {
.amazonjs_item img {
width: 60px;
max-width: 60px;
}
あまり大きくしても見づらくなるだけですので抑止してくれているんでしょうね。
ですが、小さすぎても見づらいのでここは100pxくらいまで大きくしてみましょう。
AmazonJSのカスタマイズ
60pxとなっていた箇所を100pxに変更します。
念のため、作業前はバックアップを取っておきましょう！
修正ファイル：wp-content/plugins/amazonjs/css/amazonjs.css
114～118行目
@media (max-width: 480px) {
.amazonjs_item img {
width: 100px;
max-width: 100px;
}
ついでにimgsize=mediumをデフォルトにする
毎回ショートコードにimgsize="medium"と入力するのはさすがに面倒なので、デフォルトテンプレートをmediumImageTemplateに変更してしまいます。
修正ファイル：wp-content/plugins/amazonjs/js/amazonjs.js
修正前（89～90行目）
imageTemplate,
'{{if _ShowDefaultImage}}',smallImageTemplate,'{{/if}}',
修正後
imageTemplate,
'{{if _ShowDefaultImage}}',mediumImageTemplate,'{{/if}}',
スタイルシートやJavascriptを修正した際は一度キャッシュをクリアしましょう。
でないと古いファイル内容を読み取ってしまい、修正内容が反映されません；；
表示確認
実際にスマホで確認するのは面倒なので（！）ChromeのDeveloper Tools(DevTools)で確認します。
上はデフォルト(medium)、下はimgsize="small"を指定した際の表示内容です。
ちゃんと画像サイズを小さくしたい場合に対処できています＾＾
まとめ
今回の記事はAmazonJSのカスタマイズ記事となりましたが、本質はもっと別のところにあるような気がします。
以前の投稿ではimgsizeオプションの存在を見つけ、PC表示のみの確認で満足してしまいました。
しかし、現代はスマホユーザがPCユーザを上回る時代です。
スマートフォンでの表示確認をしておかないと、読みづらいサイトになってしまうだけでなく、今回のようにプラグイン等の動作に気付かずおかしな投稿を残してしまうことに繋がります。
WordPressの作業はどうしてもPCで行うため投稿内容の確認もPCで行ってしまいがちですが、スマホファーストを意識して心がけておかないとダメということですね。