wordpressでの、CSSの設定を教えてください。


問題を全て解決するに至った回答の方(1名様)には、1000ポイント進呈します。
その他の良回答の方にはも、若干のポイントを進呈します。

対象サイト:http://www.obanzaiya.com/
参考サイト:http://www.agoda.jp/asia/singapore/singapore.html
対象ブラウザ:IE

【対象サイト、左カラム、タイトル部分のCSS設定】
現状、“カテゴリー”“最近の投稿”“アーカイブ”が表示されているタイトル部分を
上記参照サイトの、左カラムタイトル部分と同じデザインで表示希望。
タイトルの文頭には、参照サイトと同じようにアイコンを入れる。
(アイコンは同じサイズであれば何でも構いません。後でこちらで変更します。)
このようにCSSを設定したいと考えております。

【対象サイト、右カラム、”価格表示>”部分のCSS設定】
参照サイトの右カラムにも、同じ表記がありますが、
同じように表示させるには、どのように設定すればよいでしょうか?
“>”アイコンは、サイズが同じであれば、後でこちらで変更しますので、
とりあえず何でもかまいません。

何時も質問ばかりで恐縮ですが、どうぞよろしくお願いします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2012/01/25 16:51:56
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493

ポイント1000pt
.sidebar_ul .box h3 {
  background: url("http://cdn-ak.f.st-hatena.com/images/fotolife/C/Cherenkov/20120123/20120123143758.jpg") repeat-x scroll 0 0 #F0F0F0 !important;
  border: 1px solid #CDCDCD !important;
  text-align: left !important;
  padding: 5px 0 0 10px !important;
}
.sidebar_ul .box h3:before {
  content: url("http://cdn-ak.f.st-hatena.com/images/fotolife/C/Cherenkov/20120123/20120123144227.jpg");
}

.entry-body {
  position: relative;
}
.entry-body .price {
  position: absolute !important;
  right: 0;
  top: auto !important;
  bottom: 0 !important;
}
.entry-body .price:after {
  content: url("http://cdn-ak.f.st-hatena.com/images/fotolife/C/Cherenkov/20120123/20120123150410.jpg");
}


追記:
アイコン位置の高さを合わせるにはcssだけでは無理そうなので、要素を追加する必要があります。上記のコードは忘れて下さい。

左カラムの
<h3>サイドバータイトル</h3><h3><span>サイドバータイトル</span></h3>
になるように。


右カラムの
<span class="price">価格表示></span><span class="price">価格表示>
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/C/Cherenkov/20120123/20120123150410.jpg">
</span>
に修正してから以下のCSSを適用してみてください。

.sidebar_ul .box h3 {
  background: url("http://cdn-ak.f.st-hatena.com/images/fotolife/C/Cherenkov/20120123/20120123143758.jpg") repeat-x scroll 0 0 #F0F0F0 !important;
  border: 1px solid #CDCDCD !important;
  text-align: left !important;
  padding: 10px 0 0 10px !important;
  height: 28px !important;
}


.sidebar_ul .box h3 span {
  background: url("http://cdn-ak.f.st-hatena.com/images/fotolife/C/Cherenkov/20120123/20120123144227.jpg") no-repeat !important;
  padding-left: 33px !important;
}

.sidebar_ul .box h3:before{
  content: none !important;
}

.sidebar_ul .box ul {
  border-left: 1px solid #CDCDCD !important;
  border-right: 1px solid #CDCDCD !important;
  border-bottom: 1px solid #CDCDCD !important;
  border-radius: 0px 0px 5px 5px !important;
}

.entry-body {
  position: relative;
}
.entry-body .price {
  position: absolute !important;
  right: 0;
  top: auto !important;
  bottom: 0 !important;
}

.entry-body .price:after {
  content: none !important;
}

.entry-body .price img {
  margin: 0 0 -2px !important;
  border: none !important;
}
他12件のコメントを見る
id:nobu55

cherencovさん、ありがとうございます。
すごくありがたいと思っております。修正は全く気にしておりません。
今回いただいた、スタイルシートの変更で、望んでいた形になりました。
ありがとうございます。
今後また、何か質問(というかお願いになってしまってますが・・・)があるかもしれませんが、どうぞよろしくお願いします。
本当にありがとうございました。

2012/01/25 16:50:43
id:nobu55

この質問はここで一旦終了させていただきます。

2012/01/25 16:51:32
  • id:nobu55
    cherenkovさん、ありがとうございます。
    上記コードをスタイルシートに追加して、確認してみました。

    できれば、大変恐縮なのですが、いくつか調整の仕方を教えていただきたいのですが、

    1、左カラム、タイトル前の画像が、若干文字の上に表示されているので、文字と揃って、縦中央に表示されるようにできればと思います。

    2、質問に書き忘れてしまい申し訳ないのですが、左カラムは、タイトル下の内容部分までボックス全体が枠線で囲まれるように表示できればと思います。(参照サイトのように全体が角丸の枠線で囲われる。)

    3、右カラムの“価格表示”と“>”の画像ですが、“>”が若干ずれて上に表示されるので、中央に表示されるようにできるとうれしいです。

    どうぞよろしくお願いします。

    ご回答後に、質問を終えたいと思います。
    本当にありがとうございます。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません