皆様、お力を貸してください。
個別の商品ページの商品タイトル部分で、一部のみテキストサイズを小さくしたいのですが、どうしたらよいでしょうか？
下の写真ですと、120ｍＬの部分のみ小さくしたいと思っています。
よろしくお願いします。
AI-generated summary
個別商品ページのタイトル内の特定箇所（例：「120mL」）だけ文字サイズを小さくしたいという要望。スクリーンショットが添付されているが、理解の補助程度。
提示された方法（推奨はされない）：
- Liquidのreplaceフィルターで該当文字列にHTMLタグを差し込む（文字列置換で生成したタグにスタイルを付与）。
- JavaScriptで該当文字列を検出し、HTMLタグを追加する。
- タイトル自体にHTMLタグを直接記述する。
注意点：
- そのままだと全商品に適用されるため、特定商品のみに限定する条件分岐が必要。
- テーマや出力箇所によってはescapeフィルター（HTMLを無害化する）が設定されており、タグが効かない可能性があるため追加対応が必要。
参考資料：Shopifyフォーラムの関連トピック、Liquidのreplaceフィルター／escapeフィルターの公式ドキュメント。
スキルがない場合は、Liquid・HTML・JavaScriptの学習または業者への依頼を推奨。現時点で実装の結論や確定した解決策はなく、議論は継続中。
あまりお勧めしませんが、いくつか方法が考えられます。
- 該当文言を出力する箇所を探し、replaceフィルターを使ったHTMLタグを追加する
- 該当文言を出力する箇所を探し、JavaScriptでHTMLタグを追加する
- タイトル自体にHTMLタグを入れる
テーマや該当箇所によって違いはありますが、概ね以下のような形でreplaceフィルターによる置換を行えば動作すると思います。(※説明用にスタイル属性を使っています)
{{ product.title | replace: "120mL", "120mL" }}
ただしこのままでは全商品が対象となるため、特定の商品のみに対して置換を動作させたい場合は追加の対応が必要になります。
タイトルにHTMLタグを入れることに関しては以下のフォーラムを参照ください。懸念事項の確認もできます。
https://community.shopify.com/post/1170575
https://community.shopify.com/post/1464754
また、テーマや箇所によってはeccapeフィルターが設定されHTMLタグが無害化される可能性があるため、この点に関しても対応が必要になる可能性があります。
以上ですがLiquidやHTMLやJavaScriptに関するスキルをお持ちでない場合は、学ばれるか業者に依頼されることをお勧めします。
参考:
https://shopify.dev/api/liquid/filters/string-filters#replace
https://shopify.dev/api/liquid/filters/string-filters#escape