【WordPress】ウィジェットの広告を中央寄せにする方法【SANGO】

 

WordPressのウィジェットにアフィリエイトリンクをペーストしている方が多いと思いますが、初期設定だと広告が中央寄せにならず、見た目が悪くなります。

今回は、だれでも簡単に広告を中央寄せにする方法をご紹介します!

広告の見た目とかどうでもよくね?

しばいぬ

のどかもめ

左とか、右に寄っているとダサいと思うぞ。これ読んで直してね

広告の中央寄せってどういうこと?

中央寄せの設定をしていれば、下の画像みたいに白いエリアの丁度真ん中にきます。

ちなみに、これは当サイトのサイドバーに表示されている広告の状態です。

しかし、中央寄せの設定ができていないと・・・

こんな感じで白いエリアの左側に寄っている形になります。
ちょっと不格好で、右の白いエリアなんだよ、ってなりますよね。

 

<div>タグで中央寄せを解決

「A8ネット」や「もしもアフィリエイト」からアフィリエイトリンクをブログに貼るときは、下の赤枠で囲まれているような素材をコピーして、ウィジェットに貼り付けると思います。

今回は、この素材をhtmlのコードの<div>で囲って中央寄せを実現します!

 

WordPressテーマのスタイルシートに中央寄せクラスを貼り付ける

WordPress管理画面の 「外観 > テーマエディター」 と進み、使用しているWordPressのスタイルシートを表示させます。

スタイルシートに以下のコードをそのままコピペしてください。

HTML
.adsense {
 padding : 10px ;
 text-align: center;
}

<div>のクラスとして使用します。中身は中央寄せのみです。
CSSについて、気になる方は、以下のページを参考にしてください。

参考 CSSで中央寄せの方法いろいろメモQiita

 

 

<div>でリンクを囲む

「外観 > ウィジェット」から中央寄せをしたい広告などを表示させます。

そして、もともと入力されていた<a href=” で始まるアフィリエイトリンクの外に以下のようにコードを書きます。

HTML
<div class="adsense">
~~アフィリエイトリンク~~
</div>

私の場合だと、以下の画像のようになります。
<div class=”adsense”>と</div>で囲みます。

入力が完了したら、保存をして、実際の広告を表示させてみてください。

中央寄せになっていれば、成功です!

先ほどのスタイルシートのCSSを変更すれば、表示を変更できますので、いろいろ試してみてください。

参考 CSSで中央寄せする9つの方法(縦・横にセンタリング)サルワカ

 

あとがき

無事に中央寄せができましたか?<div>の使い方を覚えれば、いろんなところで応用できますので、ぜひ参考にしてください。

やっぱり広告は表示が良くないとダメですよね~。

できた。これで広告収入増えるかな?

しばいぬ

のどかもめ

アクセス数が一桁じゃ無理やろ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA