こんにちは、ワードプレスのテーマ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 ユーザーは絶対に読まないでください。
