Luxeritasテーマに表示させる広告の背景を消す

今回はLuxeritasテーマで広告部分(#1アドセンスLuxeritasオリジナル)ウィジェットの広告背景をコンテンツの背景と同色にして消えたように見せる方法をご紹介いたします。かなり利用範囲が限定されますが他にも応用がきくと思います。

Luxeritasテーマのカラム操作⇒「領域の分離と結合」で「サイドバーを項目ごとに分離」にしている場合、広告部分が白く縁取りをされたようになります。


白い縁取り⇒目立たせなくする

サイドバーウィジェットの場合

Luxeritas子テーマの編集 style.css コピペ

/*サイドバー右上背景色*/
#thk_ps_widget-3 .ps-wrap{
        background-color: #eaedf2;    /*背景色が#eaedf2の場合*/    
}
注意!

ウィジェットIDは個々に違いますので適宜変更が必要です。上記例では、“3”の場合です。
背景色はサイトで使用している色と合わせます。

記事一覧中央ウィジェットの場合

Luxeritas子テーマの編集 style.css コピペ

/*記事一覧中央の広告背景色*/
.posts-list-middle-widget {
        background-color: #eaedf2;
}

記事一覧下ウィジェットの場合

Luxeritas子テーマの編集 style.css コピペ

/*記事一覧下の広告背景色*/
.posts-list-under-widget {
        background-color: #eaedf2;
}

広告エリアの背景をBOXシャドーにする場合

Luxeritas子テーマの編集 style.css コピペ

/*記事一覧中央の広告背景をBOXシャドーを付ける場合*/
#list .posts-list-middle-widget {
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .13);
    border: none;
}

上記例ではページ全体が変わりますがピンポイントでウィジェット名ウィジェットIDを指定することでその要素だけ変更することができます。

Chromeブラウザでサイトを表示させ変更させたい要素の付近で右クリック「検証(I)」で簡単に調べることができます。

厳密には消してるんじゃなく背景と同じ色にしているだけだな。背景がガラモノだとダメだ。。opacityで透明度の変更をすべきだろうか・・いやそれだと


細かい男ね モテないわよ