Udemyセール開催中! 対象コースが1,220円から

【SWELL】記事一覧リストでマウスホバーするとふわっと浮かぶCSS

本記事では「CSS」が分からなくてもコードをコピペするだけでOKです!

今回はワードプレステーマ「SWELL」の記事一覧リスト(投稿リスト)にマウスを重ねるとブログカードがふわっと浮かぶCSSコードを紹介します。

どんな風にふわっと浮かぶのか気になる方は当ブログの「トップページ」「カテゴリー」「記事下の関連記事」から確認できます。

目次

記事一覧リストがふわっと浮かぶ「CSS」

#main_content .p-postList__item{
	transition: .4s;
	border-radius: 5px;
	padding: 12px;
}
#main_content .p-postList__item:hover{
	transition: .4s;
	box-shadow: 0px 5px 14px -4px rgba(0,0,0,0.2);
	transform: translateY(-6px);
}

当ブログと同じカスタマイズにしたい場合は上記のCSSコードを使用します。

「外観 > カスタマイズ > 追加 CSS」または「外観 > テーマファイルエディタ > スタイルシート」にコピペすればOKです!

自分でデザイン・アニメーションをカスタマイズする

上記のCSSコードを自分でカスタマイズしたい人はこちらを参考にしてみてください。

アニメーション時間を指定する

#main_content .p-postList__item{
	transition: .4s; /* 浮かんでから元に戻る時間を指定:.4s=0.4秒 */
	border-radius: 5px;
	padding: 12px;
}
#main_content .p-postList__item:hover{
	transition: .4s; /* 通常時から浮かびあがるまでの時間を指定:.4s=0.4秒 */
	box-shadow: 0px 5px 14px -4px rgba(0,0,0,0.2);
	transform: translateY(-6px);
}

「transition」でアニメーションの時間を指定できます。

浮かぶ記事の角丸・内側の余白を指定する

#main_content .p-postList__item{
	transition: .4s;
	border-radius: 5px; /* 角の丸みをピクセル値で指定 */
	padding: 12px; /* 内側の余白を指定 */
}
#main_content .p-postList__item:hover{
	transition: .4s;
	box-shadow: 0px 5px 14px -4px rgba(0,0,0,0.2);
	transform: translateY(-6px);
}

「border-radius」で浮かぶ記事の角丸を指定、「padding」で内側の余白を指定できます。

ホバー時に縦方向(Y軸)にどれくらい移動するか指定する

#main_content .p-postList__item{
	transition: .4s;
	border-radius: 5px;
	padding: 12px;
}
#main_content .p-postList__item:hover{
	transition: .4s;
	box-shadow: 0px 5px 14px -4px rgba(0,0,0,0.2);
	transform: translateY(-6px); /* 縦方向に移動する距離を指定 */
}

「transform: translateY(〇〇px);」でマウスをホバーしている記事を縦方向にどれくらい移動させるか指定します。〇〇の部分にピクセル値(半角数字)で移動する距離を指定します。

今回は上方向に移動させているのでピクセル値をマイナス(-)にしています。

ホバー時の影を指定する

#main_content .p-postList__item{
	transition: .4s;
	border-radius: 5px;
	padding: 12px;
}
#main_content .p-postList__item:hover{
	transition: .4s;
	box-shadow: 0px 5px 14px -4px rgba(0,0,0,0.2); /* ホバー時の影を指定 */
	transform: translateY(-6px);
}

「box-shadow」でホバー時の影を指定できます。色んなやり方があるので下リンクを参考に自分でデザインするのがオススメです。

サルワカ:【CSS】box-shadowで影をつける方法とサンプル集

ブロガー必見!ブログ×プログラミングは相性抜群

ブログ運営しているとプログラミングに興味が湧いてくる方が多いはずです!

けど、プログラミングに一度も触れたことがない方にとって「難しいから自分にはどうせプログラミング無理」と思ってしまっている方がほとんどだと思いますが、実際は違います。

3日あればブログ運営に必要なプログラミングスキルは身につきます!

「嘘でしょ!」と思うかもしれませんが、私を含め一般的なブロガーに必要なプログラミングスキルとは、本記事でも紹介した「CSS」だけでなので早い人なら1日、長くても3日あれば基本的なCSSのスキルは習得できます。

また、プログラミングを知ることで「高単価案件」プログラミングスクールのアフィリエイト記事が書けるようになるのでブログネタを作るのにも役立ち「一石二鳥」です!

こんな感じのアフィリエイト記事が書ける↓

読者の方で「プログラミングとは何か?」「効率的な学習方法は?」など気になる方はプログラミングスクールの無料カウンセリングで相談してみるのがオススメです!

私は現時点で8つのプログラミングスクールの無料カウンセリングで話を聞いてきましたが、優良プログラミングスクールではカウンセラーさんの対応が丁寧で何度も質問できるので情報収集をするのにとても重宝しました。

未経験者で教養(ブログのため)でプログラミングを学ぶことに興味がある方は「侍エンジニア塾」または「テックアカデミー」の無料カウンセリングで話を聞いてみるのがオススメです!

  • URLをコピーしました!
目次
閉じる