サイドバーｈ３にspanを設定し、ｈ３タイトルの長さ分だけ背景色をつけたい

PR 2017/5/19

このトピックには3件の返信、2人の参加者があり、最後にkamiyにより9年、 5ヶ月前に更新されました。

3件の返信スレッドを表示中

投稿者

投稿
- 2017年5月19日 1:10 AM #52584
  kamiy
  ゲスト
  こんにちは。初めてsimplicty２を知り子テーマでカスタマイズしております。
  非常に精巧な作りで驚きと期待を感じつつ壁にもぶちあたっております。
  さて、サイドバーのｈ３のタイトル文字にその長さの分だけ背景色を敷きたいのですが、
```
<div id="sidebar">
<div id="sidebar-widget">
<aside class="widget"><h3><span>ブログカテゴリー</span></h3>
```
  というようにspanを入れて、ｃｓｓで下記のようにすれ方針を立てました。
```
#sidebar h3 span{
  margin-bottom: 10px;
  font-size:18px;
  background:#29abe2;
  color:#fff;
  padding:10px;
}
```
  そこで、#sidebar h3を出力しているsidebar.phpのそれらしきところの下記にたどりついたのですが、
```
  <div id="sidebar-widget">
  
  <?php if ( is_active_sidebar( 'sidebar-1' ) ) :
    dynamic_sidebar( 'sidebar-1' );
```
  これ以降、どうすればいいのか分からずギブアップです。
  別の方法でも勿論いいのですが、
  どなたかご教示いただければありがたく存じます。
  宜しくお願い致します。
- 2017年5月19日 6:15 PM #52598
  わいひら
  キーマスター
  子テーマのfunctions.phpに以下のように記入すると、おそらくいけるのではないかと思います。
```
register_sidebars(1,
  array(
  'name' => 'サイドバーウイジェット',
  'id' => 'sidebar-1',
  'description' => 'サイドバーのウィジットエリアです。',
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title'  => '<h3 class="widget_title sidebar_widget_title"><span>',
  'after_title'   => '</span></h3>',
));
```
- 2017年5月19日 6:19 PM #52599
  
  かうたっく
  ゲスト
  
  こんにちはぁ
  
  CSSにdisplay: inline;を追記してはどうでしょうか？
- 2017年5月19日 8:02 PM #52611
  kamiy
  ゲスト
  早速のご返信ありがとうございます。
  直接知りたかったのはわいひらさんの内容で勉強になりましたが、かうたっくさんの方法であっさり解決しました。
  もっと簡単な解決方法があったような・・と思っていたのですが、そうでしたね！ありがとうございます！
  一番上のｈ３だけ上の背景色が押しつぶされたので、下記も付けたして回避しました。
```
#sidebar .widget {
    margin-top: 20px;
}
```
  御ふた型に感謝です。
投稿者

投稿