Xwriteでタイトルの行数を制限する方法｜サイドバー・投稿一覧をCSSで整えるカスタマイズ解説

2026-02-192026-03-20

WordPress

目次 [ close ]

サイドバーランキング・投稿一覧タイトルの行数を制限する方法【XWRITE対応】

サイドバーランキング・投稿一覧タイトルの行数を制限する方法【XWRITE対応】

WordPressテーマ「Xwrite」でサイドバーランキングや投稿一覧のタイトルが長くなりすぎて、レイアウトが崩れてしまうことはありませんか？

この記事では、PCでは3行表示、スマホ・タブレットでは4行表示に制限するCSSカスタマイズ方法を解説します。

完成イメージ

PC表示：タイトル3行まで
スマホ・タブレット：タイトル4行まで
それ以上は自動で省略（…表示）

追加するCSSコード

以下のコードを「外観 → カスタマイズ → 追加CSS」に貼り付けてください。

/* ==========================
 サイドバーランキング・投稿一覧タイトル行数制限
========================== */
.articleListRank .xw-article-media__body--title,
.articleList.type-list .xw-article-media__body--title{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* PCは3行 */
}

/* フォントサイズ指定（必要な場合のみ） */
.articleList.type-list .xw-article-media__body--title{
  font-size: 1.4rem;
}

/* ==========================
 スマホ・タブレットのみ4行
========================== */
@media (max-width: 980px){
  .articleListRank .xw-article-media__body--title,
  .articleList.type-list .xw-article-media__body--title{
    -webkit-line-clamp: 4; /* SP・Tabletは4行 */
  }
}

なぜこの設定が必要なのか？

記事タイトルが長いと、次のような問題が発生します。

ランキングデザインが崩れる
アイキャッチとのバランスが悪くなる
スマホ表示で縦に長くなりすぎる

そこで-webkit-line-clampを使って行数制限をかけることで、見た目を整えながらUXを向上させることができます。

スマホだけに適用したい場合

もし「スマホだけ4行にしたい」場合は、ブレイクポイントを767pxに変更してください。

@media (max-width: 767px){
  .articleListRank .xw-article-media__body--title,
  .articleList.type-list .xw-article-media__body--title{
    -webkit-line-clamp: 4;
  }
}