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

tools デジタル
デジタル

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

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

トラブルの現象

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

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

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

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

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

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

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

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

解決方法

解決方法は簡単です。

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

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

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

<center><hogehoge></center>

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

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

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

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教える本格Webサイトの作り方 「いちばんやさしい教本」シリーズ | 石川栄和, 大串 肇, 星野邦敏 | 工学 | Kindleストア | Amazon
Amazonで石川栄和, 大串 肇, 星野邦敏のいちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教える本格Webサイトの作り方 「いちばんやさしい教本」シリーズ。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な...

この記事が気に入ったら
いいね ! しよう

Twitter で
Huli

IT企業で働いています。このブログではIT、キャリア、資格などについて発信しています。My opinion is my own.

Huliをフォローする
the Biztech blog

コメント

タイトルとURLをコピーしました