ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

TCDテーマCURE:トップページの「診療案内一覧」の抜粋文を4行以上表示させる方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.診療案内一覧の抜粋文を4行目まで表示させることはできますか?

▼変更箇所イメージ
変更箇所イメージ

A.カスタムCSSで対応できます。

管理画面のTCDテーマ > 基本設定 > カスタムCSSエリアに以下のCSSを記載してください。

抜粋文の表示行数調整

▼参考CSS

.index_service_list .service_list .item .desc span {
    -webkit-line-clamp: 4;
}

.index_service_list .service_list .item .desc {
    max-height: 8em;
}

上記対応で、抜粋文は4行目まで表示されます。
また、5行目まで表示させたい場合は、上記の-webkit-line-clampを5に、max-heightを10emに変更してください。
※ max-heightには表示させたい行数×2emを設定くださいませ。

▼修正後変更箇所イメージ
変更箇所イメージ

抜粋文の行数は変更せずに、もう少しだけ文章のコンテンツの幅を広げたい(左右のpaddingを減らしたい)という方は、以下の記事を参考にしてください。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事