1 4

【カスタマイズ】商品一覧のタイトルを 3行にするCSS

【カスタマイズ】商品一覧のタイトルを 3行にするCSS

更新日:

実装環境:Dawn バージョン15.2.0

ご購入特典:コピペできるサンプルコード

免責事項

カスタマイズ・設置・勉強会につきましてご希望の方は別途ご依頼お伺いいたしますのでご相談ください。

※Shopifyの仕様上利用出来なくなった場合は削除する場合がございます。

当サイトの運営方針と利用上の注意

  • 運営方針
    当サイトは個人運営であり、私自身がEC作業を効率化するために利用することを目的としています。
    掲載内容は、私個人の見解や経験に基づいたものです。
  • Shopifyアップデートによる影響
    Shopifyのアップデートによって、掲載内容が利用できなくなる可能性があります。
  • 掲載内容の取り扱い
    当サイトの情報は参考資料としてご利用ください。
    実装前には、必ずテスト環境での動作検証を行ってください。
  • 責任範囲
    実装に伴う不具合や損害について、当サイトは一切の責任を負いかねます。
    あくまでも参考情報として活用してください。
  • 内容の変更・削除
    サイトの内容は予告なく変更または削除される場合があります。
  • 保証の範囲
    特定の実装方法や機能の動作を保証するものではありません。
  • 返金キャンセルにつきまして
    デジタルで閲覧の性質上、１度ご購入いただいた商品の返金には一切応じられません。あらかじめご了承ください。
  • お問い合わせについて
    内容のカスタマイズや設定をご希望の場合は、お気軽にお問い合わせください。
B!
詳細を表示する

目次

  • 元の表示
  • ３行の表示例はこちら
  • 指定部分の class を３行に制限するCSSを作成
  • 指定個所に記入

商品一覧画面でタイトルが長すぎる時「３行」に制限するCSSです。

元の表示

 

３行の表示例はこちら

 

指定部分の class を３行に制限するCSSを作成

 

指定個所に記入

カスタマイズ から「特集コレクション」「デフォルトのコレクション」等、商品一覧が表示されるセクションの　カスタムCSSの項目にCSSを記入します。

 

 

 

ご購入いただくと、続きをご覧いただけるようになります。

0円 (税込)
すでにご購入済みの方は こちらから ログインしてください。

  • 【ご注意】

    • 返金&サポートはしておりません。
    • Shopifyカスタマイズ・Excel等が使用できる作業者様用です。設置・使用環境の違いによる不具合・カスタマイズは別途お見積もりいたしますのでお問い合わせ下さい。
    • 下記の続きの内容に記載の日時・記載されている内容等をご確認ください。
    • 使用する時は必ずテスト環境でテストし、バックアップを取ってからご利用ください。

続きの内容


更新日:
実装環境: Dawn バージョン15.2.0

-----------------

コピペできるサンプルコード

CSS

 

商品一覧のタイトルを３行にするCSSはこちら

 

 

/* ①商品一覧の長すぎるタイトルを3行に */

.card__heading.h5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3; /* 3行で制限 */
  text-overflow: ellipsis;
  line-height: 1.2; /* デフォルトの行間に依存 */
  max-height: calc(1.2em * 3); /* 行間 x 3行分 */
}

 

 

追加ご依頼可能です

内容 価格
ご依頼相談ZOOM 無料(初回)
記事内容について
カスタマイズ・設置		 11,000円(税込)～
商品データ移行・登録
(データご準備あり)		 1商品220円(税込)～
最低ご依頼価格44,000円～
商品登録勉強会zoom 1時間11,000円(税込)
Shopify構築
(テーマ利用シンプル + 商品データ移行)		 330,000円(税込)～550,000(税込)程度

商品データ・顧客データの移行含む Shopify 構築・1万点以上の商品データ移行・ネクストエンジン導入等ご相談可能です。下記お問い合わせよりご連絡ください。※ご相談後お見積もりとなります。

お問い合わせ

お問合せ内容*

チェックリスト