Cocoonのサイドバーの新着記事一覧をブログカード風にして浮かせるカスタム

サイドバーの新着記事一覧をCocoonの開発者、わいひらさんが運営するCocoonサイトと同じような見た目（ブログカードみたいにしてマウスオーバーで浮き上がるかんじ）にしたいと思い立ち、ググってみたけどなかなか方法を書いてくれてる記事が見つからなかった。

別サイトのこちら↓の記事ではおしいところまで書かれてたんだけど、テーマがCocoonの前の『Simplicity』だったので反映できず、、

404 NOT FOUND | Purple Life

スピリチュアル～ WordPressまで！いろいろアリなBlog。

ということで自分で調べて近いところまでもっていけたので、この記事ではその方法を書いておこうと思う。

Cocoonの子テーマ『style.css』に下記コードを追記すればOK。
※コピペでいけるはず。

/* サイドバー新着記事一覧カスタム＝＝＝ここから↓↓ */

.widget-entry-cards .a-wrap { /* ブログカード風にする */
  border: 1px solid #EAEAEA;
  box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
  border-radius: 10px;
  padding-bottom: 20px;
}

.widget-entry-cards .a-wrap:hover { /* マウスオーバーで浮かせる */
  box-shadow: 0px 2px 2px rgba(0,0,0,0.2);
  transform: translateY(-5px);
  background-color: white; 
  transition: all .3s ease;
}
.widget-entry-cards .a-wrap:hover img { /* サムネイル画像の透過を無効に */
  opacity: 1;
}

/* サイドバー新着記事一覧カスタム＝＝＝ここまで↑↑ */

ただ、ここまでできるまで4時間ほど掛かってしまった…。

デザインのカスタムはやらないよりはやったほうが良いと思うけど、こればっかりにハマってしまうと全然記事が書けなくなってしまうのでほどほどにしないとね…(´ｴ`;)

この記事が誰かのお役に立てますように。