【CSS】コピペするだけ！最新記事、注目記事、Milliardの画像に影と動きをつけました

最新記事の画像をおしゃれにする方法はたくさんあるけれど、派手なものが多い気がするのであえてさりげないカスタマイズをご紹介。

f:id:mshitech:20161124212301g:plain

挙動はこんな感じ。ゆっくり沈み込むので汎用性が高いんじゃないでしょうか？

公式の「最新記事」「注目記事」そしてMilliard(Yukihy Lifeさんカスタマイズの）の「こんな記事も書いてます」にも対応しましています。

Milliard関連ページ | シスウ株式会社 www.yukihy.com

今回はぱぱぱっと見ていきますよ。

CSSの貼り付け位置

まずはCSS、その貼り付け場所はこちら。
デザイン→カスタマイズ→デザインCSSです。

CSS

/* 最新記事に影と動き */
img.urllist-image.recent-entries-image {
 box-sizing: border-box;
 display: block;
 box-shadow: 0 5px 6px #ccc, 0px -2px 1px #fff;
 -webkit-transition: width 0.3s ease-out;
 transition: width 0.3s ease-out;
 transition: all 0.6s ease;
}
img.urllist-image.recent-entries-image:hover {
  transform: scale(0.95); /* 変化する写真の大きさ */
  box-shadow: none;
}
/* 注目記事に影と動き */
img.urllist-image.entries-access-ranking-image {
 box-sizing: border-box;
 display: block;
 box-shadow: 0 5px 6px #ccc, 0px -2px 1px #fff;
 -webkit-transition: width 0.3s ease-out;
 transition: width 0.3s ease-out;
 transition: all 0.6s ease;
}
img.urllist-image.entries-access-ranking-image:hover {
  transform: scale(0.95); /* 変化する写真の大きさ */
  box-shadow: none;
}
/* Milliardに影と動き */
.ssImg{
 box-sizing: border-box;
 display: block;
 box-shadow: 0 5px 6px #ccc, 0px -2px 1px #fff;
 -webkit-transition: width 0.3s ease-out;
 transition: width 0.3s ease-out;
 transition: all 0.6s ease;
}
.ssImg:hover{
  transform: scale(0.95); /* 変化する写真の大きさ */
  box-shadow: none;
}