最新記事の画像をおしゃれにする方法はたくさんあるけれど、派手なものが多い気がするのであえてさりげないカスタマイズをご紹介。
挙動はこんな感じ。ゆっくり沈み込むので汎用性が高いんじゃないでしょうか?
公式の「最新記事」「注目記事」そして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; }
こんな感じです。shadowの色やら距離を変えたい方は各々調べてみてくださいね。
ではでは、また次の記事で・・・