商品タイトルの文字数制限　３つの方法

商品タイトルが長すぎて一覧などのタイトルのレイアウトが崩れてしまうあなたへ・・・

カスタムキング奥野のショップページカスタマイズ講座vol.1にて、「商品タイトルが長すぎてレイアウトが崩れてしまう」というご相談をいただきました。
　そこで今回は、文字数を制限をして商品タイトルを表示するカスタマイズをご紹介させていただきます。

方法その1. カラーミーショップの独自タグ(cut_name)を使用して文字数に制限をかけるカスタマイズ

　商品一覧や商品詳細の商品タイトルでcut_nameを使用することができます。このタグは商品タイトルの文字を15文字に制限をして表示する事ができます。

	  <{$productlist[num].name}>

　商品一覧で上記のコードを探して下記のように修正します。

	  <{$productlist[num].cut_name}>

	  <{$product.name}>

商品一覧で上記のコードを探して下記のように修正します。

	  <{$product.cut_name}>

注意：このtruncateにはバグがあります。日本語の場合、最後の文字が文字化けする可能性があります。

	  <{$product.name|truncate:15:"...":true}>

	  <{$productlist[num]|truncate:15:"...":true}>

黄文字の数字が文字を制限する数です。

商品一覧や商品詳細の商品タイトルのCSSを使い文字を制限して表示する

	  <h3 class="item_cut_name">商品タイトルの文字数制限</h3>

　上記のように商品のタイトルを表示しているhtmlを探し出しclassにitem_cut_nameを追加して下さい。

　また、もしもすでに何らかのクラスがあった場合は、スペースを入れて追加して下さい。

	  <h3 class="title item_cut_name">商品タイトルの文字数制限</h3>

	  .item_cut_name {     overflow: hidden;     text-overflow: ellipsis;     white-space: nowrap;     width: 223px; }

　上記のwidthの数字を増やせば文字を表示する文字数を増やせます。減らす場合は数字を下げれば文字数を減らせます。