採用サイト制作に最適なWordPressテーマ「ISSUE」の機能概要

ワードプレステーマ別

TCDテーマGAIA:カレンダーで表示される行数を変更する方法

Q.質問内容

・テーマの仕様では2行までしか表示されませんが、イベント名の都合上、3行以上表示させたいです。
・カレンダーの高さをもう少し高くしたいです。

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

A.下記の方法でカスタマイズしてください。

【TCDテーマ】 > 【基本設定】 のカスタムCSSに、下記CSSを入力してください。

/* カレンダーの行数変更 PC */
.p-calender__body-item__comment-text span,
.p-calender__body-item__comment-text  a{
  -webkit-line-clamp: 3; /* 行数 */
}
.p-calender__body-item__comment-text{
  height: calc(1.6em * 3); /* 高さ */
}

/* カレンダーの行数変更 スマホ */
.p-calender--sp__body-item--caption-text span,
.p-calender--sp__body-item--caption-text  a{
  -webkit-line-clamp: 3; /* 行数 */
}
.p-calender--sp__body-item--caption-text{
   max-height: calc(1.6em * 3); /* 高さ */
}

上記は、「3行」表示させる場合の記述になります。
もし3行以上表示させたい場合は、「3」の値を増やしてください。

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

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

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