細かすぎて伝わらないカスタマイズ② スライダー

カスタマイズ結果を見て自分だけニンマリして、自分以外のほとんどの人は気づかない「細かすぎて伝わらないカスタマイズ」シリーズの第2弾です。

スライダーで作ったお客様の声

お客様の声が1件ずつ表示されてスライド動作するコンパクトなデザインにしました。エステサロンのサイトで使うことを想定して作ったブロックパターンですが、他の業種でも役に立ちますし、お客様の声以外にもさまざまな用途で使えると思います。

カスタマイズ前

カスタマイズ前の時点ですでにいろいろとカスタマイズしていますが...😓

スライダーの下に表示されているページネーションを以下のようにカスタマイズしてみました。

カスタマイズ後

コンパクトなスライダーの場合、デフォルトのページネーションだと目立ち過ぎるので、小さく控えめなページネーションにしてみました。

細かすぎて伝わらないカスタマイズの内容は小さいドットに設定したマウスホバーの動きです。

小さいドットにマウスを合わせると、ぽよんぽよんという動きをします。

小さく控えめなページネーションにカスタマイズしたマウスホバーの動きのため、なかなか気づいてもらえなし、そもそも多くのユーザー（スマホだとほぼ全員）がスワイプで切り替えるので、使ってもらえないところがポイントです。

細かすぎて伝わらないカスタマイズコード

/* コンパクトなスライダーに合う、小さく控えめなページネーション */
body .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    transition: all .3s linear;
    outline: none;
    background-color: #ccc;
}
body .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 20px;
    background-color: #ccc;
}



/* 細かすぎて伝わらないマウスホバーの動き */
@keyframes bullet-beat {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}
body .swiper-pagination-bullet:hover {
    animation: bullet-beat 1.5s linear 0s 1 normal both;
}
body .swiper-pagination-bullet.swiper-pagination-bullet-active:hover {
    animation: none;
}

投稿者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• カスタマイズ2025年5月6日細かすぎて伝わらないカスタマイズ② スライダー
• カスタマイズ2025年4月16日VK Blocks のアラートブロックをレスポンシブ対応したカスタマイズ
• カスタマイズ2025年4月14日VK パターンライブラリのフォロー CTA をカスタマイズ
• WordPress2025年2月9日WordPress 6.7 のカテゴリー一覧ブロックのありがたい点と困った点