Cocoonの記事一覧ホバー時（記事一覧の記事の上にマウスを載せたとき）の動きをカスタマイズする方法と、デザインサンプルを紹介します。
ふわっと上下に動かしたり、変形したり、背景色を変更したり、すこし透過させたりすることができます。
編集するのは、スタイルシート（CSS）のみです。
記事一覧とは
この記事内で言う「記事一覧」とは、以下のものを指します。
なんて言えばいいのか分からなかったので…
- ブログトップページやカテゴリーページなどの記事一覧（エントリーカード）
- サイドバーウィジェットやショートコードを利用して表示する「人気記事」や「新着記事」
- 記事内で使う内部ブログカード・外部ブログカード
Cocoonの記事一覧ホバー時の動きをカスタマイズする方法
デフォルトの動き
これはブログトップページの新着記事一覧です。
デフォルトでは、薄い水色の背景色がつくだけのデザインになっています。
ふわっと移動させて影をつける
.a-wrap:hover{
transform: translateY(-2px);
box-shadow: 2px 2px 6px 0 #ccc;
}記事一覧のホバー時の動作をカスタマイズするには、主に「a-wrap:hover」というセレクタを用います。
「transform: translateY」はY軸（上下）方向に移動するという意味で、「box-shadow」は影の設定です。
ふわっと（アニメーションぽく）動作させるには「transition」というプロパティの設定が必要ですが、Cocoonの親テーマのCSSにすでに書いてあるので、値を変えたい場合だけ以下の内容を書き足して変更してください。
transition: all 0.7s;
背景色を変更する
.a-wrap:hover {
background-color: #f1d2e02b;
}背景色を変更するには、「background-color」を変更します。
透明度を変更する
.a-wrap:hover {
opacity: .8;
}透明度を設定するには、「opacity」の値を設定します。
0（透明）～1（不透明）の間の値を入力します。
記事一覧ホバー時の動きのサンプル
よく見るデザインなど、いくつかサンプルを作りました。
コピペで使えます。
スクリーンショットなので分かりにくいと思いますが、上の段がホバー時、下の段が通常時です。
１．ふわっと上に移動させながら背景色と影をつける
.a-wrap:hover {
background-color: #f1d2e02b;
transform: translateY(-2px);
box-shadow: 2px 2px 6px 0 #f6f6f6;
}こんな感じのホバーアニメーションを最近良く見る気がします。
２．ふわっと左に移動させながら背景色と影をつける
.a-wrap:hover {
background-color: #91a38f2b;
transform: translateX(-2px);
box-shadow: 2px 2px 6px 0 #f6f6f6;
}今度はホバー時にすこし左に移動するようにしています。
３．すこしだけ拡大しながら背景色と影をつける
.a-wrap:hover {
background-color: #e6e9ef;
transform: scale(1.01);
box-shadow: 2px 2px 6px 0 #f6f6f6;
}
ホバー時に、エントリーカード全体を1.01倍に拡大して背景色をつけています。
似たようなアニメーションをときどき見かけます。
４．背景色をつけ、透過させる
.a-wrap:hover {
background-color: #cdd5e1ad;
opacity: .75;
}
ホバー時に薄い背景色をつけて透過させています。
シンプルですが、「ホバー時は透過」というのはボタンなどでもよくあるパターンだと思います。
さいごに
本当はtransformの色々な動きをまとめたかったのですが、それはいつかやります。
この記事で紹介した内容は、ボタンなどにも使えるデザインなので、是非活用してみてください。
Comments