【SANGO】サイドバーウィジェットの余白を消す方法【広告の背景透過】

SANGOユーザーなら「カスタムHTML」というウェジェットで広告を表示していると思います。
しかし、デフォルトの設定では広告を貼った際に余白ができてしまうはずです。

こんな具合に。わかるかな?

もちろんラージスカイスクレイパーサイズの広告も左右に余白が入ってます。

SANGOユーザーにはわかると思います。
HTML初心者な僕は、この余白がいくら調べても消せなくてずっと放置状態でした。

しかし、ついに打開したので同じようなSANGOユーザーへ共有します。

SANGOカスマイズガイドのコメントを見よ

昨今、SANGOユーザーが増えてきて、検索すればあらかたのカスタマイズ方法はわかるんですが、どうしてもわからない場合ってあると思います。

そんな時は、「SANGOカスタマイズガイド」の知りたいカテゴリについているコメントを見てみましょう。

意外と同じようなことで悩んでいる方がコメントしてたりします。今回は、そのコメントに助けられました。

LINK SANGOカスタマイズガイドSANGOカスタマイズガイド

ウィジェット設定のコメントページに解決策があった

サルワカさんに聞いてみようかなっとウィジェット設定ページのコメント欄を流し読みしてたら、同じような方がコメントしておりました。


僕と同じ悩みだ!!
それに対して、解決策をきちんとサルワカさんが解答していました。サルワカさんありがとう。

サイドバーウィジェットの余白を消してみよう

サルワカさんに習ったことをさっそく試してみましょう。

「カスタムHTML」ウィジェットで、設定した広告の背景は以下のコードを子テーマのCSSに追記します。
これで、背景が透過され余白が消えた状態になります。

コード
.widget_custom_html {
 background-color: transparent;
}

しかし、このコードを追加すると「カスタムHTML」で設定している他ウィジェットの背景も透過されてしまいます。
例えば、プロフィールを「カスタムHTML」で設定している場合、プロフィール欄の背景が透過され、あられもない姿になります。

ブラウザの検証機能を使って「div id」を探そう

背景を透過したい「カスタムHTML」の上で、右クリックしてメニューの検証を選択。
下記のような画面になると思います。

このいっぱいコードが書かれた場所からあるコードを探します。
こんなやつ。

コード
<div id="custom_html-17" class="widget_text widget widget_custom_html">

見つけられたでしょうか?
このコードのdiv idで指定されている名前を使うことで、その「カスタムHTML」だけの背景を透過することができます。

上記の場合は、下記のようなコードになります。
これを子テーマのCSSへ追記しましょう。

コード
#custom_html-17 {
 background-color: transparent;
}

MEMO
設定したら、ブラウザのキャッシュクリアをお忘れずに!

まとめ

これで綺麗に余白を排除し、広告が表示されたと思います。
SANGOを使ってからずっと悩んでいたものが案外あっさり解決してくれて嬉しかったです。

みなさんもなにか困ったらコメント欄を覗いてみましょう。

コメントを残す

メールアドレスが公開されることはありません。