こんにちは、ゆんつです。
僕のブログはCocoonというテーマを使って作成しています。
ブログのトップページである記事一覧を表示するインデックスページは、PC表示では縦型2列のカードが並ぶように設定しています。
この各記事を紹介するインデックスカードはデフォルトの状態ではカードの見た目が平面で、マウスカーソルを乗せるとうっすらと灰色の背景色がつくようになっています。
このカードを、CSSをちょっと編集して
・カードにマウスカーソルが乗ったら、カードがフワッと浮くような感じにする
という風にカスタマイズしてみたいと思います。
完成形は以下のような感じです。
子テーマのスタイルシートを編集するので、もし参考にして作業する場合は、作業前にブログのバックアップを取っておいた方がいいかもしれません。
カードに影をつける
カードに影をつけるにはCSSの「box-shadow」というプロパティを利用します。
box-shadowは
という感じで設定します。
例えば以下のような白いボックスがあったとして
このボックスにbox-shadow: 10px 10px;という設定をすると、横と縦に10pxずつずれて黒い影がつきます。
さらに影の色を指定してbox-shadow: 10px 10px red;とすると影の色は黒から赤になります。
ぼかしを設定してbox-shadow: 10px 10px 10px red;にすると影がぼやけます。
広がりを設定してbox-shadow: 10px 10px 10px 10px red;にすると影が全体的に10px拡大します。
そしてbox-shadowは横方向の影の大きさと縦方向の影の大きさを0にしてぼかしを設定すると、ボックスの周囲全体に影がつくようになります。
例えばbox-shadow: 0 0 10px red;とすると以下のようにボックス全体にぼんやりとした赤い影がつきます。
このカードの周囲全体に影をつける方法を使って、カードに立体感を持たせます。
インデックスカードには「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を重ねがけをする前と比べて、立体感が増したと思います。
あとは、実際にCocoonの子テーマのCSSを編集するだけです。
Cocoonのダッシュボードから「外観」→「テーマエディター」をクリック。
テーマの編集画面になるので「Cocoon Child」のスタイルシートを選択し、カスタマイズ用のコードを記述します。
カスタマイズ用のコードは以下の通りです。
.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」というクラスに対して上記のカスタマイズを行えば、インデックスカードだけではなく、ブログにあるその他のカードにも影がついて浮くようになります。
何かの参考になれば幸いです。
それでは、またー。
コメント