SWELL

SWELL｜ボックスメニューのカスタマイズ案

CSSを使ったSWELLのボックスメニューのカスタマイズ案

CSSを使ったSWELLのボックスメニューブロックのカスタマイズ集です。

デフォルトのままで十分に洗練されたデザインになっているため、あくまで「人と同じは嫌だ」という人に向けた差別化デザインとなります。（何か思いつけばまた追加します）

CSSの適用方法はこちらを参考にしてください。
WordPressのCSS適用方法

ホバーでメインカラーに反転

ホバー時に背景色がメインカラーに反転するCSSです。
文字と併せて画像の色も変えるため、画像 (アイコン) は svg を使用します。

マウスホバーで背景が変わるSWELLのボックスメニューカスタマイズ

設定項目

  • ボックスメニューのスタイルは「標準」
  • アイコンは svg画像を使用
  • テキストをメインカラーに変更
.swell-block-box-menu__link:hover{
  background: var(--color_main) !important; /*ホバー時の背景色*/
  color: white !important; /*ホバー時の文字色*/
}
.swell-block-box-menu__link:hover .swell-block-box-menu__figure svg{
  color: white !important; /*ホバー時のアイコン色*/
}

メインカラー以外の色にしたい場合は、サイドバーからテキストとアイコンの色を任意の色にして、CSS 2行目をbackground: #任意の色 に変更してください。

立体ボタン

ホバー時に凹むシンプルなボタン形式です。

標準ver.

ボタン風デザインのSWELLのボックスメニュー(標準)

設定項目

  • ボックスメニューのスタイルは「標準」
  • ボックスメニューの余白を10pxに設定
  • テキストをメインカラーに変更
.swell-block-box-menu__link:hover{
  background: inherit !important;
}
.swell-block-box-menu__item{
  border: 2px solid var(--color_main) !important; /*枠線*/
  border-radius: 8px; /*角丸*/
  transition: .3s; /*アニメーションスピード*/
  box-shadow:0 4px 0 0 var(--color_main); /*ボックス下線*/
}
.swell-block-box-menu__item:hover{
  box-shadow: none;
  transform: translateY(4px); /*下に4px移動*/
}

塗りつぶしver.

ボタン風デザインのSWELLのボックスメニュー(塗りつぶし)

設定項目

  • ボックスメニューのスタイルは「塗りつぶし」
  • ボックスメニューの余白を10pxに設定
.swell-block-box-menu__link:hover{
  background: var(--color_main) !important;
  box-shadow: none;
  transform: translateY(4px); /*ホバー時の凹み度合い*/
}
.swell-block-box-menu__link{
  border-radius: 8px; /*角丸*/
  transition: .3s; /*アニメーションスピード*/
  box-shadow:0 4px 0 0 var(--color_main_dark); /*ボックス下側の影(線)*/
}
@media (hover: hover){
  .swell-block-box-menu__item:hover{
    opacity: unset !important;
  }
}

メインカラー以外の色を使う場合は、2行目のvar(--color_main)をボタンの色のカラーコードに、9行目のvar(--color_main_dark)をボタンを暗くした色 (下の影用) のカラーコードに変更してください。

暗い色を調べる時はコチラが便利です
指定した色の明るい色・暗い色を調べるツール

ホバーでアイコンが震える

マウスホバー時にアイコンがぼよよんと動くアニメーションを付けます。(標準・塗りつぶし両方で使用可）

ボックスメニューのサンプル
サンプル
（ホバーしてみてください）

設定項目

  • アイコンは svg もしくは透過した png を使用
/*弾むアニメーション*/
@keyframes hopping-anm{
  20% { transform: translateY(3px); }
  40% { transform: translateY(-2.5px); }
  55% { transform: translateY(2px); }
  70%{ transform: translateY(-1px); }
  80%{ transform: translateY(0.5px); }
  90%{ transform: translateY(-0.3px);}
  100% { transform: translateY(0); }
}
/*画像*/
.swell-block-box-menu__item:hover .swell-block-box-menu__figure > svg, .swell-block-box-menu__item:hover .swell-block-box-menu__figure > img{
  animation: hopping-anm 0.6s ease 0s 1 both;
}

アニメーションは一度きりなので、ホバー時のグレー表示・半透明表示はそのまま残しています。

また、アニメーションに柔らかさを加えたい場合は、ぼよよんと弾むアニメーションのCSSを使用してください。