Simplicityの特徴 › フォーラム › Simplicityについての質問 › サイドバーのCSSが反映されません。
- このトピックには11件の返信、2人の参加者があり、最後に
マグマグにより10年、 7ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年3月8日 11:55 PM #37308
マグマグ
ゲストsimplicity1.9.3を使用しています!
サイドバーの「最近のコメント」などのタイトルの表示をカスタマイズしたいです!子テーマのスタイルシートの一番下に以下のコードを追加しました。
#sidebar h4 {
font-size:20px;
border-bottom:5px solid #FFA500;
padding:10px 0;
}更新しても反映がされないです。
キャッシュ系のプラグインはクリアして停止しています。
ブラウザのキャッシュもクリア済みです。
photonも停止しました。
ご教授お願い致します! -
2016年3月9日 12:55 AM #37314
Hidekichi
ゲストカスタマイザーで何かしらサイドバーに対して色とか付けられてますか?
普通は質問の内容だけでスタイルできると思うんですけれども。寝ログは1.9.3が使われていて、サイドバーの見出しを見てみましたが特別何かしら特別なものは見当たりませんでした。
もしくは、
#sidebar .widgettitle { /*何かしら*/ }とか
-
2016年3月9日 11:40 AM #37318
ミントット
ゲストこんにちは。
また、わいひらさん、常連さんのご回答はもちろんとして、様々な質問にも大変お世話になっています。
いつもありがとうございます。さて、サイドバーのウィジェットのタイトルは、h4ではなく、h3なのではないでしょうか?
このCSSで試しましたら、PC、スマホ、タブレットのサイドバーのタイトル全てにオレンジの下線が出ました。#sidebar h3 {
font-size:20px;
border-bottom:5px solid #FFA500;
padding:10px 0;
}(1.9.3でなくて、Simplicity2で確認しています。)
-
2016年3月9日 3:27 PM #37319
fan154
ゲストミントットさん。
初めまして、こんにちは。
「1.9.3でなくて、Simplicity2で確認しています。」
マグマグさんがお使いのsimplicity1.9.3、1系では、”sidebar h4″でした。
Simplicity2で、”sidebar h3″に変更されています^^*マグマグさん。
初めまして^^
試してみたところ、ちゃんと表示されたので、

サイドバーウジェット系のプラグイン等入れていませんか?
もしも入れられていたらそれも止めてみて下さい。
(数年前ですが、、、サイドバーのスタイルを邪魔するプラグインに遭遇した経験があるので)すいません、この場をお借りして。
Hidekichiさん、はじめまして! いつもご活躍を拝見しています。
Hidekichiさんの書きこみは「凄いやぁー」と思いつつ分かる範囲で(笑
勉強させて頂いています。いつかご挨拶を。と思っていました。
「いつもためになる書き込みをありがとうございます!!(多感謝)」 -
2016年3月9日 3:33 PM #37320
fan154
ゲスト連投すいません。画像が貼れなかったので。参考の為、もう一度投稿させて下さい。
これで貼れなかったら去ります(苦;

FCだからとか??一応リンクも。
http://goodcute.web.fc2.com/h3-sample.jpg
失礼しました。 -
2016年3月9日 8:56 PM #37327
-
2016年3月9日 9:01 PM #37328
わいひらキーマスター>マグマグさん
ミントットさん(訂正)
お使いのサーバーがエックスサーバーであれば、mod_pagespeedが有効になっているということはないでしょうか?
参考:Simplicity動作不良時のガイドラインもし、そうでない場合は、実際のサイトのURLからいろいろ設定を見させてよいただいてよろしいでしょうか。
実際のページを見ると、ある程度原因が分かります。(わからない可能性もあります) -
2016年3月9日 9:23 PM #37330
ミントット
ゲストああーっ、そうでしたか!
質問者さんには、大変失礼いたしました…
申し訳ございません;;;たまたまサイドバーをカスタマイズし出したところで、分かるかもと思ったんです。
見出しタグは変更ないだろうからと言う思い込みで書き込みしていました。
ほんとうにごめんなさい。
でも、優しいご指摘をいただき、感謝です。そういうことがあるとは気づいていなかったので、1系からそのまま使っている自分のCSSも見直してみようと思います!
変な書き込みをして恥ずかしかったですが、逆に良かったのかも…!では失礼します。
-
2016年3月9日 10:21 PM #37332
-
2016年3月10日 12:27 AM #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から確認しても反映されているので、このまま触らずにしておく予定です。
どうもありがとうございました。 -
2016年3月10日 5:04 AM #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の話なんですが、ちょっと横道にそれました。
-
2016年3月12日 6:06 PM #37421
マグマグ
ゲストお返事が遅くなり申し訳ありません。
#sidebar .widgettitleに関しては親テーマ、子テーマ共に表示自体がありませんでした。
CSSの反映はFTPでwp-content/cache/のキャッシュを強制的に削除したら正常になりました。
ありがとうございました。
-
-
投稿者投稿
- トピック「サイドバーのCSSが反映されません。」には新しい返信をつけることはできません。