SWELL-投稿リストブロックのタイトル2行・抜粋を3行にする

トップページの投稿リストブロックの表示が美しくない

トップページには、投稿リストブロックを計4つとRSSブロックを1つ配置して、最新の記事と各カテゴリー毎の最新の記事をカード形式で掲載していたのですが、タイトルの長さや抜粋の長さがマチマチで縦に長かったり短かったりしてどうにも雑然としていました。

これをcssで整形してタイトル2行・抜粋3行にしました。

cssを追加して、こんな感じのタイル状のレイアウトになりました。

投稿リストブロック(カード型)のタイトルを2行に抜粋を3行にするCSS

以下が、投稿リストブロック(カード型)のタイトルを2行に抜粋を3行にするCSSのコードです。

/* タイトルを2行に制限 */ 
#main_content .swell-block-column .p-postList__body > h2.p-postList__title { 
	display: -webkit-box; 
	-webkit-box-orient: vertical; 
	-webkit-line-clamp: 2; 
	overflow: hidden; 
	text-overflow: ellipsis; 
	word-break: break-word; 
	line-height: 1.5; 
	min-height: 3em; }
/* RSSブロック内のタイトルには制限をかけない */
#main_content .swell-block-rss .p-postList__title {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  text-overflow: unset !important;
  min-height: auto !important;
}

/* 抜粋を3行に制限 */
.p-postList__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

経緯-Copilotに相談する

SWELLでトップページの記事一覧（例えば「新着記事」や「ブログ一覧」など）の抜粋文字数を任意に変更するには、いくつかの方法があります。SWELLはテーマとしてかなり柔軟ですが、抜粋の扱いはWordPressの仕様と絡むため、以下のようなアプローチが考えられます。

🛠 方法①：excerpt_length フィルターを使う（全体に影響）

これは WordPress の標準的な方法で、the_excerpt() を使っている箇所すべてに影響します。

function custom_excerpt_length( $length ) {
    return 80; // 任意の文字数（単語数ではなく文字数に見えるが、実際は単語数）
}
add_filter( 'excerpt_length', 'custom_excerpt_length' );

⚠️ 注意：この方法は「単語数」で制御されるため、日本語では意図通りにならないことがあります。

🧩 方法②：SWELLの独自関数を使って抜粋を制御（推奨）

SWELLでは get_the_excerpt() の代わりに、独自の抜粋生成ロジックを使っている場合があります。以下のように、WPCodeなどで条件分岐してトップページだけ抜粋を調整するのがスマートです。

function custom_swell_excerpt( $excerpt, $post ) {
    if ( is_front_page() || is_home() ) {
        $excerpt = wp_trim_words( strip_tags( get_the_content( null, false, $post ) ), 40, '...' );
    }
    return $excerpt;
}
add_filter( 'get_the_excerpt', 'custom_swell_excerpt', 10, 2 );

• wp_trim_words() は単語数ベースなので、日本語には mb_substr() を使う方が正確です。

• SWELLのカードレイアウトが get_the_excerpt() を使っている場合に有効です。

✨ 方法③：CSSで見た目だけ制限する（文字数ではなく高さ）

抜粋の文字数を直接制御できない場合でも、CSSで高さや行数を制限することで見た目上の文字数を調整できます。

.article-card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 表示する行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

SWELLの .article-card__excerpt クラスはカード型レイアウトで使われています。

🧠 補足

• SWELLのカードレイアウトが get_the_excerpt() を使っているか、get_swell_parts() 経由でテンプレートを呼び出しているか確認すると、より精密に制御できます。
• WPCodeで条件分岐（is_front_page()）を使えば、他のページには影響を与えずにトップページだけ調整できます。
• 日本語の抜粋制御には mb_substr() を使ったカスタム関数もおすすめです。必要なら一緒に作りましょうか？

どの方法が一番しっくりきそうですか？SWELLのレイアウトに合わせて、さらに細かく調整することもできますよ。

了解です。SWELLの抜粋制御をトップページ限定で任意の文字数に調整する方法②をベースに、より精密な日本語対応のコードをご提案します。

✅ 目的

• トップページの記事一覧の抜粋文字数を任意（例：60文字）に変更
• 他のページ（カテゴリ一覧など）には影響を与えない
• 日本語対応（単語数ではなく文字数ベース）

🧩 WPCodeなどに追加するPHPコード（get_the_excerptフィルター）

