Cocoonのインデックスカードを立体化しフワッと浮かせるカスタマイズ

Cocoon

こんにちは、ゆんつです。

僕のブログはCocoonというテーマを使って作成しています。

ブログのトップページである記事一覧を表示するインデックスページは、PC表示では縦型2列のカードが並ぶように設定しています。

Cocoonのインデックスカード

この各記事を紹介するインデックスカードはデフォルトの状態ではカードの見た目が平面で、マウスカーソルを乗せるとうっすらと灰色の背景色がつくようになっています。

デフォルトのデザインのインデックスカード

このカードを、CSSをちょっと編集して

・カードに影をつけて、カードが立体的に見えるようにする
・カードにマウスカーソルが乗ったら、カードがフワッと浮くような感じにする

という風にカスタマイズしてみたいと思います。

完成形は以下のような感じです。

カスタマイズ後のインデックスカード

子テーマのスタイルシートを編集するので、もし参考にして作業する場合は、作業前にブログのバックアップを取っておいた方がいいかもしれません。

カードに影をつける

カードに影をつけるにはCSSの「box-shadow」というプロパティを利用します。

box-shadowは

box-shadow: 横方向の影の長さ 縦方向の影の長さ ぼかし 広がり 影の色;

という感じで設定します。

例えば以下のような白いボックスがあったとして

白いボックス

このボックスにbox-shadow: 10px 10px;という設定をすると、横と縦に10pxずつずれて黒い影がつきます。

box-shadowを設定して黒い影をつける

さらに影の色を指定してbox-shadow: 10px 10px red;とすると影の色は黒から赤になります。

box-shadowの黒い影を赤い影に変更

ぼかしを設定してbox-shadow: 10px 10px 10px red;にすると影がぼやけます。

box-shadowにぼかしを追加

広がりを設定してbox-shadow: 10px 10px 10px 10px red;にすると影が全体的に10px拡大します。

box-shadowに広がりを追加

そしてbox-shadowは横方向の影の大きさと縦方向の影の大きさを0にしてぼかしを設定すると、ボックスの周囲全体に影がつくようになります。

例えばbox-shadow: 0 0 10px red;とすると以下のようにボックス全体にぼんやりとした赤い影がつきます。

box-shadowでぼかしだけを設定

このカードの周囲全体に影をつける方法を使って、カードに立体感を持たせます。

インデックスカードには「entry-card-wrap」というクラスが付与されているので、そのクラスに対してbox-shadowを設定します。

まずカードに「box-shadow: 0 0 5px rgba(0,0,0,.1);」を設定してみます。

ちなみにrgba(0,0,0,.1)の最初の3つの0で黒色を意味し、最後の.1は色の透過度合を意味します。

透過度合いは0~1の間で設定でき、0に近づくほど透明になり、1に近づくほど不透明になります。

この設定によりカードの周囲にはうっすらと黒い影がつきます。

周囲に黒い影がついたインデックスカード

カードの周囲に影がついたことで、カスタマイズ前よりは立体感が出たと思います。

インデックスカードのカスタマイズ前と後

さらに、もう少しカードに立体感を持たせましょう。

box-shadowは値をコンマで区切ることで重ね掛けができます。

ですので、

box-shadow: 0 0 5px 0 rgba(0,0,0,.1), 0 3px 5px 0 rgba(0,0,0,.2);

という風に設定して、透過度20%で先ほどの影よりも濃く、少しだけ縦方向に伸びる影を重ねてかけてあげます。

すると、以下のような感じで先ほどよりもさらに立体感のあるカードになります。

インデックスカードにbox-shadowの重ね掛け

box-shadowを重ねがけをする前と比べて、立体感が増したと思います。

カスタマイズ前とbox-shadow1回掛けと重ね掛けの見た目の違い

あとは、実際にCocoonの子テーマのCSSを編集するだけです。

Cocoonのダッシュボードから「外観」→「テーマエディター」をクリック。

Cocoonダッシュボード

テーマの編集画面になるので「Cocoon Child」のスタイルシートを選択し、カスタマイズ用のコードを記述します。

Cocoon Childにカスタマイズ用のCSSを記述する

カスタマイズ用のコードは以下の通りです。

.entry-card-wrap {
	box-shadow: 0 0 5px 0 rgba(0,0,0,.1), 0 3px 5px 0 rgba(0,0,0,.2);
}

「ファイルの更新」ボタンをクリックしてカスタマイズ内容を保存し、ブログを確認するとインデックスカードは以下のようになっています。

カスタマイズ前と後のインデックス画面

カスタマイズ前より立体感が出たね!

以上でインデックスカードに立体感を持たせるカスタマイズは終了です。

カードを浮かせる

マウスカーソルをカードに乗せたときに、カードをフワッと浮かせたい場合。

CSSのtransformというプロパティのtranslateという値を使います。

translateは元々の要素の位置をずらすために利用されるプロパティです。

translateXで横方向、translateYで縦方向に要素をずらすことができます。

これを利用して、マウスカーソルがカードに乗ったときにtranslateYでカードを上方向に少しずらしてあげることで、カードがフワッと浮いたかのように見えるようにします。

マウスカーソルがインデックスカードに乗ったときの変化を記述するのでhoverという疑似クラスを使用します。

Cocoon ChildのCSSに

.entry-card-wrap:hover {
	transform: translateY(-4px);
}

とすれば、マウスカーソルを乗せたときにカードが上に少しずれ、カードがフワッと浮いたかのように見えるようになります。

ふわっと浮くインデックスカード

以上でカードを浮かせるカスタマイズは完了です。

ゆんつ
ゆんつ

お疲れさまでした

自分のブログに合うように数値を変更してみてください

以上がCocoonのエントリーカードに立体感を持たせて、マウスホバー時にフワッと浮くような感じで見えるカスタマイズの方法です。

影の大きさや、カードを動かす大きさは各数値を増減させることで変更することができます。

もし参考にする場合は、自分のブログの雰囲気にあうように数値を変更してみてください。

ちなみにインデックスカードだけではなく、人気記事ウィジェットのカードなども含めて影をつけたり、浮かせたりしたい場合。

「entry-card-wrap」ではなく「a-wrap」というクラスに対して上記のカスタマイズを行えば、インデックスカードだけではなく、ブログにあるその他のカードにも影がついて浮くようになります。

何かの参考になれば幸いです。

それでは、またー。

コメント