THE THOR ザ・トール【 AdSense広告】をキレイに表示 ” センター揃え編”

2019-09-282020-05-16

当ページのリンクには広告が含まれています。

新しくなった AdSense広告は左側に寄りません？

AdSense広告は出来ることならキレイに貼りたいですよね。画面いっぱいのAdSense広告はキレイに表示されるけど、一回り小さい広告は左詰めで表示されてしまう。

今までのAdSense広告であればmarginやtext-alignでセンター配置が出来たのに効かない。これは困った。

広告の乱れは収益の乱れ

当サイトではこの症状が出ていません。別サイトのAdSense広告に症状が出ました。前回の修正も当サイトではなく別サイトでした。サイトの違いは1カラムで作っている当サイト、別サイトはサイドバーありの2カラム。大きな違いはこれくらいなのでやはりカラム関係が怪しいとにらんでいます。

AdSense広告は iframe ?

新しくなったAdSense広告はiframeが使用されていて今まで以上に問題が起きやすい・・・

という情報を何処かで見ました。

今までiframeを使っていなかったのか？

iframeとは？

iframeだとなぜ？

などなど細かいことはさっぱりわかりませんが、iframeに対応したセンター配置の対処をしたらAdSense広告の表示がキレイにできるようになりました。

ホント、細かいことはわからないので参考程度、実践する場合は自己責任にてお願いします。

[wpap service=”with” type=”detail” id=”4797395249″ title=”本当によくわかるHTML&CSSの教科書シンプルで、デザインの良いサイトが必ず作れる”]

THE THOR ザ・トール【 AdSense広告】をキレイに表示 ”センター揃え編”

まず症状の再確認。

小さいAdSense広告が左寄せになり右側に余白ができる
画面100%サイズのAdSense広告の場合は問題なし
divで囲みstyleでmarginやtext-alignを指定しても効かない

上記の症状に対処します。

AdSense広告のコードにクラスを追加

AdSense広告のコードにクラスを付けるコードを追加します。普段使用しているアドセンス広告のコードにクラスを以下のようにして追加。

※クラス名はわかりやすい名前を各自付けてください。

<div class=”center_adsense”>
〜 AdSense広告コード〜
</div>

実際のサンプル

<div class=”center_adsense”>
<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– ディスプレイ広告スクエア –>
<ins class=”adsbygoogle”
style=”display:block; min-width:200px; max-width:1200px; width:100%; height:100px;”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxxxxx”
data-ad-slot=”xxxxxxxxxxxxx”
data-ad-format=”auto”
data-full-width-responsive=”true”></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

付けたクラスにセンター配置のcssを適用

追加cssを利用してさきほど設定したクラスにセンター配置を指定

操作手順
外観 → カスタマイズ → 追加css

cssのコードは以下の通り。

/* iframeセンター寄せ*/
.center_adsense{
    display: block;
    margin: auto;
}

これで小さなAdSense広告もセンター配置されました。ﾊﾞﾝｻﾞｰｲ！

小さなAdSense広告が表示されないと確認できないのが大変でしたw

あとがき

AdSense広告の表示の乱れは様々な要因があるので各々しらみつぶしに調べていくしかないかな〜と思っています。

僕のサイトと同じ症状の人は、上記方法によって解決するかもしれません。が、あくまで参考、自己責任でお願いします。

THE THOR 記事一覧

この記事が気に入ったら
フォローしてね！

Follow @karaagebow1214

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

ブログテーマ選びについて

この記事はもともと「THE THOR」で作成した過去記事ですが、現在は「SWELL」に移行してブログを運営しています。実際に両方を使った経験から、テーマ選びに迷っている方へ。

THE THOR（ザ・トール）も今なお魅力的！
洗練されたデザインと、プラグインなしでも完結する圧倒的な多機能さは健在です。「クラシックエディターの操作感が馴染んでいる」「カチッとしたクールなサイトを作りたい」という方には、根強いファンがいる実力派テーマです。
THE THOR（ザ・トール）の詳細を見る
THE THORには最新の正統後継テーマ「GOLD BLOG」がある！
最新のブロックエディターに完全対応した正統後継テーマ「GOLD BLOG（ゴールドブログ）」も登場しています。THE THORの遺伝子である圧倒的なSEO強さやデザイン性を引き継ぎつつ、今のWordPressに最適化されているため、トール派の操作感を崩したくない方には間違いなくおすすめ。
後継テーマ「GOLD BLOG」の詳細を見る
自由な操作性や書きやすさを重視するなら「SWELL」も最高！
興味本位で購入してあったSWELLに移行しました。簡単に美しい装飾ができ、ページの表示速度も非常に優秀です。ブログ運営の効率を上げたい、デザインに迷う時間を減らしたいという方に。さすが有料テーマで最も選ばれている大人気テーマという感じで楽しく使用しています。
圧倒的に使いやすい「SWELL」を公式サイト