投稿リストやアイキャッチ画像における、boder-radiusでのちょっとした印象の違い。

角丸を定義するborder-radiusプロパティについて、ちょっとした備忘。

このサイトではWordPressテーマ「SWELL」を使用していますが、どのテーマにおいても画像に対して角丸を指定する/指定しないで印象が少し変わるような気がします。

例えばトップページの投稿リストにおいて、border-radiusをそれぞれ「0px（なし）」「4px」「8px」に設定し見比べてみます。

このようにそれぞれ数pxの違いでパッと見の印象がちょっと変わります、4pxと8pxはあまり変わらないようにも見えますが実際の画面ではだいぶ印象が違ったりします。

個人的なイメージとして、このように画像にかけるborder-radiusの値の違いによって次のようなサイトの印象の違いがあるんじゃないかなあと感じました。

もちろん、サイトの印象は画像部分だけでなく全体的なイメージ（コンテンツ/カラー/フォント/余白などを含む）で捉えられることが多いので一概には言えませんが、画像部分にフォーカスするとパッと見の印象は違うんじゃないかなあと。

なので、例えばちょっとサイトの印象を変えたいときなどには、画像の角丸など細かい部分でもいいのでこだわってカスタマイズしていくのも良いと思います。

ちなみにSWELLではカスタマイザーにある「全体に丸みをもたせる」にチェックを入れるだけで、サイト全体の特定要素に対してborder-radius:8px;という値を自動でかけられます。

可愛くてポップ、また優しい印象のサイトを作りたいときなどはここを設定しておくとよきです。これは他テーマにないめちゃくちゃ便利な機能だと思います。実際に使用しているSWELLユーザーさんも多いです。

ただ、このサイトでは8pxだとちょっと丸すぎる/0pxだとちょっと固すぎるかなあと感じたので、間をとって次のコードを追加CSSに追記しborder-radius:4px;という値を投稿リストと記事のアイキャッチ画像に指定してみました。

/*投稿リスト＆記事アイキャッチ画像を丸く*/
.p-postList__thumb, .p-articleThumb__img {
  border-radius:4px;
  z-index:1;
}

なんだかふわっと柔らかい印象が生まれますね、個人的にはこれくらいの角丸が安心するので好きです。

この辺りの感覚を掴むには、実際にいろいろなイトを見ていく中で「この要素の丸い感じいいな」という印象を忘れずに、ディベロッパーツールなどで実際にborder-radiusの値を調べてみるのがお勧めです。

そうして細かい分析を重ねていくと、

みたいな感じで、様々なテーマやサイトを跨いで好みのカスタマイズができるようになります。

そういう意味では「可愛いサイトを作るならSANGO」「カッコいいサイトを作るならSWELL」みたいなことは一概には言えず、テーマを選定する基準は見た目以外の「中身」の部分にもっと意識が向けられてもいいんじゃないかなあとも思ったり。

実際、今回話したようなこの手のカスタマイズはいくらでも融通が効きますし、可愛いテーマでカッコいいサイトを/カッコいいテーマで可愛いサイトを作ることもできます。

そのようなカスタマイズをしていくと、良い意味で「そのテーマらしさ」を越えて「自分のサイトらしさ」のようなものが生まれていくのかも。なんて思ったり。