WordPressテーマ Cocoon
このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。
今回は、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;
}
カスタマイズ後のインデックスカードのスニペット（抜粋）
今回の表示修正対応によって、「インデックスカードのスニペット（抜粋）」は、次の様に設定したメタディスクリプションが全て正常に表示されるようになりました。
今回「インデックスカードのスニペット（抜粋）」の終わり付近から切れてしまう原因としては、表示する行が4行以内に設定されていたためでした。
そのため最高4行分の「インデックスカードのスニペット（抜粋）」が表示する形になっていました。
今回の「インデックスカードのスニペット（抜粋）表示修正対応」では、表示される行を最高6行まで拡大しておきました。
自分の場合6行あれば、設定したメタディスクリプションで「インデックスのスニペット（抜粋）」が全て表示されるので問題無いでしょう。
最後に
自分の場合は「本文から自動生成される抜粋文」を表示するのではなく、メタディスクリプションに表示する文章を設定して、「インデックスカードのスニペット（抜粋）」を表示しています。
そのため全て表示されないと無駄になってくるので、今回不具合に気付いて良かったです。
コメント