【クリエイターモード】テンプレート&moreのスマホ表示で、割引率の帯のデザインを小さくすることはできますか。

テンプレート&moreのスマホ表示で、商品の画像に割引率の帯のデザインがかぶってしまう場合は、CSSの変更で小さくすることが可能です。

＜初期値の表示例＞

◆帯の幅（余白）とフォントサイズを小さくする

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」

末尾に以下を追記（コピー＆ペースト）し保存してください。 

＜CSS例＞

@media screen and (max-width: 768px) {
    .badge { 
      padding: 3px 3px; 
    } 
    .badge, 
    .badge span { 
      font-size: 0.8rem; 
    }
}

◆帯の角度を変える

さらに、ななめの角度をゆるやかにすることで、画像を隠すエリアを小さくできます。

 

 

＜CSS例＞

@media screen and (max-width: 768px) {
    .badge { 
      padding: 3px 3px; 
      top: -5px;
      left: 5px;
      -ms-transform: translateX(-30%) translateY(0%) rotate(-36deg);
      -webkit-transform: translateX(-30%) translateY(0%) rotate(-36deg);
      transform: translateX(-30%) translateY(0%) rotate(-36deg);
    } 
    .badge, 
    .badge span { 
      font-size: 0.8rem; 
    }
}