投稿記事を３行だけ表示するように変えてみた

※最初は外観テーマを「Twenty Seventeen」使っていたのでこの設定をしました。現在はcocoonに変更したので別の設定にしています。

これまでＣＳＳも勉強してきたけど、テンプレートっぽいデザインを使って形を作成してしまうと、自動で設定されてしまうことを変更するのが難しい。

他人が作ったプログラムの中をみて変更するのは難しい・・。

ということでAIさんに質問して、CSSを追加してみた。

解決できてうれしい！！

追加したＣＳＳ:

/* 自分の選択したデザイン用：記事一覧の本文を3行に制限 */
.site-main .entry-content, 
.site-main .entry-summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* ここで3行に指定 */
    overflow: hidden;
}

/* 段落間の余白で4行目が見えてしまうのを防ぐ */
.site-main .entry-content p, 
.site-main .entry-summary p {
    margin-bottom: 0;
    display: inline; /* 複数の段落があってもつなげて計算する */
}