子テーマの際のナビのcss編集について

PR 2015/3/18

このトピックには10件の返信、2人の参加者があり、最後にかなさんにより11年、 1ヶ月前に更新されました。

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

投稿者

投稿
- 2015年3月17日 3:17 PM #23798
  かなさん
  ゲスト
  子テーマの際のナビのcss編集について教えてください。
  
  style.cssの以下の部分を編集しているのですが、変更されません。
  background-colorなどを変更したいのですがこちらではないのでしょうか？
```
/************************************
** メニュー（menu）
************************************/
#navi ul{
  position: relative;
  clear: both;
  margin-bottom: 0;
  border: 1px solid #ddd;
  background-color:#F7F7F7;
  border-radius:3px;
  margin:0;
  padding:0;
  width:100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
```
  firebugで見ていると以下の部分なのかとも思うのですが、
  こちらを変更する際にどのように変更すればよいかわからないです。
  
  #navi, #navi ul, #navi ul.sub-menu, #navi ul.children {
  
  お手数ですがご回答のほどよろしくお願いします。
- 2015年3月17日 4:03 PM #23818
  
  わいひら
  キーマスター
  
  これまでの経験上、そういった設定が反映されないのは、ブラウザのキャッシュか、エックスサーバーの場合は、mod_pagespeedのキャッシュが原因の場合が多いです。
  詳しくは、以下に書いてあるので、チェック項目を試してみてください。
  動作不良時のガイドライン
  
  それでも、ダメな場合は問題ページのURLからソースを見ないと何とも言えないです。
- 2015年3月17日 4:19 PM #23823
  
  かなさん
  ゲスト
  
  まずは、チェック項目確認してみます。
- 2015年3月17日 4:26 PM #23824
  
  かなさん
  ゲスト
  
  ちなみに、修正する部分は上記のソースの場所で問題ないでしょうか？
- 2015年3月17日 5:14 PM #23828
  
  かなさん
  ゲスト
  
  子テーマに以下を追加したら変わりました。
  こちらの記載方法は問題ないでしょうか？
  
  #navi,
  #navi ul.sub-menu,
  #navi ul.children {
  background-color: #f5f5f5;
  border-color: #f5f5f5;
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
- 2015年3月17日 5:55 PM #23830
  
  わいひら
  キーマスター
  
  あと、もし、テーマカスタマイザーで色を変更している場合は、全てデフォルトに戻しください。
  テーマカスタマイザーでの設定は、何よりも優先されます。
  詳しくは以下の「スタイルの優先度」項目の参照。
  Simplicityのスキン機能の仕様
  
  問題ないかは、問題ないと思いますが、どのような変更したいのか詳しくわからないので、その設定が合ってるのかは、ちょっとわからないです。
  背景色を変えるには、最初に書いたCSSセレクタの変更でいいと思います。
- 2015年3月18日 8:58 AM #23886
  
  かなさん
  ゲスト
  
  ありがとうございます、style.cssのに記載することでなんとか変更出来ました。
- 2015年3月18日 11:51 AM #23906
  
  かなさん
  ゲスト
  
  改めて修正した部分を確認するとやはり問題点があり、改めて確認させてください。
  
  ■修正したい箇所
  ・グローバルナビの全体的背景色
  ・グロバルナビのメニューボタンの背景色
  ・グローバルナビのメニュー文字のサイズ
  
  ■キャプチャー1
  https://www.dropbox.com/s/an530kvf54q79gk/01.gif?dl=0
  　テーマカスタマイザーのみで変更した場合
  　メニュー部分のみが変更されてnavi全体の背景色は変わらない
  
  ■キャプチャ－２
  https://www.dropbox.com/s/plz620uv9adv7w7/02.gif?dl=0
  　style.cssに以下を追加した場合
  　navi全体としてはこの形にしたいのですが
  　パンくずリストのテキストアイコンが非表示
  　画面右上のソーシャルボタンが非表示となりました。
  
  —————
  
  /************************************
  ** メニュー（menu）
  ************************************/
  #navi ul li a{
  font-size:18px;
  display: block;
  padding: .3em .7em;
  color:#111;
  text-decoration:none;
  z-index:99;
  }
  
  #navi,
  #navi ul,
  #navi ul.sub-menu,
  #navi ul.children {
  background-color: #c0c0c0;
  border-color: #c0c0c0;
  
  —————
  
  テーマカスタマイザーのみですべて変更出来ればと思っていたのですが
  難しそうなのでstyle.cssに変更箇所を記載しようとしたのですがうまくいきませんでした
  お手数おかけ致しますがご確認頂けないでしょうか。
- 2015年3月18日 1:34 PM #23917
  
  かなさん
  ゲスト
  
  firebugでnavi部分を見ると以下のようになっております。
  
  http://アドレス.com/wp-content/cache/head-cleaner/css/76645d180866e1ffeeeb29e3be024867.css（361行目）
  ————————————
  
  #navi, #navi ul, #navi ul.sub-menu, #navi ul.children {
  background-color: #111;
  border-color: #111;
  }
  
  ————————————
  
  firebug上で上記の色番号を変更すると希望通り全体が変わります。
  しかし、これをどこに指定してあげたらいいのかという感じです。
- 2015年3月18日 5:27 PM #23922
  
  わいひら
  キーマスター
  
  テーマカスタマイザーのみで変更した場合
  　メニュー部分のみが変更されてnavi全体の背景色は変わらない
  
  テーマカスタマイザーの「レイアウトの設定（全体・リスト）」の
  「グローバルナビを横幅いっぱいにする（要グローバルナビ色設定）」をオンにすればできるかと思います。
- 2015年3月18日 9:48 PM #23953
  
  かなさん
  ゲスト
  
  ありがとうございます。
  
  無事思い通りのデザインになりました。
投稿者

投稿