TOPページに表示される記事タイトルの文字数を制限したいです。



  • いつもお世話になっております。

    記事タイトルの文字数の違いによりTOPページのレイアウトのバランスが悪くため、
    TOPページに表示される記事タイトルの文字数を制限したいです。

    独自のカスタマイズに関する質問で大変恐縮ですが、
    自分なりに調べてみても解決策にたどり着けなかったため、
    ご教示願えないでしょうか。

    何卒よろしくお願いいたします。0_1632626229168_2021-09-26_質問.png


    WordPressのバージョン :
    ご利用のサーバー名 :
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL :



  • @avstation さん

    こんにちは!

    文字数より行数の方が良いかもしれませんね。

    こちらの記事の「3点リーダーの表示方法(複数行の場合)」という
    見出し部分の内容が参考になると思いますので、ご参考になさってください。

    https://lopan.jp/omit-text/

    TOPページに表示される記事タイトルとの事でしたので、追加CSSに書く際は
    CSSを指定する対象を「.home .post-list-title」とすれば大丈夫だと思います。

    よろしくお願いいたします。



  • Tsuno_様

    ご回答ありがとうございます。
    仰る通り行数で制限した方が分かりやすく良かったです。

    下記のコードを追加CSSに記述することで、
    TOPページの記事タイトルを2行に制限できました。
    ※他の方にも参考になるかもしれないので表記しておきます。

    .home .post-list-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    }

    ですが、伝え方を間違えました。すみません。
    TOPページだけでなく、
    カテゴリーページ、タグページ、関連記事、ランキングなど
    個別投稿のページ以外、すべてを同じようにタイトル制限したいのですが、
    その場合はどうすれば良いでしょうか。

    二度手間ですみまんせん。



  • @avstation さん

    申し訳ありませんがカスタマイズの話になってしまいますので、
    細かい設定に関しましては、avstation さんご自身でカスタマイズしていただければと思います。

    ひとまずTOPページへの限定を無くすために、
    追加cssの 「.home」の部分を外してみてはいかがでしょうか?

    よろしくお願いいたします。



  • Tsuno_様

    承知しました。
    サポート範囲外の質問で申し訳ありません。

    アドバイスを頂けたので規則正が分かり、
    すべてカスタマイズすることが出来ました。
    ご回答ありがとうございます。
    助かりました!