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

2 min 7 views
余白除去アイキャッチ
イズミケイタ

イズミケイタ

漫画描いてます。日常をコマ割りに。
描き殴れ手直しはその後だ。いろんな種類の漫画をアップしていくぞ。
Beauty is in the eye of the beholder.

FOLLOW

[say img=”https://kitsunepublishing.com/wp-content/uploads/2017/12/prof.jpg” name=”神経質な私”]Wordpressのウィジェットでサイドバーに広告を設置した場合、広告によっては背景との間に気になる余白が発生することがある。

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

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

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

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

方法はCSS追記

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

[codebox title=”ウィジェットの背景を透明に”]

.widget_custom_html {
  background-color: transparent;
}

[/codebox]

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

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

SANGOでの注意点

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

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

sangoプロフィール余白

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

[say img=”https://kitsunepublishing.com/wp-content/uploads/2017/12/prof.jpg” name=”切実マン”]解決方法を募集しております![/say]

解決しました(追記)

[say img=”https://kitsunepublishing.com/wp-content/uploads/2017/12/prof.jpg” name=”イズミケイタ”]↑公式カスタマイズガイドのコメント欄に方法が書かれていた。やはりあの質問コーナーは宝の山。悩みのほとんどが眠ってるからちょいちょい掘りに行く。言われた通りやったら解決しました。

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

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

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

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

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

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

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

[list class=”ol-circle li-accentbdr acc-bc-before”]

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

[/list]

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

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

[say img=”https://kitsunepublishing.com/wp-content/uploads/2017/12/prof.jpg” name=””]今はまたサイドバーにも広告貼っている。ブログはデザイン悩んでる時間も楽しいよね。[/say]

イズミケイタ

イズミケイタ

漫画描いてます。日常をコマ割りに。
描き殴れ手直しはその後だ。いろんな種類の漫画をアップしていくぞ。
Beauty is in the eye of the beholder.

FOLLOW

カテゴリー:
関連記事