【STINGER】サムネイルをポロライド風(ふんわり囲み)にする

こんにちは、山田(@yamada_note)です。
STINGERでサムネイルをポロライド風(ふんわり囲み)に表示するCSSをご紹介しますね!

※STINGER8・AFFINGER4で確認しました。

CSS

.kanren dt img{
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
border: 5px solid #fff;
box-sizing: border-box;
}

解説

白いボーダーで画像の周りを5px囲い、影をつけてふんわりさせています。

まとめ

上記のCSSで、

  • 記事一覧
  • サイドバーの新着記事
  • 記事下の関連記事

のサムネイルが、一括で設定されます。

山田
毎回WordPressのカスタマイズを忘れるので、自分の備忘録用にサイトを立ち上げました。

CSSとHTMLは独学なので、間違ってたらこっそり教えてください…。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です