ブログのCSSについて

質問

はてなブログで大見出しのデザインを変えたくて
.entry-content h3 {
padding: 4px 10px; color: #111; background-color: #f0f0f0; border-left: 8px solid #2d70a4;
}
これをコピペしてCSSに貼り付けました。
しかし…文字が黒になって、もう少し小さくなるはずなんですがどこを直したらいいんでしょうか？

このサイトをお手本にしてます。
https://dearbrother.hatenablog.com/entry/blog-midashi

回答No.5

retorofan

色の設定箇所が間違っています。
color: black #111;

ここは、
color: black;
または、
color: #111;
のどちらかに変更してみてください。

回答No.4

4017B

＞スタイルの 150% の部分
すいません！偉そうな事を講釈たれながら自分もミスっていました。これは回答例の…

font-size: 200%;
line-height: 100%;

～の部分に記述した数字の部分ですね( 200% とか 100% の部分)。変更幅が小さいと見た目に変化が感じられない場合もありますので、とりあえず最初は 500% みたいに極端に大きな(或いは小さな)数値を代入してみて、それで実際に画面上に変化が生じているかどうか確認してみてください。

それで画面に変化が見られない様でしたら。その場合はCSSを指定する部分が間違っているか、或いは別の箇所で指定記述されている他のCSSが干渉して効果を打ち消している可能性が高いです。その場合は、現時点だけでの少ない情報だけではこれ以上の有用なアドバイス等を回答する事は困難となります。質問者が実際に編集している当該webページのHTMLとCSSの全てを公開してもらわないと、具体的な助言や技術的アドバイスは難しいと思います。

補足

中々いい感じになりました！助かりました。ありがとうございます(_ _)

回答No.3

4017B

とりあえず…

.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #2d70a4;
/* 以下の部分を追記: */
font-size: 200%;
line-height: 100%;
}

～こんな感じにしてみて。その後は新規に追記したスタイルの 150% の部分の数字を色々と増減させて、どの程度の変化が起こるか実験してみてください。

P.S.
CSS(スタイルシート)の記述は面倒でも、設定項目を1つ1つずつ改行させて1行単位の箇条書きみたいな形式にして置いた方が良いですよ。質問者みたいに1行にまとめて書くと、後から見直して修正するのが大変になるので。

実際、添付画像の質問者が最初に記述したCSSは…

color:black #111;

～という風に記述されてて、色指定の "black" と "#111" が二重に指定されています。だからバグってるんじゃないかな？こういう初歩的なミスも改行して箇条書きにして置けば、後から見直して発見しやすいですが。

例文みたいに全部まとめて1行に続けて記述してしまうと、熟練者でも非常に解読に手間取り、或いは誤読を誘発する遠因になるだけなのでオススメできません。

補足

ご丁寧にありがとうございます。気をつけます。
ところで新規に追記したスタイルの 150% の部分の数字とはどこの事ですか？

回答No.2

sdk358

でしたら、あなたのサイトを確認していないのでなんとも言えませんが、たぶpaddingが上書きされてないのだとおもいます。

下記のように重要視する『! important』をつけてためしてみてください。

padding: 4px 10px !important

補足

CSSは下の方の画像の左を見てもらうとわかると思います。（小さくてすみません）

回答No.1

sdk358

こちらのcssを貼り付けたら、変化はあったのでしょうか？

そもそもスタイルが効いてないのかなと思いまして。

補足

はい。小さいですが下の右の画像のとおり、みだしのスタイルはかわりました。