PR WordPress

AFFINGER5をカスタマイズ!バナーの位置を中央に表示させたい【重要】

2020年5月15日

  1. HOME >
  2. WordPress >

AFFINGER5をカスタマイズ!バナーの位置を中央に表示させたい【重要】

2020年5月15日

 

アフィリエイト広告を貼っているんだけど、バナーが左側によってしまう…。コツを知りたい。
男性
男性

 

こんな悩みを解決します。

 

沢山の方のブログを拝見しますが、バナー広告が左右に寄ってしまっている場合があります。

ブログは見た目がすべてではありませんが、見た目が気になる読者がまったくいないわけではありません。

 

実際ぼくは見た目気になりますし、あまりに雑な感じがすると「信用できない」とすら感じます。

 

見た目が悪いだけで離脱されるユーザー、実は多いんです。
はや
はや

 

今回はバナー広告(バナー画像)が左右に寄ってしまっている原因とキレイに見せる解決方法を紹介します。

 

AFFINGER5をカスタマイズ!バナー広告が左右に寄っているとかっこ悪い

AFFINGER5をカスタマイズ!バナー広告が左右に寄っているとかっこ悪い

ワードプレスを利用している場合、ウィジェット(おもにサイドバー)を使ってASPから配布されているあなた専用のURLを貼り付けてブログに表示していますよね。

 

たしかにそれだけで、広告は表示することができます。

 

  • ASPと、バナー広告を貼り方についてはこちら

【入門】ブログで収益化をする方法!ワードプレスとASPの併用がかなり稼げます

 

ですが、サイズが縦長(120×600)などの場合、バナーが下の画像のようにかたよってしまうことがあります。

 

  • パソコンでの表示例

 

  • スマホでの表示例

 

ブログは見た目がすべてではありませんが、ユーザーの見易さも考慮したバナーの張り方も熟知しておくとよいでしょう。

 

バナーを中央に表示する方法はタグの追記のみ

バナーを中央に表示する方法はタグの追記のみ

まずはタグを記述していない場合のウィジェットです。

これだけで広告は表示されますが、上述したように、広告は左寄せになってしまいます。

 

そこで、広告のコードの前後に、<Center></Center>(実際は半角英数字で入力)タグでバナー広告のコードを囲います。

 

中央に揃えば見た目もバッチリ

中央に揃えば見た目もバッチリ

パソコン、モバイルでそれぞれ中央表示になったか確認します。

 

  • パソコンでの表示

 

  • スマホでの表示

 

バッチリできました!
はや
はや

 

AFFINGER5をカスタマイズ!バナー広告は中央配置で見た目をカッコよく(まとめ)

この手法はAFFINGER5をはじめどんなテーマでも使える基本的なテクニックです。

 

タグを設定しても変化がない場合、ブラウザキャッシュ、ワードプレスのプラグインのキャッシュ(キャッシュプラグインを使用している場合)をクリアして再度表示してみてください。

 

それでも改善されない場合は、テーマで強制されている可能性もありますのでご注意ください。

 

最後までお読みいただきありがとうございました。

 

記事の監修・執筆者

ENGI WORKS
ENGI WORKSVPSエンジニア
✅サイト運用者は大手電機メーカー勤務 ✅サーバー系、ネットワーク系の保守・運用・設計・構築・セールスと多岐に渡る経歴を持つ ✅エンジニア歴20年 ✅詳細画像や操作など細部に渡る記事執筆に定評有り ✅VPSのことならどんなことでもご質問ください。✨VPSをひとりでも多くの人に…✨

-WordPress
-,

2
0
ご質問などお気軽にどうぞ!お待ちしています。x