SWELLのリッチカラムで作ったボックスを、ホバーする（マウスをのせる）とふわっと浮き上がるCSSをまとめました。
思わずクリックしたくなるようなおしゃれなデザインです。
- カラムブロックの角を丸くする
- マウスをホバーしたときに、カードがふわっと浮き上がるエフェクトができる
- ホバー時の背景色がうっすら変わる
こんな感じ⬇︎です。
ふわっとなるCSSの書き方
思わずクリックしたくなるおしゃれなデザイン！
ふわっとなるCSSの書き方
マウスをホバーしたときに、ふわっとなります。
ふわっとなるCSSの書き方
マウスをホバーしたときに、ふわっとなります。
画像サイズや容量の最適化について先に確認しておきたい方は、こちらの記事もあわせて確認してみてください。
ブロックの四角を丸くして、ホバーでふわっとなるcssの作り方
まずはリッチカラムでブロックを作成します。
【手順1】リッチカラムでホバーさせたいデザインを作成
- 右上の［＋］ボタンをクリックし、ブロックメニューを表示
- 検索から［リッチカラム］を選択
- 本文中にカラムができるので、列数を選択
- カラム内のデザインを整える
こんな感じで、まずデザインのみ作成してみました。
ふわっとなるCSSの書き方
思わずクリックしたくなるおしゃれなデザイン！
ふわっとなるCSSの書き方
マウスをホバーしたときに、ふわっとなります。
ふわっとなるCSSの書き方
四角を丸くして、やわらかい印象を出すことができます。
しかし、このままだとブロックの境界が分かりづらくペラっとしているので、ここから立体感がでるように調整していきます。
【手順2】エフェクトをかけたい部分にCSSクラスを設定する
まずは、ふわっとエフェクトを適用したい部分にCSSのクラスを設定します。
- リッチカラムのブロックを１つ選択
- 右のツールバー「高度な設定 ＞ 追加CSSクラス」からクラス名（例：col-card-float）を入力
- 同じエフェクトをかけたい他のブロックにも同様に設定
カラムブロックがうまく選択できない場合、カラム内のどこかをクリックすると、画面下にブロック階層が表示されます。
ここで「カラム項目」を選択すると簡単にブロックが選択できます。
【手順3】四角を丸くして、ふわっと立体感のでるエフェクトCSSを書く
WordPressの左メニュー「外観 ＞ カスタマイズ」から［追加CSS］を選択します。
ここに、以下のCSSを記入します。
/* リッチカラムcol-card-float：通常状態のスタイル */
.col-card-float {
border-radius: 10px;
overflow: hidden;
box-shadow:
0 2px 4px rgba(0,0,0,0.06),
0 8px 16px rgba(0,0,0,0.10);
transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
/* リッチカラムcol-card-float：ホバー時のスタイル */
.col-card-float:hover {
background: #f0f8ff;
transform: translateY(-6px);
box-shadow:
0 6px 12px rgba(0,0,0,0.08),
0 16px 32px rgba(0,0,0,0.14);
}CSSコードを書いたら、忘れずに［公開］をクリックします。
結果は、こんな感じになります。
ふわっとなるCSSの書き方
思わずクリックしたくなるおしゃれなデザイン！
ふわっとなるCSSの書き方
マウスをホバーしたときに、ふわっとなります。
ふわっとなるCSSの書き方
四角を丸くして、やわらかい印象を出すことができます。
四角のカーブやホバーしたときの色などアレンジしたい場合は、数値やカラーコードを変更していろいろ試してみてください。
- 角の丸み → border-radius
- 影 → box-shadow
- 位置を動かす（浮いて見せる） → transform: translateY
これらの数値やカラーコードを変更することで、好みに合わせて調整できます。
ブロックの四角を丸くしたくない場合は、以下の2行を削除してください。
border-radius: 10px;
overflow: hidden;テーマ側のCSSと競合している可能性があるので、その場合はセレクタを以下のように変更すると改善することがあります。
.col-card-float → .swell-block-column.col-card-float
※SWELLのバージョンやカスタマイズ状況によってクラス構造が異なるため状況に応じて調整してください。
【手順4】カラム内のpadding（内側の余白）を調整する
このままだと、左右・下に余白がなく文字のバランスがよくないため、カラム内のpadding（余白）を調整します。
- 余白をつけたい段落を選択
- 上部メニューの［グループ化］をクリック
これでグループ化できました。
このように、グループはあとから複数のブロックをまとめて作成することもできますが、左上の［＋］ボタン（ブロック追加メニュー）から「グループ」を選択して追加すると、最初からグループとしてブロックを作成することも可能です。
- グループを選択
- 「高度な設定 ＞ 追加CSSクラス」からクラス名（例：col-inner）を入力
- 他の部分も同様に設定
グループが選択しにくい場合、カラム内をクリックすると、画面下のブロック階層が表示されます。
ここで［グループ］をクリックすると、グループ化した部分を簡単に選択できます。
WordPressの左メニュー「外観 ＞ カスタマイズ」から［追加CSS］を選択して、以下のコードを追記します。
/* カラム内のpadding*/
.col-inner {
padding: 0 0.7em 0.7em;
}上のCSSは「上・左右・下」で設定しています。
「上・右・左・下」を個別に指定したい場合は、以下の書き方でも問題ありません。
padding: 0 0.7em 0.7em 0.7em;ブロック内の余白を整えることで、バランスがよくなり読みやすくなりました。
ふわっとなるCSSの書き方
思わずクリックしたくなるおしゃれなデザイン！
ふわっとなるCSSの書き方
マウスをホバーしたときに、ふわっとなります。
ふわっとなるCSSの書き方
四角を丸くして、やわらかい印象を出すことができます。
これで完成です。
【補足】リッチカラムのシャドウ機能を使う方法
SWELLのリッチカラムには、デフォルトで「シャドウ」の機能があります。
これを使うと余白と影が自動でつくので、手軽にカード風のデザインにできます。
「シャドウ」を利用する場合はブロック内に余白ができるので、padding（ブロック内の空白）を調整するCSSコードを記載する必要がないから便利。
ただし、画像の周りにも余白が入ってしまうのが難点です。
画像をブロック全体に目一杯表示しつつ、テキストの余白だけ調整したい場合は、この記事で紹介したCSSの方法を使ってください。
なつP画像がアイコンなどの場合は、「シャドウ」が便利！
まとめ
この記事では、SWELLのリッチカラムにホバーエフェクトをつける方法を紹介しました。
- クラス名をつけてCSSを追記して設定できる
- 数値やカラーコードを変えて自分好みにアレンジ！
- グループ化してpaddingを調整するとさらに完成度UP！
サイトに動きが出ておしゃれな印象になります。
ぜひ取り入れてみてください。
