前回フォントを見やすく直しましたが
記事タイトルの大きさが気になりはじめましたので
もう少し小さくしようかと思い親テーマのCSSを見てみました。
スマホ表示では気になりませんがPCで見るとタイトルが主張しすぎかなぁと思いましたので・・・
このテーマ「twentyfifteen」はスマホ等でも見やすいようにレスポンシブデザインになっていますが
分岐点は7箇所、8段階もあるデザインとなってます。
16.1 Mobile Large 620px
@media screen and (min-width: 38.75em)
16.2 Tablet Small 740px
@media screen and (min-width: 46.25em)
16.3 Tablet Large 880px
@media screen and (min-width: 55em)
16.4 Desktop Small 955px
@media screen and (min-width: 59.6875em)
16.5 Desktop Medium 1100px
@media screen and (min-width: 68.75em)
16.6 Desktop Large 1240px
@media screen and (min-width: 77.5em)
16.7 Desktop X-Large 1403px
@media screen and (min-width: 87.6875em)
それぞれに記事タイトルの「entry-title」が設定してありましたので
面倒でしたがそれぞれ変更することにしました。
スマホ表示はそのままに
タブレット表示とPC表示を少し小さくしました
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
@media screen and (min-width: 38.75em) { } @media screen and (min-width: 46.25em) { } @media screen and (min-width: 55em) { .entry-title, .widecolumn h2 { font-size: 35px; font-size: 3.5rem; } } @media screen and (min-width: 59.6875em) { .entry-title, .widecolumn h2 { font-size: 28px; font-size: 2.8rem; } } @media screen and (min-width: 68.75em) { .entry-title, .widecolumn h2 { font-size: 32px; font-size: 3.2rem; } } @media screen and (min-width: 77.5em) { .entry-title, .widecolumn h2 { font-size: 35px; font-size: 3.5rem; } } @media screen and (min-width: 87.6875em) { } |
今後のカスタマイズのことも考えて全ての分岐点を子テーマに追記しておきました。
見出しのサイズも変えたいですしね