【SANGOカスタマイズ】アドセンスを貼ったWordPressウィジェットの背景を消す

サイドバーに設置したアドセンス広告。この白い背景、気になりませんか？

それはいけない。アドセンスのウィジェット背景だけ消してしまいましょう。

STEP.1

ウィジェット番号を調べる

GoogleChromeを使ってウィジェットの個別番号を調べる方法を紹介します。

STEP.2

サンプルコードに追記する

アドセンスを貼っているウィジェットの番号を、サンプルのコードに追記します。

STEP.3

style.cssにコピペする

WordPress管理画面「テーマの編集」より、style.cssに追記します。

STEP.4

完成

特定のウィジェット背景を消す方法

ウィジェットの番号を調べる

ウィジェットの番号を調べるために、GoogleChromeを使います。

Google Chromeブラウザ「要素の検証」で、ウィジェットの番号を調べましょう。

動画で流れを確認

STEP.1

クロームブラウザで右クリック→「検証」を選択

STEP.2

変更したいウィジェットを選択して、「id="custom_html-数字"」を探す

コードをスクロールして、ウィジェットが書かれているHTML文を探します。

STEP.3

数字の部分をメモする

ここに表示された数字が、ウィジェット固有に設定された番号です。

STEP.4

準備完了

サンプルコードにウィジェット番号を追記する

先程調べた数字を、以下のコードの赤字の部分に入れます。準備はこれだけです。

div#custom_html-数字{
    background: none;
}

div#text-数字{
    background: none;
}

div#custom_html-数字,
div#custom_html-数字,
div#custom_html-数字,
div#custom_html-数字{
    background: none;
}

CSSにコードをコピペする

あとは利用しているテーマのstyle.cssに、追記しましょう。

これで、全ての設定が完了しました。消したい場所のウィジェット背景だけ、白背景が透過されます。

おまけ…アドセンス「スポンサーリンク」用CSS

PORIPUユーザー様へ「スポンサーリンク」の装飾に使っているCSSを公開します。カスタムHTMLウィジェットに以下のコードを入れて利用します。

スポンサーリンク

<p class="dfont ad-name widgettitle">スポンサーリンク</p>
<div class="adblock">☆ここにアドセンスコード☆</div>

ぽりぷ

子テーマPORIPUは、コピペするだけで使えます。

以上です。最後までお読みいただき有難うございました。

美しく居心地のよいサイトを作って、居心地のよいサイトを作っていきましょう。