herohoroブログ

記事の見出しを目立たせる_h1~3



🔄   2022-08-02

記事を投稿して、

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

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

image block

🤩
少し変化させていい感じにしてみたいなー

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

開発8日目。

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

見出しのデザインを変更する準備

  • 見出し部分を特定する

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

image block

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

前回発覚した

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

今回も使っていけそう\(^o^)/

.post h1

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

image block

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

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

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

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

image block

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

image block

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

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

image block

見出しを変更する

  • 貼り付ける

image block

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

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

いざアップロード

image block

いい感じ\(^o^)/

だ・け・ど・・・・・

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

image block

🙀
これはちょっと嫌かな・・・・

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

image block

🧐
 記事内の見出しはh2から始まっていて、タイトルだけがh1になっている

🤨
そうか・・・h1はタイトル用だとすればいいのか・・・・。

ってことで、

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

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

見出しのデザインを変更しよう(パート2)_(´・ω・`)
image block

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

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

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

image block

👆ここにcssを追記する

image block

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

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

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

image block

できたー\(^o^)/

本日の空振り(*´ω`*)

image block
image block

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

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

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

image block
image block

ん〜なんか寒気がする。。。。(´;ω;`)

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

image block

🤔
うっすいストライプにすれば文字がハッキリするのかもしれない。。。 文字も同系色がいいのかな。。。。 でもなー黄色がいいなー 👉 👈

方向転換

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

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

image block

👆リンクはこちら

image block

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

image block

🤨
微妙にしっくりこないけどまぁ良しとするかな。。。。

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

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

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

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

後日談(´・ω・`)

image block

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

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

Twitterでは更新のお知らせを随時行っています

興味ある方はLet'sフォロー★

▼ この記事に興味があったら同じタグから関連記事をのぞいてみてね

新着記事を通知したい??


RSSリーダーにatomのリンクを登録すると通知が行くよ🐌

https://herohoro.com/atom

やってみてね(*´ω`*)(*´ω`*)

Twitter Timeline


フォロー大歓迎\(^o^)/