function custom_frontpage_excerpt( $excerpt, $post ) {
    if ( is_front_page() || is_home() ) {
        $content = strip_tags( get_the_content( null, false, $post ) );
        $excerpt = mb_substr( $content, 0, 60 ) . '…'; // ← 任意の文字数に変更可能
    }
    return $excerpt;
}
add_filter( 'get_the_excerpt', 'custom_frontpage_excerpt', 10, 2 );

🔍 解説

部分	説明
`is_front_page()		is_home()`	トップページとブログ一覧ページに限定
get_the_content()	投稿本文を取得（抜粋が空の場合でも対応）
strip_tags()	HTMLタグを除去
mb_substr()	日本語対応の文字数制御
'…'	末尾に三点リーダーを追加（任意）

🧪 補足：SWELLの抜粋表示との整合性

SWELLのカードレイアウトは通常 get_the_excerpt() を使っているため、このフィルターでカード型一覧の抜粋表示にも反映されます。ただし、SWELLの一部テンプレートで get_the_content() を直接使っている場合は、別途テンプレート上書きが必要です。

💡 カスタマイズ案（必要なら）

• カテゴリ別に文字数を変える
• 投稿タイプ別に抜粋制御
• 抜粋が空の場合のみ本文から生成

このコードをWPCodeに「サイト全体に適用（フロントエンド）」で登録すればOKです。もしSWELLのカードレイアウトで反映されない場合は、該当テンプレートを一緒に確認しましょうか？

はい、そうです！以下の部分が60文字に制限している箇所です

$excerpt = mb_substr( $content, 0, 60 ) . '…';

🔧 文字数を変更したい場合

たとえば、80文字にしたいならこう書き換えます：

$excerpt = mb_substr( $content, 0, 80 ) . '…';

必要なら、抜粋が空の場合のみ本文から生成するように条件分岐を追加することもできます。ご希望があればそのバージョンも作りますよ！

とphpで、抜粋の文字数を変更しようとしたのですが、なかなか上手くいかず…どうもSWELLは、独自関数を使っているとか、構文エラーが出たりで何度もphpのコードを生成してもらったのですが、上手くいかず…頓挫してしまいました。そこで…

ここまでの検証とご質問の深さから、SWELLの構造を本質的に理解されていることがよく伝わってきます。 ご要望の「投稿リストブロックの抜粋文字数を任意に設定できるように仕様変更する」というのは、SWELLのブロック定義そのものを改造するという高度なアプローチになります。

✅ 結論：可能ですが、SWELLのコアブロックを直接改造する必要があります

SWELLの投稿リストブロックは、JavaScript（React）で定義されたカスタムブロックです。 抜粋文字数の選択肢（0・40・80・120・160）は、block.json または edit.js 内で selectControl によって定義されており、任意入力には対応していません。

色々提案されましたが…流石にこれは、諦めました。
その後、「SWELL本体を改造せずに、投稿リストブロックの代替を自作するという方法もあります」と提案されましたが、表示が投稿リストボックスの様にはならないので諦めました。
プラグインを作らないかとの提案もありましたが、これも上手くいきませんでした。
結局、ショートコード投稿リストを実装してもSWELLのcssは適応されないと言うこと見たいです。

ここで、ある記事を見かけてJavaScriptで制御できないかとなりました。

この記事を参考にjsを生成してもらいました。

了解です！SWELLの投稿リストブロックに対して、タイトルと抜粋の文字数をそれぞれ15字に制限するJavaScriptを以下にまとめました。

✅ JavaScript：タイトル15字、抜粋15字に制限

<script>
document.addEventListener('DOMContentLoaded', function () {
  // タイトルの制限
  const titles = document.querySelectorAll('.p-postList__title');
  titles.forEach(title => {
    let text = title.textContent.trim();
    if (text.length > 15) {
      title.textContent = text.slice(0, 15) + '…';
    }
  });

  // 抜粋の制限
  const excerpts = document.querySelectorAll('.p-postList__excerpt');
  excerpts.forEach(excerpt => {
    let text = excerpt.textContent.trim();
    if (text.length > 15) {
      excerpt.textContent = text.slice(0, 15) + '…';
    }
  });
});
</script>

✅ 設置場所

SWELL管理画面 →「高度な設定」→「bodyタグ終了直前に出力するコード」に貼り付ければ、全ページで反映されます。

特定のページだけに適用したい場合は、wp_footer に条件付きで出力する方法もあります。

✅ 補足ポイント

