質問: こんにちは、質問をさせてください。 WordPress (バージョン:4.8) テーマはストーク(バージョン: 1.1.2)を使用中です。 https://open-cage.com/stork/ よろしくお願いします。 見出しのデザインを下記のようにstyle.cssに記述しましたが、見出し文字の左側を空けるpaddingだけが反映されません。 見出しの左上にリボンが付くデザインですが、リボンが先頭文字とかぶってしまいます。 色々なブラウザで見ましたが、全て反映されません。 html~はテキストのみで何も指定しておりません。 何が悪いかご教示お願いします。 回答よろしくお願いします。 h3{ font-size:90%; color: #fff; background: #A37E58; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; position: relative; padding:0.4em 0.4em 0.4em 3em; } h3:before, h3:after { content: ""; position: absolute; display: block; } h3:before{ top: -0.1em; left: 0.5em; width: 20px; height: 23px; padding: 5px 0 0 0; background: #9FD6D2; text-align: center; } h3:after{ top: 0.8em; left: 0.5em; width: 0; height: 0; border: 10px solid; border-color: transparent #9FD6D2; }
回答: この情報だけではわかりませんが、他にも何かがh3に効いているのかもしれません。 上記の方がおっしゃっているように、開発者ツールで確認するのがよいと思います。 それでもわからない時、私の場合は周辺の背景にわざと色をいれてみたり(floatなど何かがかぶってないか見るため)して検証します。恥ずかしながら、いまだにキャッシュが原因だったりもします。 通常は、書かれていないことは起こらない、、はずなので、根気よく調べてみてください。