Tomo回答ポイント 1000ptウォッチ

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

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

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

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

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

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

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• Cherenkov2012/01/23 14:50:00

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

  スター

  • 

    14件のコメントを見る

  • Tomo 2012/01/23 15:58:47

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

    スター

  • Tomo 2012/01/23 16:02:55

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

    スター

  • Cherenkov 2012/01/23 17:11:58

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

    スター

  • Cherenkov 2012/01/24 02:01:39

    「価格表示＞」を画像にするのも手ですけどね。

    スター

  • Tomo 2012/01/24 18:49:16

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

    スター

  • Tomo 2012/01/25 09:33:02

    
    

    Cherenkovさん、ご回答ありがとうございます。
    最後にいただいた回答についてなのですが、右カラムの要素変更は、Wordpressの投稿画面に直接コードを書き込んでいるので、変更可能なのですが、左カラムのタイトルのHMTLを変更（

    *****

    ) なのですが、
    ウィジェットで表示している部分なので、wordpressの管理画面上で
    function.php内のコードを下記のように変更したのですが、
    変更更新すると、エラーが発生して、サイト自体にアクセスできなくなってしまいます。
    修正すべき箇所が、以下で正しいでしょうか？
    
    左カラムのタイトルを

    *****

    にする
    方法をアドバイスいただけると助かります。
    
    ～修正したコード
    foreach ( $widgetized_area as $widget_name ) :
    register_sidebar(array(
    'name' => $widget_name,
    'before_widget' => '

    • ',
      'after_widget' => '
    ',
    'before_title' => '

    ',
    'after_title' => '

    ',

    スター

  • Cherenkov 2012/01/25 10:23:27

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

    スター

  • Cherenkov 2012/01/25 10:36:51

    （最後の手としてjavascriptでspanを挿入する方法もあります）

    スター

  • Tomo 2012/01/25 15:42:03

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

    スター

  • Cherenkov 2012/01/25 15:48:13

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

    スター

  • Cherenkov 2012/01/25 16:06:24

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

    スター

  • Cherenkov 2012/01/25 16:10:16

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

    スター

  • Tomo 2012/01/25 16:50:43

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

    スター

  • Tomo 2012/01/25 16:51:32

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

    スター

その他の回答

この質問へのコメント

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

質問の情報

登録日時

2012-01-23 13:55:47

終了日時

2012-01-25 16:51:56

回答条件

1人5回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者112日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者112日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者17時間前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者117時間前
• 内定してほしいポケモンはいますか？匿名質問者17時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