カスタマイズ無料情報

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

※この情報は過去の情報となります。 動作しない可能性もございます。
カスタマイズに興味のある方へのあくまでも参考情報となります。
大変申し訳ございませんがカスタマイズに関するお問合せは承っておりません。

カスタマイズが必要な方は、是非ご依頼ください。

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

カスタムキング奥野のショップページカスタマイズ講座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を使い文字を制限して表示する

商品タイトルの文字数制限カスタマイズ(CSSバージョン)ビフォーアフター

html

	

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


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

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

クラスの追加の場合

	

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

CSS

	

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


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

ピックアップ

  • このサイトもカラーミーショップで作成しています
お見積り内容をみる

SBD記事(読み物)

スタッフブログ

制作代行サービス

コンテンツ

レビュー

社歌ができました
おもてなし認証