SWELLの投稿一覧に表示されるアイキャッチ画像は、基本的にフラットなデザインになっています。下記のような雰囲気です。
このままでも綺麗なのですが、少しリッチな雰囲気にしたいときのために、縁取りや影をつけるカスタマイズをご紹介します。
今回ご紹介するCSSを実装すると、下記のような雰囲気になります。
線の太さや色、影の雰囲気は自由に調整できますので、アイデア次第で色々できるかと思います。
ちなみに上記の画面では、SWELLの基本デザイン設定を「全体をフラットにする」にしていますが「丸みをもたせる」にしても問題なく実装可能です。下記のとおり。
簡単なCSSでカスタマイズできますので、チャレンジしてみて下さい。
- カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
- カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
