カスタムCSS

ビジュアルエディタでは対応できないスタイル設定のために、Sami Product Labelsには組み込みのCSSエディタがあります。また、z-indexによるバッジの重なりの制御、ホバー時のツールチップの追加、画像バッジのaltテキストの設定もできます。

カスタムCSSを追加する方法

1. バッジエディタを開く

   Sami Product LabelsでBadges & Labelsに移動します。Create badgeを選択するか、既存のバッジのActions列にあるEdit badge/labelアイコンを選択します。

2. Designタブに移動する

   バッジエディタでDesignを選択します。エディタを開くと、このタブがデフォルトで選択されています。

3. Advanced Settingsまでスクロールする

   Designタブの下部付近にあるAdvanced settingsを展開します。

4. 「Custom css」を有効にする

   Advancedの下で、Custom cssをオンにします。

5. セレクターを挿入してCSSを追加する

   CSSエディタが表示され、CSS referenceの下に3つのオプションがあります。

   • .samita_productLabel-contentはバッジ全体のスタイルを設定します。
   • .samita_productLabel-content-textはテキストバッジのスタイルを設定します。
   • .samita_productLabel-content imgは画像バッジのスタイルを設定します。

   必要なオプションを選択します。アプリが、現在のバッジIDで範囲を限定したセレクター（.__content--94129など）をエディタに挿入します。セレクターのバッジ固有の部分はそのまま残し、波括弧の中に必要な宣言のみを追加します。

   /* Use the badge ID inserted by the app in place of YOUR_BADGE_ID. */
   .samita_productLabel-content.__content--YOUR_BADGE_ID {
     box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
   }
   
   .samita_productLabel-content.__content--YOUR_BADGE_ID:hover {
     transform: scale(1.1);
     transition: transform 0.2s ease;
   }

   

   CSS referenceでクラスを選択すると、バッジ用に範囲を限定したセレクターがCustom CSSエディタに挿入されます。

6. プレビューして保存する

   編集しながら、ライブプレビューを確認します。結果に問題がなければSaveを選択し、ストアフロントの該当するコレクションページまたは商品ページでバッジを確認します。

注意

カスタムCSSはこのバッジとともに保存されますが、影響を与えられるストアフロントの要素は、セレクターによって決まります。アプリが生成した、バッジ用に範囲を限定したセレクターはそのまま残してください。.samita_productLabel-contentのような広いセレクターを単独で使用すると、他のバッジにも一致する場合があります。

Z-indexの制御

商品画像のオーバーレイ、固定ヘッダー、他のバッジの後ろに隠れてしまうバッジを修正します。

1. Advanced settingsで、Z-indexを有効にします。
2. 1～100の値を入力します。値が大きいほど、z-indexの値が小さい要素よりも前面にバッジが表示されます。

z-indexの値を設定して、バッジの重なりを制御します。

ノート

z-indexは、テーマによって作成されるスタックコンテキストの影響も受けます。バッジの値を上げても前面に表示されない場合は、テーマの親コンテナに独自のCSSの調整が必要な場合があります。

ホバー時のツールチップ

顧客がバッジにマウスを合わせたときに表示されるツールチップを追加します。商品画像をごちゃごちゃさせずに、「New Arrival」や「Limited Edition」の意味を説明するのに便利です。

1. Advanced settingsで、Show tooltip on hoverを有効にします。
2. ホバー時に表示するツールチップのテキストを入力します。

顧客がバッジにマウスを合わせたときに表示される、ツールチップのテキストを追加します。

重要な情報をツールチップだけに記載しないでください。タッチスクリーンのユーザーやキーボードで操作する顧客は、ホバー状態にならない場合があります。

画像バッジのSEO用altテキスト

スクリーンリーダーが画像バッジの意味を伝えられるよう、altテキストを設定します。わかりやすいaltテキストは、画像のSEOにも役立ちます。

1. Advanced settingsで、Seo alt textを有効にします。
2. バッジが伝えるメッセージを、「20% off sale badge」や「Free shipping label」のように簡潔に入力します。キーワードの詰め込みや、「image of」のような表現は避けてください。

アクセシビリティとSEOのために、altテキストを設定します。

次のステップ

• バッジのスタイルを変更する — ビジュアルエディタのコントロールを使って、バッジをカスタマイズします。
• バッジの位置を変更する — ページ上の適切な場所にバッジを配置します。

ヒント

サポートが必要な場合

手順の途中で問題が発生した場合は、[email protected]までお問い合わせください。