(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連Cocoon

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

アイキャッチ画像 Cocoon
この記事は約3分で読めます。

【広告】

※ 本ページには【広告】が含まれています

WordPressテーマ Cocoon

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

MASAa.net | WordPressとPCのある生活を楽しむための情報発信サイト
WordPress、WordPressテーマ Simplicity / Cocoon / THE THORに関するカスタマイズ、自作PC、ガジェット、デスク環境に関する情報発信サイトです。

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

インデックスカードのスニペット(抜粋)

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

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

【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;
}

カスタマイズ後のインデックスカードのスニペット(抜粋)

今回の表示修正対応によって、「インデックスカードのスニペット(抜粋)」は、次の様に設定したメタディスクリプションが全て正常に表示されるようになりました。

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

今回「インデックスカードのスニペット(抜粋)」の終わり付近から切れてしまう原因としては、表示する行が4行以内に設定されていたためでした。

そのため最高4行分の「インデックスカードのスニペット(抜粋)」が表示する形になっていました。

今回の「インデックスカードのスニペット(抜粋)表示修正対応」では、表示される行を最高6行まで拡大しておきました。

自分の場合6行あれば、設定したメタディスクリプションで「インデックスのスニペット(抜粋)」が全て表示されるので問題無いでしょう。

最後に

自分の場合は「本文から自動生成される抜粋文」を表示するのではなく、メタディスクリプションに表示する文章を設定して、「インデックスカードのスニペット(抜粋)」を表示しています。

そのため全て表示されないと無駄になってくるので、今回不具合に気付いて良かったです。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 本ページ内には【広告】が含まれています

コメント

【広告】