商品タイトルの文字数制限　３つの方法 ｜ カスタマイズ無料情報 |カラーミーショップ | ネットショップ制作 運営 代行 | SBD スタイル

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

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

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

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

【商品一覧ページ】 下記ソースコード

	

<{$productlist[num].name}>

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

	

<{$productlist[num].cut_name}>

【商品詳細ページ】 下記ソースコード

	

<{$product.name}>

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

	

<{$product.cut_name}>

方法その2. smartyのtruncateを使用して文字数に制限をかけるカスタマイズ

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

【商品詳細ページ】 下記ソースコード

	

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

【商品一覧ページ】 下記ソースコード

	

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

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

方法その3. CSSを使用して文字数に制限をかけるカスタマイズコード

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

html

	

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

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

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

クラスの追加の場合

	

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

CSS

	

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

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