WordPressウィジェットにバナーhtmlを入れた際の表示乱れを解決する方法

デジタル

2020.05.14

WordPressでサイトを作っていると、サイドバーなどに画像やリンクを入力したいことがあります。

以前、Wordpressのウィジェットを使って埋め込みhtmlを表示させようとしたときにハマったので、解決法を掲載しておきます。

トラブルの現象

例えば、Amazonアソシエイトから、「Amazon Music Unlimited」メンバー紹介プログラムの埋め込みバナーを貼るとしましょう（他のサイトでも、htmlタイプのバナーリンクであれば同じはずです。）

下のような四角いバナーが出れば成功です。

さて、通常の方法でウィジェットにhtmlを追加してみます。

WordPressのダッシュボードから、[外観]→[ウィジェット]と進みます。

ウィジェットタイプ一覧の下の方にある[テキスト]をサイドバーへとドラッグして、AmazonでコピーしてきたURLを貼り付けます（URLはダミー化してあります）。

これを保存して、記事を見てみるとこうなります。

このように、このやり方ではバナーが途切れてしまって見栄えがよくありません。

ちなみに、これはサイドバーの高さやバナーサイズを指定し直しても修正できませんのでここに注意してください。

解決方法は簡単です。

ウィジェット選択にて、[テキスト]ではなく[カスタムHTML]を使います。配置方法は[テキスト]と全く同じですが、HTMLの文法が間違っているとエラーになり保存できませんので注意してください。

今度は切れずにバナーを貼ることができました。

いま、バナーがやや左に寄っていますが、ウィジェットの中でhtmlが書けるので

<center><hogehoge></center>

という形で中央寄せタグで囲ってあげればサイドバー内で中央寄せすることも可能です。

単純ですが[テキスト]ウィジェットを使うことに慣れているとハマりやすいので注意しましょう

今回は以上です。お読みいただきありがとうございました。