Amazon music 3か月99円で音楽聴き放題

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


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

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

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

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

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

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

概要

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

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

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

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

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

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

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

お好きなほうでどうぞ。

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

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

ここ大事

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

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

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

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

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

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

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

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

コードをCSSにコピペする

以下のコードの「XX」を上で調べた数字に書き換えます。カスタムHTML以外なら「custom_html-XX」の部分をコピペで書き換えてください。

1つだけならこれ
/*ウィジェット背景なしに*/
div#custom_html-XX{
background: none;
}
複数ならこれ
/*ウィジェット背景なしに*/
div#custom_html-XX,
div#custom_html-XX,
div#custom_html-XX{
background: none;
}

書き換えたコードをCSSに貼り付ければ終了です。

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

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

余談ですが・・・

マサオカブログ」のマサオカ様は、SANGOのカスタマイズ記事が大変参考になるのですが、この方、SANGO公認の子テーマ「PORIPU」というものも作ってらっしゃいます。

SANGO自体がかなり優秀ですしデザインも素敵なんですが、更に個性を出すためには多少のカスタマイズが必須です。

この「PORIPU」だったら面倒なカスタマイズが簡単にできて、通常のSANGOユーザーと差をつけられるのでおすすめです。

私は自分で結構なカスタマイズをしているので導入していません。あんまりカスタマイズしていない人のほうがメリットが大きいと思います。

べ、別にPORIPUなんて好きじゃないんだから!ちょっと記事の字数を増やしたかっただけなんだからね!

アフィリエイトでもないです。(あるならやりたい)

コメントを残す

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