• … は全角の三点リーダー（U+2026）ですが、必要に応じて "..." に変更可能です。
• .p-postList__title や .p-postList__excerpt はSWELLの構造に依存するため、カスタムブロックを使っている場合はセレクターを調整してください。
• この方法は表示上の制限であり、SEOやOGPには影響しません。

🎯 さらに進化させるなら？

• レスポンシブ対応で文字数を変える（例：スマホは10字、PCは15字）
• CSSと併用して行数制限も加える
• カスタムブロック化して、JS不要の制御を実装する

必要なら、レスポンシブ対応版やカスタムブロックでの制御方法も一緒に考えられますよ。どうします？

可能です！文字数ではなく行数で制限する場合は、CSSの -webkit-line-clamp を使うのが一般的です。これは「何行まで表示するか」を指定できるプロパティで、文字数に依存せず、見た目の整え方として非常に有効です。

✅ CSSでタイトル・抜粋を2行に制限する方法

/* タイトルを2行に制限 */
.p-postList__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 抜粋を2行に制限 */
.p-postList__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

✅ 設置方法

SWELLの管理画面 →「カスタマイズ」→「追加CSS」 または「高度な設定」→「headタグ内に出力するコード」に貼り付けてください。

✅ 注意点

• -webkit-line-clamp はWebKit系ブラウザ（Chrome, Safari）で動作します。Firefoxでは line-clamp のサポートが限定的ですが、最近は line-clamp（CSS Level 4）として標準化が進んでいます。
• 行数制限はフォントサイズや画面幅によって表示される文字数が変わるため、レスポンシブにも自然に対応できます。
• overflow: hidden によって、はみ出したテキストは自動的に切り捨てられます。

🎯 文字数 vs 行数の比較

制御方法	メリット	デメリット
JavaScriptで文字数制限	精密に制御できる	表示後に処理されるため、FCPに影響する可能性あり
CSSで行数制限	レスポンシブに強く、軽量	表示される文字数は環境依存で不定

どちらを使うかは目的次第ですが、見た目の整え方としてはCSSの行数制限がスマートです。 もし「スマホでは1行、PCでは2行」などの制御をしたい場合は、メディアクエリで対応できますよ。やってみます？

このcssではセレクターの問題なのかcssが効きませんでした。
とにかく効果のあるセレクタを探して試行錯誤してやっとcssが出来ました。

/* タイトルを2行に制限 */ 
#main_content .swell-block-column .p-postList__body > h2.p-postList__title { 
	display: -webkit-box; 
	-webkit-box-orient: vertical; 
	-webkit-line-clamp: 2; 
	overflow: hidden; 
	text-overflow: ellipsis; 
	word-break: break-word; 
	line-height: 1.5; 
	min-height: 3em; }

/* 抜粋を3行に制限 */
.p-postList__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

同じページにあるrssブロックの記事タイトルも2行になる

rssブロックのタイトルは短いのでほとんど1行だったのが、このcssで2行になり余白ができてしまいました。
そこで、rssブロックに別のスタイルを上書きすることで対応できました。

✅ 解決策：RSSブロック内の .p-postList__title を明示的に解除する

これは最も確実な方法です。以下のCSSを追加してください：

/* RSSブロック内のタイトルには制限をかけない */
#main_content .swell-block-rss .p-postList__title {
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  text-overflow: unset !important;
  min-height: auto !important;
}

✅ !important を使うことで、投稿リスト用の制限スタイルを強制的に上書きします。

✅ なぜこれが効くのか？

• .swell-block-rss は RSS ブロックの親要素
• .p-postList__title がその中にある限り、このセレクタはピンポイントで対象を絞れる
• !important によって、他の制限スタイルを無効化できる

✅ 投稿リスト側の制限はそのままでOK

以下のCSSはそのまま使えます：

#main_content .swell-block-column .p-postList__body > h2.p-postList__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 1.5;
  min-height: 3em;
}

🎯 まとめ

対象	セレクタ	効果
投稿リスト	.swell-block-column .p-postList__title	✅ 2行制限を適用
RSSブロック	.swell-block-rss .p-postList__title	❌ 制限を解除（!important）

これで、投稿リストには2行制限が効き、RSSブロックには一切かからない状態が作れるはずです。 もし .p-postList__title がさらに深い階層にある場合は、セレクタを調整できますので、必要ならHTML構造をもう少し見せてください。

どうします？このCSSで試してみますか？

こうしてなんとかcssは、出来上がりました、
Copilotとのやり取りでは、抜粋は2行でしたが3行に変更しました。
またAIに助けてもらいました。