細かすぎて伝わらないカスタマイズ② スライダー...Lightning G3 無料版 / VK Blocks / WordPress のカスタマイズ【新館】

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

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

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

カスタマイズ前

ようこそ、
癒しと美の空間へ

Healing and Beauty

当サロンでは、日々の疲れを癒しながら、あなたの内側から美しさを引き出す特別なトリートメントをご提供しています。

完全予約制のプライベート空間で他のお客様を気にせず、あなただけのリラックスタイムをお楽しみいただけます。

はじめての方へ

お客様の声

肩こりやむくみがひどかったのですが、定期的に通うようになって体が軽くなりました。スタッフの方も親切で、毎回癒されています。(40代・女性)

肌の調子がガラッと変わりました！毎朝のメイクのノリが全然違って、鏡を見るのが楽しみになりました。(30代・女性)

結婚式前に通いましたが、ドレス姿に自信が持てました！背中やデコルテのケアも丁寧で、本当に感謝しています。(20代・女性)

年齢によるたるみやくすみが気になっていましたが、施術後は顔がキュッと引き締まった感じがして驚きました。定期的に続けたいです。(50代・女性)

初めてのエステで緊張しましたが、清潔感のある店内と丁寧な説明で安心できました。肌の調子が整い、職場でも好印象です。(男性・30代)

静かで落ち着ける空間に癒されます。贅沢な時間を過ごせて、心も体もリフレッシュできました。(主婦・60代)

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

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

カスタマイズ後

ようこそ、
癒しと美の空間へ

Healing and Beauty

当サロンでは、日々の疲れを癒しながら、あなたの内側から美しさを引き出す特別なトリートメントをご提供しています。

完全予約制のプライベート空間で他のお客様を気にせず、あなただけのリラックスタイムをお楽しみいただけます。

はじめての方へ

お客様の声

肩こりやむくみがひどかったのですが、定期的に通うようになって体が軽くなりました。スタッフの方も親切で、毎回癒されています。(40代・女性)

肌の調子がガラッと変わりました！毎朝のメイクのノリが全然違って、鏡を見るのが楽しみになりました。(30代・女性)

結婚式前に通いましたが、ドレス姿に自信が持てました！背中やデコルテのケアも丁寧で、本当に感謝しています。(20代・女性)

初めてのエステで緊張しましたが、清潔感のある店内と丁寧な説明で安心できました。肌の調子が整い、職場でも好印象です。(男性・30代)

静かで落ち着ける空間に癒されます。贅沢な時間を過ごせて、心も体もリフレッシュできました。(主婦・60代)

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

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

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

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

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

/* コンパクトなスライダーに合う、小さく控えめなページネーション */
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 ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

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

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