SANGOでウィジェットの背景色をサイトの背景色と同じに変更するカスタマイズ

SANGOでウィジェットタイトルの背景色を変更する方法は「SANGOカスタマイズガイド」に書いてありますが、ウィジェットそのものの背景色を変更する方法は書いてありません。
けれど、サイドバーに「カスタムHTML」を配置した時に、そこに入れた画像のサイズが小さいとウィジェット背景色の白が境目に出てしまいます。以下の記載はそれに対処するためのカスタマイズです。

デフォルトの状態は、左揃えで、ウィジェットに入れた画像とウィジェット枠との間の余白になっている部分が白で表示されています。

カスタム前

ウィジェットの背景色を変更するにあたり、ウィジェットそのものの背景色を単純に変更してしまうとすべてのウィジェットに影響を及ぼしてしまい、レイアウトが乱れる場合がありますので、ここに記載する手順は、「カスタムHTML」ウィジェットの直下に背景色を指定する要素を用意し、その中に本文(画像等のコード)を入れていく方法です。
 

※ウィジェット内イメージ

ウィジェットのBOX
  =背景色を指定する要素=============================

       ~画像等のコードを記述~

  ===============================================

 

背景色のカラーコード

既にBody背景色をカスタマイズしてデフォルトと異なる色指定をしている場合は、そのままカラーコードを指定すれば良いのですが、SANGOの背景色をデフォルトのまま使用している場合、カスタマイザーの画面に表示されているカラーコードをCSSに記載しても色の変更は出来ません。カスタマイザーの背景色には「#RRGGBB」と入っていますが、このコードは、そのサイトで使用されている背景色のカラーコードではないからです。

背景色のSANGOデフォルトのカラーコードは「#EAEDF2」になります。

背景色
 

MEMO
自分でカラーコードを調べる方法
 

サイト内のいずれかのページを表示して、右クリック(コンテキストメニュー)→「要素の検証」でbodyのカラーコードを調べれば、確認可能です。
 
要素の検証

  

CSSの追加

ウィジェットの背景色を変更するには以下のCSSコードを子テーマのstyle.cssに追加します。

style.css

.side-widget-ad {
	background: #EAEDF2;
	text-align: center;
}

「.side-widget-ad」は仮に付けた要素名です。サイトで使用する要素の名前に変更して下さい。背景色をデフォルト色に、位置を中央揃えに変更しています。
デフォルト背景色を使用してカスタマイズする場合のカラーコードは「#EAEDF2」です。

 

ウィジェットへの記述

画像等を差し込むカスタムウィジェットを作成する時に、新しく作成した要素「.side-widget-ad」(名称は任意)で囲んで下さい。

【例】div要素で囲んだ場合

sango_widget_color_code

 

使用前と使用後

 
カスタム前

カスタム前は、ウィジェットの余白に出来た白い背景色が気になりますが、

カスタム後

すっきりとした見た目になります。

  

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です