スポンサーリンク

Cocoon ホバーで記事をフワッと浮かせるカスタマイズ

Cocoon
スポンサーリンク
本ページにはプロモーションが含まれています。

こんにちは、ワードプレスのテーマCocoonのカスタマイズにどっぷりハマり中のタロです。

この投稿ではインデックスに表示されている記事にカーソルをホバーしたら記事をフワッと浮かせるカスタマイズを紹介します。

ブログサイトの雰囲気もガラッと変わるはずです。

スポンサーリンク

フワッとするイメージ

ホバーするとフワッと浮いてきます。

 

このような雰囲気をそれぞれな記事で表現します。

実際の動きはトップページに移動し確認してみてくださいね。

記事をフワッとするカスタマイズの手順

カスタマイズ手順は以下の通り。

  • STEP01

    CSSのコピペ
    style.css にコードをコピペ

CSSのコピペだけでOKです!!

style.css にコードをコピペ

CSSのコードを style.css に貼り付けます。

/* メインのエントリー記事をフワッと浮かせる
-------------------------------------------------- */
#main #list .entry-card-wrap, #main .tab-cont .entry-card-wrap {
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1), 0 2px 3px 0 rgba(0, 0, 0, 0.2);
}

#main #list .entry-card-wrap:hover, #main .tab-cont .entry-card-wrap:hover {
  box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

貼り付け後はご自身のトップページへアクセスし、記事がフワッと浮いてくるか確認してみてください。

以上、とっても簡単でした( ´ ▽ ` )

読むな危険!Cocoon カスタマイズを一挙公開中

このブログでも実装しているCocoonカスタマイズを大公開!!

デザインには正解がないためやればやるほど沼にハマってしまいます。

ですので、Cocoon ユーザーは絶対に読まないでください。

コメント

  1. […] Cocoon ホバーで記事をフワッと浮かせるカスタマイズこんにちは、ワードプ… […]

タイトルとURLをコピーしました