【Cocoon】インデックスカードのスニペット（抜粋）表示修正対応

INDEX

WordPressテーマ Cocoon
最後に

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト

WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。

今回は、WordPressテーマ Cocoonでの「インデックスカードのスニペット（抜粋）表示修正対応」についてまとめてみました。

インデックスカードのスニペット（抜粋）

これまで「インデックスカードのスニペット（抜粋）」は、設定したメタディスクリプションが全て正常に表示されていました。

しかし、気付くと「インデックスのスニペット（抜粋）」の終わり付近から切れています。

この症状がWordPressのバージョンアップによるものなのか、或いはWordPressテーマ Cocoonのバージョンアップによるものなのかは不明です。

そこで今回、設定したメタディスクリプションが「インデックスのスニペット（抜粋）」として全て表示されるように修正対応することにしました。

インデックスカードのスニペット（抜粋）表示修正対応

WordPressテーマ Cocoonでの「インデックスカードのスニペット（抜粋）表示修正対応」を行います。

修正内容

「インデックスカードのスニペット（抜粋）表示修正対応」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style.css)」を開き、下記の表示修正内容を最後に追記する形でOKです。

  overflow: hidden;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;

念のため、今回の表示修正内容も含めこれまでのインデックスカードのスニペット（抜粋）に関するカスタマイズ内容を以下に掲載しておきます。

/************************************
** ■エントリーカード メタディスクリプションカスタマイズ
************************************/
.entry-card-snippet.card-snippet.e-card-snippet {
  word-break: break-all; /*表示範囲に合わせて改行*/
  text-decoration: underline dotted #bbb; /*アンダーライン*/
  font-size: 14px; /*フォントサイズ*/
  margin-bottom:18px; /*説明文と日付間の余白*/
  color: #333;
  font-weight: 600; /*文字強調*/
  line-height: 1.6; /*行間設定*/
  overflow: hidden;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}