あふぃり〜ちどっとこむ

アフィリエイトを始めるための準備と注意点(備忘録)

AdSense レスポンシブ広告余白背景カラーの変更

      2017/07/30

 

Adsense広告はレスポンシブを設定してますが

ワードプレスのテーマを使って立ち上げた新しいサイトで

“レスポンシブ広告の余白背景部分のカラーが黄色くやたら目立つ”

他を台無しにしてしまって

モチベーションがぐんと下がるよねこれ現象がまきおこりました笑

 

がぼ〜〜〜ん(´-`).。oO(( ´  –  ´ )

AdSenseレスポンシブの余白カラー

 

 

が がぼ〜〜〜ん(´-`).。oO(( ´  –  ´ )

AdSenseレスポンシブの余白カラー 2

 

 

 

上記のように例えば真ん中の丸い画像がアドセンスの広告だった場合で

レスポンシブレクタンングルの枠設定だとします

そうすると上記画像のように、横の余白部分が左右黄色く強烈に主張して目立っているでは

ありませんか現象が起こりました

そしてそのサイトは基盤がダークなので、その中の黄色の

ヌケの良い事………. 際立っていましたよ笑

 

他のダークサイトではこうならなかったので、何かアドセンスコードを取得する際に

カスタマイズしてしまったのかもしれないと思いましたが、

アドセンス側の設定では背景色やテキストカラーなどは編集出来ますが、

余白部分の設定項目がないことに気付き、

これはサイトテンプレの編集が必要くさいなと感じ、

色々調べてみました

 

 

〜〜項目〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

☆AdSenseレスポンシブ広告の余白部分背景色を変更するには

☆お好みのカラーコードを調べるには

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜

 

 

 

☆AdSenseレスポンシブ広告の余白部分背景色を変更するには

結論を言うと

テーマの Style.css を編集する

わりと前半の行の、

ins {
        background: #fff9c0;
	text-decoration: none;
ins {
        background: #fff9c0;
  text-decoration: none;

 

 のカラーコード部分を、好みのカラーコードに変える

 

私はダークカラー基盤のサイトでしたので、真っ黒にしてみた笑

つまり、

ins {
        background: #000000;
	text-decoration: none;
ins {
        background: #000000;
  text-decoration: none;

 


 とした

 

これだけでO.K

もし反映されない場合はキャッシュを削除して確認するか、

ブラウザを変えて確認してみて下さい

例えば白基盤のサイトで、余白も白にしたい場合は

カラーコードを#ffffff に 

グレーなら#bfbfbf などに変えるだけということです

 

 

 

☆お好みのカラーコードを調べるには

ワードプレス投稿画面から確認出来る

 

 

投稿画面エディターのテキスト色、▼をクリックし

エディターテキスト色 

 

 

カスタムをクリック

カスタム

 

 

 

好きな色を選択するとカラーコードが表示されるので、それをコピペする(#は付けます)

色コード検索

 

 

 

そんなところ。。。。

 

AdSense 広告コードは <ins> で指定されてます

<ins> は Insert の略で、後から追加された部分ということを示しているそうです

なので、Styleシートの <ins> 部分の指定をし直す

ということですねぃ………

 

(AdSenseコードの簡単一括管理やレスポンシブ対応に関してはこちらを参照下さい)

 

以上 あふぃり〜ちび備忘録でした

では 楽しいアドセンスライフをば!

 

"サーバー契約・ASP登録・ドメイン取得” の
注意点や選び方をまとめてみましたので
こちらもチェックしてみて下さい☆
★レンタルサーバー選び方
注意点
はこちら

★登録必須ASPの内容
ピックアップ
はこちら
★独自ドメイン取得
注意点
はこちら

 

 

 - AdSenseについて, css・html について ,

スポンサーリンク



スポンサーリンク



Message

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

three × one =

  関連記事

AdSense 広告の編集・マッチング・設置場所注意点

  アドセンスの広告設置にあたって せっかく設置できるのですから、 少 …

タグを記憶させておけるWPプラグン AddQuicktag

  記事を書く時毎回使うタグってありますよね それを毎回書いてると面倒 …

Twenty Eleven で抜き枠&アイキャッチ画像で閲覧表示させるには?

    Twenty Eleven でデフォルトのままだと、全文表示で …

SeeSaaブログの広告を消す〜アドセンス申請〜

  アドセンス申請するとき デフォルトの広告を消しておかなければならな …

アドセンスの広告をwordpressで一括管理できて更新されてるプラグイン

“Quick Adsense” 並みにアドセンス管理が便利な更新されてるプラグイン、WP QUADS – Quick AdSense Reloaded

リンク付き画像を簡単設置〜Image Widget〜

    サイドバーなどにリンク付きの画像を設置したい時ってあ …

アフィリエイトの仕組み

アフィリエイトとは、自分のサイトやブログに、広告を載せて

その広告から、閲覧者が商品を購入したり、

サービスに登録したり、クリックしたりした場合に、

報酬を得られる仕組みです

アドセンス広告を簡単に一括管理して表示する(Quick Adsenseとレスポンシブコードを使う)

  〜〜追記〜〜〜〜〜〜〜〜〜 ※2016.4.12月現在、&#822 …

アドセンス狩り対策と許可サイトの設定

  ☆アドセンス広告設置後の注意点   1*アドセンスコード …

二次審査にむけてのSeeSaaブログ広告表示の準備

  ☆アドセンス広告サイズを選択する   アドセンス一次審査 …