記事一覧ページの「read more」の枠の角を丸くしたことで

ブログ全体が丸くなってきた

開発６日目。

過去の記事を見返してみると違和感が。。。

今日は枠を新たに追加してみよう＼(^o^)／

• 場所を特定する

右クリック→【検証】からどこのコードに追加すればいいのかを調べる

.blog_post_**** 　imgは見当たらない・・・。

「blog」関連で怪しいのは、

• src/pages/index.tex
• src/pages/[slug].tsx
• src/styles/blog.module.css

あたりかな。。。。

右端に「******.css」ってあるからcssのデータかな？？？

src/styles/blog.module.cssにこんなコードを発見！

【検証】の画面でグレー文字になっている「.asset-wrapper」と「video」もあるのでおそらくこの部分だなと・・・・・( ﾟдﾟ)ﾊｯ!

開発５日目の「read moreの枠を丸くする」でも推理してた、

【検証】画面にある「blog_」は
blog.modure.cssで発行されるっていう意味なのかな？？
そう考えると、「blog_」を除いた部分でピッタリ一致する。。。。。

👆これも今回当てはまりそう。

「blog_」を除くと、「.post」になってる〜〜〜〜＼(^o^)／

• 変更したい形を整理する

「css　枠線をつける」で検索したらいろんな枠線があることを知る・・・。

👆このサイトはこちら

枠線の色も「css カラー」で検索したらコードが分かった。

カーソルをカラーコードの上に持っていくと

背景がその色になるのでイメージしやすくて親切(*^^*)⭐

👆このサイトはこちら

変更点：

• 太め
• くぼみ枠
• 灰色
• 四隅は丸っぽく

notionAPIから記事の内容を持ってくる関係で、

開発画面では見れない😢

直接Vercelへアップロードして確認。。。

こんな感じでいいかねー(*^^*)(*^^*)

• 立体感を強調させようと濃いめの色を選ぶ・・・

あれ？めっちゃ変・・・・・・・・・( ﾟдﾟ)ﾊｯ!

ってことで、

かなり薄めの灰色を選ぶと

イメージに近づくのかなー

ということに気づけたへろほろでした 😊