サイドバーのカスタマイズについて（サイドバーのタグを詳しくしりたい）

PR 2017/9/25

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

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

投稿者

投稿
- 2017年9月23日 4:44 PM #56055
  ムライ
  ゲスト
  こんにちは。
  simplicty２を知り子テーマでカスタマイズしております。
  
  現在サイドバーをカスタマイズしているのですが
  
  http://webcommu.net/
  こちらのサイトを見てサイドバーがおしゃれだと思い真似使用と思い
```
#sidebar h3 {
background: #007aae;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) inset;
border-top: dashed 1px white;
border-bottom: dashed 1px white;
padding: 8px 10px;
  border-radius: 4px;

    color: #fff;
    font-weight: bold;
font-size: 15px;
box-shadow: 0px 0px 0px 5px #007aae;
}
```
  と記入したのですが
  border-radius: 4px;が破線まで丸くなってしまうのでちょっと見た目が不格好になって
  しまうのと、box-shadow: 0px 0px 0px 5px #007aae;を適用するとグラデーション効果が無くなってしまうのでこれを修正したいのですが、参考サイトのソースを見ると
```
.widgettitle {
background: #e55937;
color: #fff;
font-size: 1em;
padding: 3px 0;
border-radius: 3px;
margin-bottom: 0.75em;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) inset;}
.widgettitle span{
border-top: 1px dashed #FFF;
border-bottom: 1px dashed #FFF;display:block;
width: 100%;
height: 100%;
padding: 0.75em 0.8em;
}
```
  とありspanのところに破線をしているので破線は丸くならない？と思うのですが、Simplicityではこのspanに類するタグはどれでしょうか？
  
  どなたかご教示いただければありがたく存じます。
  よろしくお願い致します。
- 2017年9月23日 5:17 PM #56059
  
  わいひら
  キーマスター
  
  実際のページのにURLを提示して、状態を見せてもらってよいでしょうか。
  
  ※テーマカスタマイズに関する質問は、カスタマイズ対象ページのURLと対象部分の詳細を書き込んでください。
- 2017年9月23日 7:36 PM #56063
  
  ムライ
  ゲスト
  
  申し訳ありません。
  ブログはこれです。
  http://infosumaho.wp.xdomain.jp/
  
  今サイドバーで詰まってます。
- 2017年9月23日 10:24 PM #56067
  かうたっく
  ゲスト
  spanのところに破線をしているので破線は丸くならない？と思うのですが、Simplicityではこのspanに類するタグはどれでしょうか？
  
  phpにspanを追記すれば実装できそうです。
  
  Simplicity2: widget-areas.php (lib/widget-areas.php)をダウンロード。
  
  パス：（/domain.com/public_htmlブログの入っているフォルダ）/wp-content/themes/simplicity2/lib/widget-areas.php
  
  libフォルダを作成して、ダウンロードしたwidget-areas.phpをいれる。
  
  そのlibフォルダ毎、子テーマにアップロードする感じです。
  /wp-content/themes/simplicity2-childフォルダ内
  
  widget-areas.phpにspanを追記
```
<?php //ウイジェットエリア用の関数

/////////////////////////////////////
// ウィジェットエリアの指定
/////////////////////////////////////

register_sidebars(1,
  array(
  'name' => __( 'サイドバーウイジェット', 'simplicity2' ),
  'id' => 'sidebar-1',
  'description' => __( 'サイドバーのウィジットエリアです。', 'simplicity2' ),
  '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>',
));
```
  before_titleのh3タグのあとにspanを
  after_titleのh3終了タグ前にspan終了タグを追記
  
  spanにclass属性が必要な場合は付けてください。もっといい方法もあるかも知れませんが、これでも実装はできますよ。
- 2017年9月24日 2:17 PM #56071
  
  ムライ
  ゲスト
  
  >かうたっくさん
  子テーマにlib/widget-areas.phpをアップロードしたのですがうまくいきません。
  
  http://infosumaho.wp.xdomain.jp/wp-content/uploads/2017/09/1.png
  
  画像のとおりspanを追記したのですがソースを見るかぎりspanが無いような気が・・・
  
  cssは`#sidebar h3 {
  background: #007aae;
  padding: 8px 10px;
  color: #fff;
  font-weight: bold;
  font-size: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2) inset;
  }
  
  #sidebar span {
  border-top: dashed 1px white;
  border-bottom: dashed 1px white;
  box-shadow: 0px 0px 0px 5px #007aae;
  
  }`
  としています。
  
  原因が分かりましたらご教授いただきたいです。
- 2017年9月24日 3:45 PM #56074
  
  かうたっく
  ゲスト
  
  子テーマで上書きできると思ったらできませんでした。。
  スミマセン・・・。
  
  親テーマに直接書き込むとspanが表示され、カスタマイズできます。
  
  https://wp-simplicity.com/suport/topic/lib%E3%83%95%E3%82%A9%E3%83%AB%E3%83%80%E5%86%85%E3%81%AE%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%8C%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E%E3%81%A7%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4/
- 2017年9月24日 9:59 PM #56079
  
  ムライ
  ゲスト
  
  >かうたっくさん
  
  親テーマに直接書き込んだら出来ました。
  
  ありがとうございます！
投稿者

投稿