問題を全て解決するに至った回答の方(1名様)には、1000ポイント進呈します。
その他の良回答の方にはも、若干のポイントを進呈します。
対象サイト:http://www.obanzaiya.com/
参考サイト:http://www.agoda.jp/asia/singapore/singapore.html
対象ブラウザ:IE
【対象サイト、左カラム、タイトル部分のCSS設定】
現状、“カテゴリー”“最近の投稿”“アーカイブ”が表示されているタイトル部分を
上記参照サイトの、左カラムタイトル部分と同じデザインで表示希望。
タイトルの文頭には、参照サイトと同じようにアイコンを入れる。
(アイコンは同じサイズであれば何でも構いません。後でこちらで変更します。)
このようにCSSを設定したいと考えております。
【対象サイト、右カラム、”価格表示>”部分の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: 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; }
cherencovさん、ありがとうございます。
2012/01/25 16:50:43すごくありがたいと思っております。修正は全く気にしておりません。
今回いただいた、スタイルシートの変更で、望んでいた形になりました。
ありがとうございます。
今後また、何か質問(というかお願いになってしまってますが・・・)があるかもしれませんが、どうぞよろしくお願いします。
本当にありがとうございました。
この質問はここで一旦終了させていただきます。
2012/01/25 16:51:32