読者です 読者をやめる 読者になる 読者になる

えむしてっく

主にはてなブログのカスタマイズやapple製品関連の記事など。

スポンサーリンク

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

CSS はてなブログ カスタマイズ

f:id:mshitech:20161124220204j:plain

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

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;
}

こんな感じです。shadowの色やら距離を変えたい方は各々調べてみてくださいね。

ではでは、また次の記事で・・・

CSShtml5を学ぼう!