再度ウィジェットの背景について
-
http://aiai-housing.com
の右サイドの「物件キーワード検索」と「物件検索」の2つだけ背景画像を変えたいのですが、
CSSの指定の仕方がどうしても分かりません。よろしくお願いします。
-
http://aiai-housing.com/wp-content/plugins/fudou/themes/corners2010.css?ver=4.1.1
の300行目付近#primary .widget-container h3 , #secondary .widget-container h3{ color: #666; display: block; padding: 6px 6px 6px 10px; margin: 0 0 10px 0; font-size:16px; border-radius: 4px; background: #f9f9f9; /* old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* ie */ }
において、CSSのグラデーションとして設定されているようですね。この部分を変更すれば良いはずです。
変更したい箇所のCSSを調べるにはchromeにて該当箇所を右クリックし”要素の検証”を選ぶと、利用されているCSSなどを簡単に調べられますので、一度お試しください。
`megane9988さん
ありがとうございます。
質問の仕方が悪かったですm(__)m「物件キーワード検索」と「物件検索」の2つが存在する上部2つのウィジット全体の背景の変更の仕方でした。
要素を調べて、様々な組み合わせで試していますが、変更されません。
よろしくお願いいたします。
薄紫色の部分で合ってますでしょうか
#main #primary .widget-container, #main #secondary .widget-container { border: none; background-image: url("http://aiai-housing.com/wp-content/uploads/2015/02/nav_back.gif"); }
において、
http://aiai-housing.com/wp-content/uploads/2015/02/nav_back.gif
の画像を背景色として繰り返して表示しているようですね、ご確認下さいませ。megane9988さん
ありがとうございます。
教えていただいた方法ですと、
右側ウィジット全ての部品の背景が変わってしまいます。
2つだけを変更することは可能でしょうか?何度も、済みません。
wilsherさん、ここからさきは、CSSの優先度の理解の問題です。それほど難しくないので、是非、いろいろ調べて挑戦してみてください。
該当箇所の1つは以下ですね。
<li id="fudo_search-2" class="widget-container widget_fudo_search"><h3 class="widget-title">物件キーワード検索</h3><form method="get" id="searchform" action="http://aiai-housing.com/"> <label class="screen-reader-text assistive-text" for="s">Search for:</label> <input type="text" class="field" value="" name="s" id="s" placeholder="キーワード"> <input type="hidden" value="search" name="bukken"> <input type="submit" id="searchsubmit" class="submit" value="検索"> </form></li>
に対して
#main #primary .widget-container, #main #secondary .widget-container { border: none; background-image: url("http://aiai-housing.com/wp-content/uploads/2015/02/nav_back.gif"); }
があたっています。ので
#main #primary .widget-container.widget_fudo_search { background-image: none; background-color: #ccc; }
などとすれば、変わるはずです。もう一つはこれを参考にやってみてください。
うまくいくことを、期待しています。なによりです! では、こちらの質問は解決済に変更をおねがいします。
- トピック「再度ウィジェットの背景について」には新たに返信することはできません。