目指せ連載!! ボウリング漫画への道

サイドバーに設置した広告の余白を消す方法【SANGOカスタマイズ】

余白除去アイキャッチ

神経質な私

Wordpressのウィジェットでサイドバーに広告を設置した場合、広告によっては背景との間に気になる余白が発生することがある。

ああああ、もう気になってしょうがない!余白を消してピッチリ広告を貼りたい。そんな人のための方法です。

前回の「関連コンテンツユニットをサイドバーに設置する方法」なんかでも余白が発生する場合があるから、今回の方法は覚えておきましょう。

ちょっと見づらいですけど、広告周りの白い余白が透明になって背景のグレーと馴染んでるのがわかりますよね。

方法は簡単です。いってみましょう。

方法はCSS追記

コピペしてCSSに追記するだけなんで1分もあれば終わります。まずは以下のコードをコピー

ウィジェットの背景を透明に
.widget_custom_html {
  background-color: transparent;
}

次に、「ダッシュボード」から「カスタマイズ」へ。「追加CSS」をクリックしてコードを貼り付けて完了。お疲れさまでした。

追加CSS 背景透明 余白 ウィジェット

SANGOでの注意点

私のワードプレステーマは「SANGO」なんですが、少し注意が必要です。

「SANGO」はおしゃれなプロフィールウィジェットが作れるんですけど、その説明文が白で、この追加CSSで背景を透明にすると説明文の背景の白も消えてしまうんです。

sangoプロフィール余白

こういうことです。結局、私のスキルでは解決できませんでした。

切実マン

解決方法を募集しております!

解決しました(追記)

イズミケイタ

↑公式カスタマイズガイドのコメント欄に方法が書かれていた。やはりあの質問コーナーは宝の山。悩みのほとんどが眠ってるからちょいちょい掘りに行く。言われた通りやったら解決しました。

詳しい手順はPORIPUでおなじみマサオカブログさんが記事がされている。複数の広告を一括で指定できるのを知った。ありがたや。

ウィジェット広告の余白を消す方法まとめ

ブログを始めたらサイドバーに広告設置したくなりますよね?

で広告設置したら余白が気になりだして、調べたら今回の方法にたどり着きました。綺麗に広告が表示されるようになって満足、満足……

のはずが、現在使ってません。

前述した「SANGO」の問題と広告を天秤にかけ、「SANGO」のプロフィールウィジェットを優先しました。

他にも理由があって、まとめると…

  1. サイドバーに広告を設置してもほとんどクリックされない
  2. 広告の読み込みに時間がかかる
  3. モバイルファーストでサイドバーは非表示
  4. SANGOのプロフィールウィジェットに干渉してしまう
  5. アドセンスだけ余白を消す方法もある

もろもろを考えてサイドバーには広告自体を設置するのやめたんです。でも、CSS自体は覚えておいて損はないハズ。

もしかしたら今後「関連コンテンツユニット」をサイドバーに設置するかもしれない。ワンチャンある。

今はまたサイドバーにも広告貼っている。ブログはデザイン悩んでる時間も楽しいよね。