商品マークがきちんと表示されない

ヘルプの必要なページは WordPress ですね💦
大変失礼いたしました<(_ _)>
私の確認不足です。

ショッピングサイトでは、「接触冷感素材」の部分に以下の CSS が当たっています。

.fs-c-productMark__mark {
    border-radius: 3px;
}
.fs-c-productMark__mark--38 {
    color: #fff;
    background: #39bddb;
}
.fs-c-productMark__mark {
    display: block;
    margin-right: 2px;
    font-size: 0.8em;
    line-height: 1;
    padding: 4px 8px;
}

View post on imgur.com

これを WordPress 側の以下の部分に適用すれば同様の表示になるかと思います。

View post on imgur.com

外観 → カスタマイズ → 追加 CSS に追記してみてください。

.fs-c-productMark__mark--38 {
    color: #fff;
    background: #39bddb;
}

.fs-c-productMark__mark {
    font-size: 0.8em;
    padding: 4px 8px;
}

※ 最後の行の 4px を 2px にするなどして高さを調整してみてください。

もしも効かないようでしたらその旨お知らせください。

▼こちらの場合は

View post on imgur.com

以下の CSS でラベル色を制御

/* 接触冷感素材 */
.fs-c-productMark__mark--38 {
    color: #fff;
    background: #39bddb;
}

―

▼こちらの場合は

View post on imgur.com

以下の CSS でラベル色を制御

/* 2点20％OFF */
.fs-c-productMark__mark--17 {
    color: #5c5c5c;
    background: #d9bae3;
}

―

▼こちらの場合は

View post on imgur.com

以下の CSS でラベル色を制御

/* 速乾×UVカット */
.fs-c-productMark__mark--37 {
    color: #fff;
    background: #289ca1;
}

―

･･･というふうに、ラベルごとに色分けがなされているようですよ。

前回のものと合わせると▼こんなふうになると思います。
(他のラベルの色も拾ってきてみています。)

/* 動画あり */
.fs-c-productMark__mark--7 {
    color: #5c5c5c;
    background: #ffb3b3;
}
/* 2点20％OFF */
.fs-c-productMark__mark--17 {
    color: #5c5c5c;
    background: #d9bae3;
}
/* 速乾×UVカット */
.fs-c-productMark__mark--37 {
    color: #fff;
    background: #289ca1;
}
/* 接触冷感素材 */
.fs-c-productMark__mark--38 {
    color: #fff;
    background: #39bddb;
}
/* 30%OFF・50%OFF */
.fs-c-productMark__mark--42 {
    color: #fff;
    background: #f35aa3;
}
/* 共通 */
.fs-c-productMark__mark {
    font-size: 0.8em;
    padding: 4px 8px;
}

※ 最後の行の 4px を 2px にするなどして高さを調整してみてください。

• この返信は1ヶ月、 4週前に瀬戸内ことり (Setouchi Kotori)が編集しました。

解決したとのこと、何よりです^^

※ 最後の行の 4px を 2px にするなどして高さを調整してみてください。

今回の場合はマージンではなく👆これですねー。調整してみてください。