サイドバーウィジェットの背景を消す(透過する)方法【WordPress】

ごきげんよう、バビです。

ほぼ毎日見ているブログ「マサオカブログ」様を見ていたら素晴らしいカスタマイズがあったのでやってみます。

ちょっとだけアレンジして簡素化してみました。

リンク広告を貼ってる人は特におすすめです。

参考 アドセンスを貼ったWordPressウィジェットの背景を消す方法マサオカブログ

実は全然気にしてなかったんですけど、言われたら気になりだしました。
あわせて読みたい

このカスタマイズの概要

要するにこういうことです。

リンク広告の背景透過

私のサイトの背景色は薄めなので見づらいですが、白背景のリンク広告だとすっきりして見やすくなりますね。

私も知らなかったのですが、WordPressでは、作成したウィジェットごとに固有の番号が振られているんだそうです。

これを指定したコードをCSSに記述して背景を透過させる、という手順です。

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

マサオカブログ」様ではGoogle Chromeブラウザ「要素の検証」で調べる方法が紹介されています。

もう一つの方法があるのでそちらもご紹介しておきます。

お好きなほうでどうぞ。

まずは管理画面を開いて、「外観」をクリックします。

WordPressメニュー「外観」をクリック

下に「外観」内のメニューが表示されるので「ウィジェット」をクリックします。

WordPressメニュー「外観」から「ウィジェット」をクリック

ここ大事

「外観」にカーソルをもっていくと吹き出しでメニューが表示されますが、そこからでは調べられないので、必ず「外観」をクリックして下に表示される「ウィジェット」から開いてください。

こういう画面が開きます。↓

WordPressウィジェット画面

右上の「表示オプション」を押します。

WordPressウィジェット画面「表示オプション」

アクセシビリティモードを有効にする」をクリックします。(「無効にする」になっていたらすでに有効なのでそのままでOK)

アクセシビリティモードを有効にする

番号を調べたいウィジェットの「編集」を押します。

ウィジェットの編集をクリック

ウィジェットが開いたらURLの中を見てください。

editwidget=」の後ろの「cutsom_html-XX」が必要なコードと番号です。

テキストウィジェットだったら「text-XX」、カテゴリーだったら「categories-XX」となります。

URLにウィジェット番号が出ている

コードをCSSにコピペする

あとはマサオカブログ様で紹介されているCSSコードの赤字のところを調べた数字に書き換えて貼り付ければ終了です。

もちろんサイドバー以外の場所のウィジェットにも適用可能です。

すっきりして目立つようになるのでアドセンスのクリック率もあがるかもしれませんね。

[/box]

その他のカスタマイズ

カスタマイズ記事一覧