SWELL

SWELL｜投稿リストがマウスホバーでふわっと浮く

投稿リストがマウスホバーででふわっと浮くCSS

現在ギブショットではSWELLを使っているのですが、投稿リスト(記事一覧)をマウスホバー時にふわっと浮くようにカスタマイズをしています。

このデザインについてお問い合わせを頂くことがあるので、実際に使用しているCSSをご紹介します。全体設定を「フラットにする」にしているブログの相性が良いので、ぜひ試してみてください。

事前準備：リストレイアウトをカード型に

今回紹介するカスタマイズは、カード型の投稿リストに合わせて作ったCSSです。

CSSを適用する前に、記事一覧リストと投稿リストブロックを「カード型」に変更してください。

SWELLのカスタマイザーの投稿リスト設定
  • 記事一覧リストの設定・・・カスタマイズ > 記事一覧リスト > リストのレイアウト設定
  • 投稿リストブロックの設定・・・各ブロックのsetting内

なお、カード型以外のレイアウト（リスト型やサムネイル型など）の場合、CSSは反映されません。

投稿リストをマウスホバー時に浮かせるCSS

スタイルシート (外観 > テーマ編集 > 子テーマのsytle.css）に貼り付けて使用してください。

/* 投稿リストのカスタマイズ */
.-type-card .p-postList__link{
	background:#fff; /*背景*/
	padding:.6em;
	border: 0.1px solid #E8E8E8;
}
.-type-card .p-postList__item > a{
	transition: all ease .3s; /* アニメーションの時間 */
}
.-type-card .p-postList__item a:hover{
	text-decoration:inherit !important;
	color:inherit !important;
	opacity:inherit !important;
	box-shadow: 0 10px 20px -5px rgb(0 0 0 / 20%);
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
}
/* 以下、標準動作の無効化 */
.-type-card .p-postList__thumb::before{
	background:unset; /*フィルター*/
}
.-type-card .p-postList__link:hover .c-postThumb__img{
	-webkit-transform: unset; /*画像のズーム*/
	transform: unset;
}
.-type-card .c-postThumb__img{
	-webkit-transform: unset;
	transform: unset;
}

上から順にCSSをざっくりと解説します。

  • .p-postList__Linkで背景と線を指定して、画像とタイトルを一つの枠に収める
  • .p-postList__item でtransitionを使ってアニメーションの早さを指定します
  • .p-postList__item > a:hoverでホバー時の動きを設定
    • box-shadowで影を付けて浮いている感じにする
    • transform: translateY()にマイナス値を入力して上に移動させる
  • 18行目以降： ホバー時の標準の動作（フィルターや拡大など）を無効化しています。

もう少し幅を広く取りたい、背景色を変えたいという場合は、最初の2~6行目(p-postList__Link)を変更してください。