デフォルト見出しは 見出し、小見出し、順見出しは こんな感じ
色指定の仕方も関係するけれど 改善の余地がありそう。
参考にしたまとめサイトは
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
いろいろな見出しのデザインがありましたが、3種まとまった雰囲気のデザインは載ってないので、まずは見出しについて考えてみました。
先頭の一文字だけを大きくして色を変えてみるが、テンション上がらない・・・・
色を大好きな黄色にして、下線も付けてみたら可愛くなった。💓
見出しのカスタマイズはHTML編集でやってもいい気もするけど、Blogger初心者としては CSSの追加でやる方が気持ち的に楽なので、CSSの追加だけで変更します。
見出し系には左端に黄色で統一 全部太字になるんだけど好みで太字は全部外してノーマルにしました。
見出し
見出しのカスタマイズ用 CSSの追加です。
#single-content h2{
font-size: 2rem;
border-bottom: solid 1px yellow;
border-left: solid 6px yellow;
font-weight: normal;
}
#single-content h2:first-letter{
font-size: 2.5rem;
font-weight: bold;
color: yellow;
}
font-size: 2rem;
border-bottom: solid 1px yellow;
border-left: solid 6px yellow;
font-weight: normal;
}
#single-content h2:first-letter{
font-size: 2.5rem;
font-weight: bold;
color: yellow;
}
小見出し
小見出しのカスタマイズ用 CSSの追加です。
#single-content h3{
font-size: 2rem;
font-weight: normal;
padding: .5em;
background: $(brand.color);
margin-top: 2em;
border-bottom: solid 1px yellow;
border-left: solid 6px yellow;
}
font-size: 2rem;
font-weight: normal;
padding: .5em;
background: $(brand.color);
margin-top: 2em;
border-bottom: solid 1px yellow;
border-left: solid 6px yellow;
}
準小見出し
準小見出しのカスタマイズ用 CSSの追加です。
#single-content h4{
font-weight: normal;
padding: .5em .8em;
margin-bottom: .5em;
margin-top: .5em;
border-left: solid 6px yellow;
}
font-weight: normal;
padding: .5em .8em;
margin-bottom: .5em;
margin-top: .5em;
border-left: solid 6px yellow;
}
0 件のコメント:
コメントを投稿