【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連Cocoon

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

アイキャッチ画像 Cocoon
この記事は約3分で読めます。
スポンサーリンク

WordPressテーマ Cocoon

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

MASAa.net | WordPressのカスタマイズとPCのある生活を楽しむための情報発信サイト
このMASAa.netは、WordPressテーマのカスタマイズ、自作PC、ソフトウェア、ハードウェア、Windows、パソコンなどのあらゆるPC関連に関する情報を掲載しています。

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

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

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

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

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

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

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

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

WordPressテーマ THE THOR(ザ・トール)での「インデックスカードのスニペット(抜粋)表示修正対応」を行います。

修正内容

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

「スタイルシート(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の記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

下記バナーからスマホゲームのインストールお願いします!
ザ・グランドマフィア
イース6 オンライン〜ナピシュテムの匣〜
リネージュ2M
魔剣伝説
超次元彼女
ライフアフター
グランドサマナーズ
ロードモバイル
駅メモ!-ステーションメモリーズ!

MASAa.net

コメント