サポート » 使い方全般 » 再度ウィジェットの背景について

  • 解決済 wilsher

    (@wilsher)


    http://aiai-housing.com
    の右サイドの「物件キーワード検索」と「物件検索」の2つだけ背景画像を変えたいのですが、
    CSSの指定の仕方がどうしても分かりません。

    よろしくお願いします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • 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などを簡単に調べられますので、一度お試しください。
    `

    トピック投稿者 wilsher

    (@wilsher)

    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
    の画像を背景色として繰り返して表示しているようですね、ご確認下さいませ。

    トピック投稿者 wilsher

    (@wilsher)

    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;
    }

    などとすれば、変わるはずです。もう一つはこれを参考にやってみてください。
    うまくいくことを、期待しています。

    トピック投稿者 wilsher

    (@wilsher)

    megane9988さん

    ありがとうございます!!!
    変更できました♪♪♪

    なによりです! では、こちらの質問は解決済に変更をおねがいします。

    トピック投稿者 wilsher

    (@wilsher)

    変更しました。
    お世話になりました!!!

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「再度ウィジェットの背景について」には新たに返信することはできません。