mamimama asked 5年 前
こんにちは。 handmadeを使っております。 トップページに表示される商品名の字数を統一させる方法はありますでしょうか？ 自店商品の商品名が比較的長いので、文字数によって異なってしまってる各商品アイコンの枠を統一させたいです。 例えば『ゆるっと着るのが可愛いメンズライクチェックシャツ』、『女の子らしいレースでガーリーコーデを叶えるシフォンブラウス』それぞれ表示される字数を１５文字までに設定し、『ゆるっと着るのが可愛いメンズラ…』、『女の子らしいレースでガーリーコ…』にする感じです。 html編集に詳しい方に是非ともご相談させていただきたいです。 宜しくお願いいたします。
BaseDesignInfo Staff answered 5年 前
mamimamaさん、ご質問ありがとうございます。
商品名を任意の文字数で制限する方法、ということですね。
テーマのHTML編集を行いカスタマイズされるという前提でお返事させていただきます。
まずテーマ側ではBASEで用意された専用のタグを組み立ててHTMLが設計されています。商品名タイトルであれば{ItemTitle}というタグで出力されます。ですが、その文字数を制限することはできません。
そのためCSS等で表示としてそのように見せる方法が現実的です。
CSSで「text-overflow」というプロパティがありますがそれを用いて文字数を制限することができます。参考になる記事がありましたのでご参照ください。
https://tech.recruit-mp.co.jp/front-end/tips-ellipsis/
またJavaScriptでも実装することができます。こちらも参考になる記事がありましたのでご参照ください。
http://kachibito.net/snippets/limit-string-lengthtrim-text-with-jquery
それぞれ「文字数 制限 css」などと検索すると他にも情報を見つけることができます。
どうぞよろしくお願いいたします。
入力した商品名は全部出したいのか、mamimamaさんのように省略させたいのか、というのはお店によって様々であるため、テーマとしては難しい所ですが今後の改善事項として検討させていただきたいと思います。
