最近のおしゃれなHPみたいにアイキャッチ画像の角を丸くしたい！！
アイキャッチ画像って、何も設定しないと普通に角が直角の表示ですよね。
でも最近のおしゃれなHPって、アイキャッチ画像が丸く加工されていることが多いんです。
アイキャッチってブログが読まれるかどうかが一瞬で決まる重要な要素だから、
「私もやりたい！」「おしゃれにしたい！！」
と思い、今回は練習も兼ねて、実務風にcssをいじって変えてみました。
実際の見た目の変化は？
まずは設定前の画面は・・・
これが、こうなります↓
どうですかね？微々たる差ですが、見た目がちょっと柔らかくなることで、
ちょっと細かな部分にもこだわってるような、プロっぽさが出ませんか？
あざ子は、プロっぽいサイトにしたいの！！
CSSに入れるコードは？
これ、めちゃくちゃ簡単で、CSSに
.entry-card-thumb img{
border-radius: 15px;
}と入れるだけ。
このborder-radiusって「角を丸くする」コードでよく使うので、覚えておくと便利ですよね。
で。このとき重要になってくるのが、数値を何ピクセルにするか？というところ。最初はどれくらいの設定にすればよいかって悩みますよね。
そこで、ピクセル数ごとの見え方の変化をまとめてみました！
角丸加工。px数による見た目の変化を比較
まずは控えめに5px
【超初心者向け】ボタンの作り方少し上げて１０ｐｘ
【超初心者向け】ボタンの作り方12pxいってみよ
【超初心者向け】ボタンの作り方お次は15pxどうだ？
【超初心者向け】ボタンの作り方刻んでいきます、18px
【超初心者向け】ボタンの作り方20pxなら？
【超初心者向け】ボタンの作り方思い切って30px！
【超初心者向け】ボタンの作り方さらに思い切って50px！！どうだ！！！
【超初心者向け】ボタンの作り方ここまでくると、もはや見た目は変わらないですね！
丸くしたときの印象の変化って？
角が丸くなると結構印象変わるかなっておもうんですけど、大体こんなイメージかなと思います。
- さりげない角丸（誠実なイメージ）・・・4～6px
- かなり丸い（今っぽさピカイチ、親しみあるイメージ）・・・10～16px
- めっちゃ丸い（かわいらしさ、ポップなイメージ）・・・20～30px
見せたいイメージに合わせて色々試してみると楽しいですね♪
コメント