サイドバーのCSSが反映されません。

Simplicityの特徴 › フォーラム › Simplicityについての質問 › サイドバーのCSSが反映されません。

  • このトピックには11件の返信、2人の参加者があり、最後にマグマグにより10年、 7ヶ月前に更新されました。
11件の返信スレッドを表示中
  • 投稿者
    投稿
    • #37308
      マグマグ
      ゲスト

      simplicity1.9.3を使用しています!
      サイドバーの「最近のコメント」などのタイトルの表示をカスタマイズしたいです!

      子テーマのスタイルシートの一番下に以下のコードを追加しました。

      #sidebar h4 {
      font-size:20px;
       border-bottom:5px solid #FFA500;
      padding:10px 0;
      }

      更新しても反映がされないです。
      キャッシュ系のプラグインはクリアして停止しています。
      ブラウザのキャッシュもクリア済みです。
      photonも停止しました。
      ご教授お願い致します!

    • #37314
      Hidekichi
      ゲスト

      カスタマイザーで何かしらサイドバーに対して色とか付けられてますか?
      普通は質問の内容だけでスタイルできると思うんですけれども。

      寝ログは1.9.3が使われていて、サイドバーの見出しを見てみましたが特別何かしら特別なものは見当たりませんでした。

      もしくは、

      #sidebar .widgettitle {
        /*何かしら*/
      }

      とか

    • #37318
      ミントット
      ゲスト

      こんにちは。
      また、わいひらさん、常連さんのご回答はもちろんとして、様々な質問にも大変お世話になっています。
      いつもありがとうございます。

      さて、サイドバーのウィジェットのタイトルは、h4ではなく、h3なのではないでしょうか?
      このCSSで試しましたら、PC、スマホ、タブレットのサイドバーのタイトル全てにオレンジの下線が出ました。

      #sidebar h3 {
      font-size:20px;
      border-bottom:5px solid #FFA500;
      padding:10px 0;
      }

      (1.9.3でなくて、Simplicity2で確認しています。)

    • #37319
      fan154
      ゲスト

      ミントットさん。
      初めまして、こんにちは。
      「1.9.3でなくて、Simplicity2で確認しています。」
      マグマグさんがお使いのsimplicity1.9.3、1系では、”sidebar h4″でした。
      Simplicity2で、”sidebar h3″に変更されています^^*

      マグマグさん。
      初めまして^^
      試してみたところ、ちゃんと表示されたので、

      サイドバーウジェット系のプラグイン等入れていませんか?
      もしも入れられていたらそれも止めてみて下さい。
      (数年前ですが、、、サイドバーのスタイルを邪魔するプラグインに遭遇した経験があるので)

      すいません、この場をお借りして。
      Hidekichiさん、はじめまして! いつもご活躍を拝見しています。
      Hidekichiさんの書きこみは「凄いやぁー」と思いつつ分かる範囲で(笑
      勉強させて頂いています。いつかご挨拶を。と思っていました。
      「いつもためになる書き込みをありがとうございます!!(多感謝)」

    • #37320
      fan154
      ゲスト

      連投すいません。画像が貼れなかったので。参考の為、もう一度投稿させて下さい。
      これで貼れなかったら去ります(苦;
      ビタミンカラーでいい感じですね
      FCだからとか??一応リンクも。
      http://goodcute.web.fc2.com/h3-sample.jpg
      失礼しました。

    • #37327
      アバター画像わいひら
      キーマスター

      #37319
      画像の部分は修正しておきました。

    • #37328
      アバター画像わいひら
      キーマスター

      >マグマグさん ミントットさん(訂正)
      お使いのサーバーがエックスサーバーであれば、mod_pagespeedが有効になっているということはないでしょうか?
      参考:Simplicity動作不良時のガイドライン

      もし、そうでない場合は、実際のサイトのURLからいろいろ設定を見させてよいただいてよろしいでしょうか。
      実際のページを見ると、ある程度原因が分かります。(わからない可能性もあります)

    • #37330
      ミントット
      ゲスト

      ああーっ、そうでしたか!
      質問者さんには、大変失礼いたしました…
      申し訳ございません;;;

      たまたまサイドバーをカスタマイズし出したところで、分かるかもと思ったんです。
      見出しタグは変更ないだろうからと言う思い込みで書き込みしていました。
      ほんとうにごめんなさい。
      でも、優しいご指摘をいただき、感謝です。

      そういうことがあるとは気づいていなかったので、1系からそのまま使っている自分のCSSも見直してみようと思います!
      変な書き込みをして恥ずかしかったですが、逆に良かったのかも…!

      では失礼します。

    • #37332
      アバター画像わいひら
      キーマスター

      ああ!すいません、レスを返す相手のお名前を間違えてしまいました;
      僕の、#37328のレスは、マグマグさんに対してのものでした;失礼しました。
      修正しておきました。

    • #37335
      マグマグ
      ゲスト

      お返事ありがとうございました。
      皆様色々とアドバイスありがとうございました。

      >Hidekichiさん
      #sidebar .widget{
      margin-bottom: 45px;
      }

      このコードが入っていました。
      中身を削除しても変わらずでした。

      >fan154さん
      サイドバーに関係するウィジェットは入れていないです。

      >わいひらさん
      mod_pagespeedはOFFでした。

      色々触っていて一応出来ましたので報告です!
      原因は今でもわかりません。

      #sidebar h4 {
      font-size:20px;
       border-bottom:5px solid #FFA500;
      padding:10px 0;
      }

      ↓

      #sidebar h4{
      font-size:20px;
      border-bottom:5px solid #FFA500;
      margin-bottom: 10px;
      }

      font-sizeとborder-bottomの位置を入れ替えたら反映されました。
      もう一度元に戻すとやはりダメで再度入れ替えたら、先ほどは反映されたのにダメになってしまったりと・・・。
      子テーマの記述を消して親テーマに直接書き込んだら反映されたりと訳が分かりませんでした。
      {}内のスペースをそろえてみたり(意味無いと思いますが)したら反映されることもありました。

      最終的には親テーマにコードを書き込んで反映されている感じです。
      今は他PCから確認しても反映されているので、このまま触らずにしておく予定です。
      どうもありがとうございました。

    • #37341
      Hidekichi
      ゲスト

      ブラウザに関しては、デベロッパーツールの設定で、disable cacheにチェックを入れておいて、パネルが開いてる間はキャッシュさせない状態にしておいてからF5などでリロードすると良いかと思います。
      またキャッシュプラグインは念の為、停止してからftpでwp-content/cache/かと思いますが、このディレクトリの中身を全部削除してしまうなどの強制的な方法が必要なものもありますので注意です。

      つまり、光回線の設定などと同じで、接続する順序などが異なると思わぬトラブルに逢ってしまうというようなことが起こったりします。
      ブラウザのキャッシュをクリアしてサイトにアクセスすると以前のキャッシュがまだそこにあるわけですから新たにキャッシュされたりします。この状態でプラグインのキャッシュをクリアした場合、キャッシュ自体はクリアしても、例えば元に戻すためにtmpファイルがあったとしたら、「ブラウザにキャッシュ読み込むようにあるじゃん、あれ?キャッシュファイル無いじゃん、tmpから復元。ドーン」なんて流れが無きにしも非ず。

      まぁ通常は無いかと思いますが、あるかもしれないのでひとまずブラウザはキャッシュさせない状態で操作するほうが良いわけです。プライベートウィンドウとかシークレットモードとかはこういう時に使うべきなんでしょうね。

      > font-sizeとborder-bottomの位置を入れ替えたら反映されました。
      これは通常はありえません。どちらから書いても違う要素に対してスタイルしているわけですから、cssの順序は関係ないかと思います。もしあるとしたらキャッシュと関係しているとしか考えられなかったりもします。
      他の原因もあるかも知れませんけれども。

      例えば、#sidebar h4{font-size:20px;border-bottom:5px solid #FFA500;margin-bottom: 10px;}これでもよいわけです。改行や、スペースは特に関係ないかと思います。もちろん#sidebar h4の間のスペースは開いてないといけませんが。

      > #sidebar .widget{
      > margin-bottom: 45px;
      > }

      #sidebar .widgetではなく、#sidebar .widgettitleです。.widgettitleで指定すると良い場合というのは、例えばh4がh3になってもh2であってもそのclassが.widgettitleであれば関係なく適用できるという所です。
      仮に、

      #sidebar .widgettitle {
        background-color: #333;
        color: #fff;
      }

      こうすれば、背景が濃いグレー、白文字で表示されるはずです。
      また、話は全然関係ない部分になりますが

      #sidebar .widget{
        margin-bottom: 45px;
      }

      に関しては、

      #sidebar .widget:last-child {
        margin-bottom: 0;
      }

      こんな感じで、一番最後のmargin-bottomを0にすることでスタイルが美しくなります。これはどんなスタイルでもそうですが、

      .test p {
        margin-bottom: 5px;
      }

      こうなっていると、.testのブロックの中のpは下に5pxのマージンができます。pが複数あった場合、

      .test
      p
      5px
      p
      5px
      /.test

      こうなりますよね?最後の5pxは無い方が.testに仮にpadding:10pxなどが仕込んである時に、上・左・右辺は10pxなのに、下辺だけ15pxのスペースができます。pのマージンと.testのpaddingです。これはあまり美しくありません。よって、

      .test p:last-child {
        margin-bottom: 0;
      }

      を追加するわけです。これは#sidebarの.widgetにも言えます。話は.widgettitleの話なんですが、ちょっと横道にそれました。

    • #37421
      マグマグ
      ゲスト

      お返事が遅くなり申し訳ありません。

      #sidebar .widgettitleに関しては親テーマ、子テーマ共に表示自体がありませんでした。

      CSSの反映はFTPでwp-content/cache/のキャッシュを強制的に削除したら正常になりました。
      ありがとうございました。

11件の返信スレッドを表示中
  • トピック「サイドバーのCSSが反映されません。」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)