人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

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

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


●質問者: Tomo
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●1000ポイント ベストアンサー
.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;
}

Tomoさんのコメント
cherenkovさん、ありがとうございます。 上記コードをスタイルシートに追加して、確認してみました。 できれば、大変恐縮なのですが、いくつか調整の仕方を教えていただきたいのですが、 1、左カラム、タイトル前の画像が、若干文字の上に表示されているので、文字と揃って、縦中央に表示されるようにできればと思います。 2、質問に書き忘れてしまい申し訳ないのですが、左カラムは、タイトル下の内容部分までボックス全体が枠線で囲まれるように表示できればと思います。(参照サイトのように全体が角丸の枠線で囲われる。) 3、右カラムの“価格表示”と“>”の画像ですが、“>”が若干ずれて上に表示されるので、中央に表示されるようにできるとうれしいです。 どうぞよろしくお願いします。 ご回答後に、質問を終えたいと思います。 本当にありがとうございます。

Tomoさんのコメント
この質問が解決したら、もう1件の質問の方も終了しようと思います。あちらの質問はHTMLを直接書き込もうと思います。

Cherenkovさんのコメント
あー価格表示の方はimgではなく背景になるようにしたほうがいいですかね。

Cherenkovさんのコメント
「価格表示>」を画像にするのも手ですけどね。

Tomoさんのコメント
回答ありがとうございます。追記で回答をいただいているのに気が付きませんでした。 価格表示は画像にしても問題ありません。まずは上記コードを適用させていただき、改めてお知らせさせていただきます。

Tomoさんのコメント
Cherenkovさん、ご回答ありがとうございます。 最後にいただいた回答についてなのですが、右カラムの要素変更は、Wordpressの投稿画面に直接コードを書き込んでいるので、変更可能なのですが、左カラムのタイトルのHMTLを変更(<h3><span>*****</span></h3>) なのですが、 ウィジェットで表示している部分なので、wordpressの管理画面上で function.php内のコードを下記のように変更したのですが、 変更更新すると、エラーが発生して、サイト自体にアクセスできなくなってしまいます。 修正すべき箇所が、以下で正しいでしょうか? 左カラムのタイトルを<h3><span>*****</span></h3>にする 方法をアドバイスいただけると助かります。 ?修正したコード foreach ( $widgetized_area as $widget_name ) : register_sidebar(array( 'name' => $widget_name, 'before_widget' => '<li id="%1$s" class="box %2$s">', 'after_widget' => '</li>', 'before_title' => '<h3><span>', 'after_title' => '</span></h3>',

Cherenkovさんのコメント
修正方法はそれで正しいはずです。エラーはなんと表示されるのでしょう。 こちらでデフォルトのテーマ「twentyeleven」で確認してみましたが、エラーはでませんでした。お使いになっているテーマやプラグインと絡んでの不具合かもしれませんね。

Cherenkovさんのコメント
(最後の手としてjavascriptでspanを挿入する方法もあります)

Tomoさんのコメント
cherenkovさん、ありがとうございます。 エラーはサーバーのエラーと表示されます。 この件については、別件ではてなで質問してみたいと思います。

Cherenkovさんのコメント
<span>追加しないでもアイコンと高さを合わせる方法があったのでちょっとまってください。

Cherenkovさんのコメント
どうコードを提示するのが一番作業しやすいですかね…。 何度も修正させてしまいすいません。 今現在の状態に対して、高さを合わせるために必要な部分だけ書いてみます。 .sidebar_ul .box h3:before { に vertical-align: -5px; margin-right: 5px; を追加。 .entry-body .price:after { に vertical-align: -2px; を追加。

Cherenkovさんのコメント
(わからなくなったら) 最初に提示したコードに上記のコードを追加して、角丸&ボーダーを追記分から抜き出すイメージ。

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

Tomoさんのコメント
この質問はここで一旦終了させていただきます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