herohoroブログ

記事に添付した画像に枠を追加する



🔄   2022-08-02

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

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

開発6日目。

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

😵
背景白の画像を入れると本文との区別が付きにくい
image block

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

記事内に添付した画像の周囲に枠を追加

  • 場所を特定する

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

image block

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

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

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

あたりかな。。。。

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

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

image block

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

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

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

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

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

😊
次回から迷わず特定できそう♫

  • 変更したい形を整理する
😊
立体的にくぼんだ枠がいいなー。ちょっと丸っこいと可愛いかも♫

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

image block

👆このサイトはこちら

🤔
grooveかな〜〜〜

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

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

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

image block

👆このサイトはこちら

🤔
薄めの灰色のほうがいいかなー

変更点:

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

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

開発画面では見れない😢

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

image block

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

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

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

あれ?めっちゃ変・・・・・・・・・( ゚д゚)ハッ!

ってことで、

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

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

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

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

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

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

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


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

https://herohoro.com/atom

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

Twitter Timeline


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