1. HOME
  2. お店をカスタマイズ
  3. デザインをカスタマイズ
  4. 売上アップ!?割引率を目立たせるための強調系デザインカスタマイズ

売上アップ!?割引率を目立たせるための強調系デザインカスタマイズ

  • 更新日:-

最近「割引率や特定の文字をもっと目立たせたいけど、いい方法はありませんか?」といった内容のご相談をよくいただきます。

なので、今回は以前ご紹介した割引率を表示させる値引きテクニックを例に、値引き表示部分をさらに目立たせる方法をご紹介します。

割引率の表示方法は以前の記事を参考にしてください。

背景色をつけてアイコン風にして目立たせる

カラーミーにもあるのように、背景色のついたアイコン風にして表示する方法。

まず、値引き表示部分を下記のようにしてください。

次にCSS編集の欄に下部にを貼り付け、飾り付けをします。

背景色やフォントサイズなどはご自分のテンプレートに合わせて調整してみてください。

ギザギザのバッジ風にして目立たせる

今回は画像を使わず簡単によく見るあのギザギザバッジ風にして表示する方法。

それではまず、値引き表示部分を下記のようにしてくだい。

次にCSS編集の欄に下部にを貼り付け、飾り付けをします。

背景色やフォントサイズなどはご自分のテンプレートに合わせて調整してみてください。

また、アイコン風に比べて表示が大きいので、絶対配置で写真の上に持ってきたりすると邪魔にならずよいかもしれません。

お試しください。

文字に点滅の動きをつけて目立たせる

文字が消えたり表示されたりといった点滅の動きを文字につけて目立たせます。

どこもかしこも点滅を使うと、うるさい感じになるので使いすぎ注意です。値引きのワンポイントくらいがおすすめ!

それではまず、値引き表示部分を下記のようにしてくだい。

次にCSS編集の欄に下部にを貼り付け、飾り付けをします。

5行目と6行目の「1s」という部分が点滅間隔になっており、こちらはお好きに変えて点滅間隔を調整してください。

5行目と6行目の点滅間隔はどちらも同じ値に設定することをおすすめします。

また、アイコン風やギザギザバッジ風と併用して使うこともできるのでお試しください。

まとめ

今回はカラーミーを契約してさえいればCSSだけで簡単に目立たせることができるテクニックのご紹介でした。

「○○%引きを表示しているだけじゃダメだ!もっと目立たせたい!」と思っていた人はぜひぜひお試しください 🙂

また、「こんな表示してみたいんだけど・・・」なんというのがありましたら、コメントで教えてください!