herohoroブログ

read-moreの枠線を丸くする



🔄   2022-08-02

ブログ全体のフォントを変更してニヤニヤしている

開発5日目。

😨
字が丸いのに枠が尖っているとは何事かっ!!!!!!

ということで、

より丸っぽい雰囲気にするべく

記事一覧ページの「read more...」の枠の四隅を丸くすることにしました。

read more... の枠を丸くする

気になっているのはこの部分。

image block

角に過剰に反応するのは私だけでしょうか???(*´ω`*)

  • 場所を特定する

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

image block

.blog_postPreview_*****を探す・・・・。

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

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

あたりかな。。。。

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

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

image block

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

  • コードを書き換える

「css 枠線 丸くする」で検索してみる。

image block

これが使えそう(*^^*)

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

📝
border-radius: 10px;にすれば角が取れる

コードを追加する⭐

image block

できたー\(^o^)/

image block

今回はすごく簡単に角が取れましたーーーー(*^^*)(*^^*)

こんな日が続くといいな〜

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

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

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

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


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

https://herohoro.com/atom

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

Twitter Timeline


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