Amazonのサーチウィジェットの追加で、謎に詰まった話。【サイズがautoだと表示されない】

どうも、おぎくぼです。

先日、私が運営しているサイトのプロコミ!に、Amazonのサーチウィジェットを追加しました。

https://procomi.herokuapp.com/

そのときに謎に詰まったのですが、解決策を検索しても出てこなかったので、同じことで悩んでいる方の参考になればと思い、記事にしました。

サーチウィジェットとは?

Amazonのサーチウィジェットはこんなやつ↓です。

Amazonのアプリやサイトにわざわざ飛ばなくても、その場で検索することができる便利な機能です。

サーチウィジェットを使用するには…

このようなAmazonが提供するウィジェットをサイトに貼れるようにするためには、Amazonアソシエイトの審査に合格する必要があります。

私は一度も落ちたことがないのですが、意外と審査で苦戦する方も多いそうです。(アドセンスは落ちまくりました。)

ブログなどのサイトを運営している方は、是非、申請してみてください。

謎の躓き

サイトにサーチウィジェットを追加しようとしたところ、謎に表示されませんでした。

今まで表示できないことがなかったので、本当に謎でした。

原因究明

謎の現象ですが、必ず原因があるはずなので、色々調べます。

サーチウィジェットは以下のようなコードを貼り付けることで表示することができます。

このコードがサーチウィジェットを呼び出し、HTMLが生成されるはずです。

そして幅、高さ共にautoを指定しているので、貼るだけで親要素内にいい感じに合わせてくれるはずです。

ですが、うまくHTMLが生成されていませんでした。

HTMLが生成されないということは、そもそもこのスクリプトの呼び出しに問題があるのでしょう。

コンソールを確認

コンソールを確認すると、こんな文字が出ていました。

There is no sufficient area available to display Contextual Search
//コンテキスト検索を表示するのに十分な領域がありません//

なんか表示できないらしい。ふむふむ。

詳しいことはよくわかりませんが、とりあえず表示ができないことがわかりました。

ウィジェットのサイズを変更してみる

表示できないときのウィジェットのサイズはautoを選択していました。

「もしかして、小さかったらいけるかな?」と考え、小さいサイズを指定したウィジェットを追加してみました。

なんと、これで表示させることに成功しました。謎ですね。

「autoならなんとかサイズ合わせられるだろ!!」(心の声)

とりあえず小さいサイズなら表示できることがわかりました。

では大きいサイズはどうでしょう?見事にこれも表示できました。んー。

結局、サイズを指定すれば表示できるということですね。

解決策

本質的な解決にはなっていないですが、自分なりの解決方法を紹介します。

手順は至ってシンプル。

1、サイズを指定したウィジェットのコードを作成、貼り付け
2、スタイルの上書き

たったこれだけ。紹介するコードをコピペするだけで解決します。

1、サイズを指定したウィジェットのコードを作成、貼り付け

サイズはなんでもいいです。

幅は後から上書きするので、高さだけ指定してください。

2、スタイルの上書き

生成されたコードのスタイルを上書きしていきます。

サーチウィジェットの外枠であるこの要素が幅を決めています。これを上書きします。

横幅いっぱいにしたいので、このコードをスタイルシートに書いてあげます。

これで解決です。

「!important」がないと上書きすることができないので注意してください。

余談ですが、私は人生で初めて「!important」を使いました。

「!important」は指定したスタイルを最優先するので、多用は厳禁です。使用する際は注意が必要です。

WordPressの方

私の場合、WordPressではこの問題が発生しないのですが、もし発生している場合は、上記のコードを「外観」→「テーマエディター」→「スタイルシート」にある、CSSファイル(style.css*名前が異なる可能性もあります)の好きなところにペーストしてください。

念のため、元のコードをコピーしてからペーストすることおすすめします。

まとめ

今回はAmazonのサーチウィジェット追加で、謎に詰まった話をしました。

なぜサーチウィジェットのサイズがautoだと表示できないのかは解決できませんでしたが、いい感じに表示する方法を見つけることができたので良しとします。

何か知っている方はこっそりと教えてください。

また、Amazonアソシエイトのウィジェットの文字化けは

これで対応できるということを、備忘録として残しておきます。(今回は使いませんでした。)

これからも楽しく学んできます、いきましょう!

ではまた。