記事を投稿して、

notion上では見出しのh1やh2やh3について文字の大きさの変化があるけど

ブログを公開するとタイトルと同じ大きさになってしまっている。。。

と欲が湧き出て止まらなくなった

開発８日目。

見出しについて改造していきましょーーーーー＼(^o^)／

• 見出し部分を特定する

左クリック→【検証】より

.blog_post_***** h1の部分。

前回発覚した

「blog_」を除いた部分でピッタリ一致

今回も使っていけそう＼(^o^)／

.post h1

に一致する部分を探し出すと・・・

src/styles/blog.module.cssの中に発見＼(^o^)／

【検証】画面で灰色の文字になっている.postPreview h3 もあるのでここですな。

• 変更したいデザインを見つける

フラットデザインで大好きなサルワカさんのサイトから選んでみます。

👆このサイトのリンクはこちら

「角がくるん」をh1のデザインにしてみよう＼(^o^)／

「コードを表示」をクリックするとcssのコードがボヨーンと出てくるのでコピー。

• 貼り付ける

意外とh1に関するコードが多かったので、

元々あった.postPreview h3とは別で用意することにしました。

いい感じ＼(^o^)／

だ・け・ど・・・・・

記事のタイトルまで変更されてしまった。。。

さっきみてたサルワカさんのサイトはどうなってるのか覗いてみる

ってことで、

記事のタイトルは「角がくるん」のままにして

記事内の見出しデザインを再度検討してみようかな＼(^o^)／

このデザインで黄色と灰色のストライプに変更してみよう＼(^o^)／

• 記事の見出しnotion上でをh2に変更して再度場所を特定する

.post h2の部分だということが確認できたので、VSCode上で一致する部分を探し出す

👆ここにcssを追記する

サルワカさんのコードから変更した部分

• 背景のストライプを黄色と灰色にした
• 文字の色を黒にした

アップロードしてみる・・・・

できたー＼(^o^)／

めっちゃ変な組み合わせじゃんーーーーー(´；ω；｀)

灰色が思った以上に気持ち悪いので、

黄色系でストライプを作ってみるかな。

ん〜なんか寒気がする。。。。(´；ω；｀)

もう一度サルワカさんの見本を観察してみよう・・・・

方向転換

• 文字は黒
• 黒を引き立たせるためにうっすい色のストライプ
• 黄色は辞めない

うっすい色の特化したサイトを発見

👆リンクはこちら

いざ出陣っ!!!!!!!!!!!!!!٩(๑òωó๑)۶

記事内のデザインに手を加える時、

開発画面で確認できないので

アップロードするまでのお楽しみ。

もう少ししっくりくる配色を見つけ次第変更したいへろほろです。。。。

灰色は辞めてちょい濃いめの黄色と白のストライプにしたらしっくりきました♫

めでたしめでたし(*´ω｀*)