サイドバーの新着記事一覧をCocoonの開発者、わいひらさんが運営するCocoonサイトと同じような見た目（ブログカードみたいにしてマウスオーバーで浮き上がるかんじ）にしたいと思い立ち、ググってみたけどなかなか方法を書いてくれてる記事が見つからなかった。
別サイトのこちら↓の記事ではおしいところまで書かれてたんだけど、テーマがCocoonの前の『Simplicity』だったので反映できず、、
【Simplicity2】「新着・人気記事」リストに区切り線とホバー《ふわっと》アクション
サイドバーの『新着・人気記事』リストの間に境界線のようなシンプル区切り線や、マウスホバー時に《ふんわり》と浮き上がるアクションを入れてみました。CSSコピペだけで簡単に表示でき見た目もスッキリ。リスト最後の下線を非表示にすることも可能です。
love-wave.com
ということで自分で調べて近いところまでもっていけたので、この記事ではその方法を書いておこうと思う。
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時間ほど掛かってしまった…。
デザインのカスタムはやらないよりはやったほうが良いと思うけど、こればっかりにハマってしまうと全然記事が書けなくなってしまうのでほどほどにしないとね…(´ｴ`;)
この記事が誰かのお役に立てますように。
