WordPressで記事を書くとアドセンス広告がはみでる。サイズ調整方法をご紹介します。

wordpressの広告がはみ出てダサいなぁ。

広告がはみ出るのを防止策を今回は考えてみました。

WordPressのカスタマイズの際に広告がはみ出ることってありませんか?広告がはみ出ていると見えにくくなって、ブログ自体の価値が下がってしまうと感じてしまいませんか?

その嫌な思い(ストレス)を減らすために今回は、サイズの調整方法をご案内します。

ただ、正攻法ではなく私たちなりのやり方なので、ほかの方がご紹介している方法ととは異なりますのでご了承ください。

今回の結論は簡単です。

  1. CSSにサイズの上限を加筆する
  2. アドセンスの広告コード内を変更する
以上、2点になります。
それでは、下で具体的にご紹介します。

WordPressで記事を書くとアドセンス広告がはみでる。サイズ調整方法をご紹介します。

ブログをご覧頂きありがとうございます。たこみそです。

今回はこちらのツイートをもとに記事を作成しました。

WordPressの広告がはみでる現象ストレスじゃないですか? サイズ調整方法を考えねば。。
レスポンシブルなはずなのに全然レスポンシブルになってくれないのって私たちだけですか?
とりあえずCSSをいじれば解決するので、加筆します。
考えることがたくさんあるのでブログは大変です。

このブログ作成中に広告がはみ出てしまう現象を解決するために記事を作成しました。

広告は読者さんとの信頼関係を築く大切な要素です。

広告は読者さんとの信頼関係を気づくために大切に扱わないといけません。

雑に扱うと、信頼を失い二度と読者さんは戻ってきてくれません。

具体的なお話をすると、広告の貼りすぎであったり、クリックされやすい箇所に意地悪に貼り付けていると、ユーザーさんは使い勝手の悪さに苛立ってしまいます。

記事を読みにきたのに、全然思ったことができないと苛立ってしまうことは当然です。

そうなると二度と読者さんはそのブログにきてくれません

また、読者さんに戻ってきてもらえるように広告は丁寧に貼りたいですね。

ずれて貼ってしまうと勿体無いです。

(たまに私たちもずれることがあるので、気をつけております。。)

WordPress 広告がはみでる。サイズ調整方法をご紹介します。

それでは、実際に広告がはみ出た時の調整方法をご案内します。

サイズ変更は簡単なので、誰でもできます

CSSをいじれば調整できます。

今回は、私たちが使っているこのWordPressのテーマ「THE THOR」をもとに解説しますが、

基本的にCSSをコピーして貼り付けられる場所に貼り付けるだけで解決します。それでは早速実践です。

外観→カスタマイズ

追加CSSを選択

CSSを追加

CSS
ins.adsbygoogle {
max-width: 650px;
}

こちらのCSSを追加。

幅は、あとはお好みに調整してください。

調整方法は簡単で、今650と書いてる数値を半角で入力して変えるだけです。

基本的には、サイズをそこまでいじる必要はないかと。

この追加した内容を日本語で解説すると、

classでadsbygoogleと与えられたもののサイズの上限を、650までにしてね。

という意味になります。

Googleアドセンスのコードの中には、Classという(分類分け?名付け?)ものが与えられていて、

それが、「adsbygoogle」というものです。

これを指定してあげる事で、その「adsbygoogle」というクラスを与えられたもののデザインを一括で変えられるようにしています。

今回は、その大きさの上限を指定してあげたんだという認識だけあれば、問題ないです。

また、何か不具合が起こったとしても基本的には、追加したCSSを消すだけで、元に戻ります。

ぜひ、お試しください。

まとめ:WordPressで記事を書くとアドセンス広告がはみでる。サイズ調整方法をご紹介します。

いかがでしたか?

アドセンスはなんどもお伝えしている通り、読者さんの信頼を得るためにも綺麗にサイズを調整して貼り付けるべきです。

綺麗なサイトに綺麗な広告を貼り付けることで、広告を広告と思わず、クリックしてもらえる可能性もあります。

ぜひ、サイズを整えておしゃれなサイト作りをしていってください。

CSSのカスタマイズで基本的なデザインの調整ができるので、

やってみたいことがあれば、ぜひCSSをしたい内容に加えて調べてみてください。

最新情報をチェックしよう!