SWELL投稿一覧のアイキャッチ画像に縁取りと影をつけるカスタマイズ

SWELLの投稿一覧に表示されるアイキャッチ画像は、基本的にフラットなデザインになっています。下記のような雰囲気です。

このままでも綺麗なのですが、少しリッチな雰囲気にしたいときのために、縁取りや影をつけるカスタマイズをご紹介します。

今回ご紹介するCSSを実装すると、下記のような雰囲気になります。

線の太さや色、影の雰囲気は自由に調整できますので、アイデア次第で色々できるかと思います。

ちなみに上記の画面では、SWELLの基本デザイン設定を「全体をフラットにする」にしていますが「丸みをもたせる」にしても問題なく実装可能です。下記のとおり。

簡単なCSSでカスタマイズできますので、チャレンジしてみて下さい。