Escapeアーケインストレートオペラオムニアレストランパラダイスゲームおすすめ選テーブルサイト作りSANGOPhotoshopPCWindowsお問い合わせホームサイト作りSANGOSANGOでウィジェットの背景色をサイトの背景色と同じに変更するカスタマイズ2018/07/04SANGOでウィジェットタイトルの背景色を変更する方法は「SANGOカスタマイズガイド」に書いてありますが、ウィジェットそのものの背景色を変更する方法は書いてありません。サイドバーに「カスタムHTML」を配置した時に、そこに入れた画像のサイズが小さいとウィジェット背景色の白が境目に出てしまいます。以下の記載はそれに対処するためのカスタマイズです。デフォルトの状態は、左揃えで、ウィジェットに入れた画像とウィジェット枠との間の余白になっている部分が白で表示されています。ウィジェットの背景色を変更するにあたり、ウィジェットそのものの背景色を単純に変更してしまうとすべてのウィジェットに影響を及ぼしてしまい、レイアウトが乱れる場合がありますので、ここに記載する手順は、「カスタムHTML」ウィジェットの直下に背景色を指定する要素を用意し、その中に本文(画像等のコード)を入れていく方法です。※ウィジェット内イメージウィジェットのBOX=背景色を指定する要素=============================~画像等のコードを記述~===============================================背景色のカラーコード既にBody背景色をカスタマイズしてデフォルトと異なる色指定をしている場合は、そのままカラーコードを指定すれば良いのですが、SANGOの背景色をデフォルトのまま使用している場合、カスタマイザーの画面に表示されているカラーコードをCSSに記載しても色の変更は出来ません。カスタマイザーの背景色には「#RRGGBB」と入っていますが、このコードは、そのサイトで使用されている背景色のカラーコードではないからです。背景色のSANGOデフォルトのカラーコードは「#EAEDF2」になります。MEMO自分でカラーコードを調べる方法サイト内のいずれかのページを表示して、右クリック(コンテキストメニュー)→「要素の検証」でbodyのカラーコードを調べれば、確認可能です。CSSの追加ウィジェットの背景色を変更するには以下のCSSコードを子テーマのstyle.cssに追加します。center;}「.side-widget-ad」は仮に付けた要素名です。サイトで使用する要素の名前に変更して下さい。背景色をデフォルト色に、位置を中央揃えに変更しています。デフォルト背景色を使用してカスタマイズする場合のカラーコードは「#EAEDF2」です。画像等を差し込むカスタムウィジェットを作成する時に、新しく作成した要素「.side-widget-ad」(名称は任意)で囲んで下さい。使用前と使用後カスタム前は、ウィジェットの余白に出来た白い背景色が気になりますが、すっきりとした見た目になります。:WordPressスポンサーリンクSANGOでFontAwesomeの好きなアイコンをリストマーカーに指定する方法SANGOで投稿記事の日付欄が小さくなり下線が表示される現象の回避方法SANGOでアプリーチを使用する時のCSSカスタマイズこの記事を書いた人ゆきのはゲームの感想、攻略&TIPS等や、このサイトで使用しているツールことなどを載せています。コメントをキャンセルメールアドレスが公開されることはありません。4ゆきのはゲームのレビューや攻略、このサイトで使用しているツールことなどを載せています。