楽天商品名文字の色変更

Question

楽天商品名内で　●●●◆◆◆★★★　となっていたとして
最初の●●●ここまでだけに文字色変更を指定すると
いったことは実装可能なことでしょうか？

条件は●●●の●●●の文字数は各商品ごとに異なります。

もしくは、先頭からや最後からの文字数固定なら可能であればその方法でも構いません。

よろしくお願いします。

Answer

ECマスターズの田中です。

> 楽天商品名内で　●●●◆◆◆★★★　となっていたとして
> 最初の●●●ここまでだけに文字色変更を指定すると
> いったことは実装可能なことでしょうか？

はい、実装可能です。
スタイルシートには、:first-lineという疑似要素があるので、
これを利用することで実装することができます。
http://www.htmq.com/selector/first-line.shtml

楽天の商品ページにて、たとえば、

.item_name { display: block; }
.item_name:first-line { color: red; }

というスタイルシートを適用することで、
商品名の最初の行の文字色を赤くすることができます。
（FBさんのショップには、1行目の「display:block;」はすでに適用されているため、記載不要です）

楽天 商品名 文字の色変更

楽天商品名文字の色変更