Cocoonでブログカードのサムネイル画像を非表示にする方法

ワードプレスのテーマにCocoonを使用している時に

記事内に挿入した

外部リンクや内部リンクのブログカードに表示されるサムネイル画像を

CSSで非表示にする方法です。

Cocoonは本文にURLリンクがあると

自動的にリンク先のアイキャッチ画像を見出しにした

ブログカードになって表示されます。

しかしドラクエ10の広場のHPをリンクすると

なぜか画像が壊れて表示されるので

広場をリンクする時はいつも

ブログカードに見出し画像が表示されないように

CSSを使って記事個別で設定しています。

広場側でリンクされた時にサムネイルが表示されるように設定していないのか

それとも、こちらのブログ側の問題なのか

そこはわからないけど。

TwitterでURLをリンクするとサイトによっては

見出しがついたブログカード式になって表示されると思うのですが

そのことです。

Cocoon使用下ではTwitterと同じようにURLリンクしただけで

ブログカードになって表示されます、そして自分のブログが

Twitterや他のサイトにリンクされた時も

こちらをリンクしたサイトがブログカード対応であれば

自動的にブログカードになって

表示されるようになっています。

ブログカードのサムネイル画像を非表示にするCSS

ブログカードのサムネイル画像を非表示にするCSSは

.blogcard-thumbnail img {display : none;}

です。

これを、投稿画面の下のほうにある

カスタムCSSというボックスに記述します。

このCSSを記述することで

外部リンクのブログカードも内部リンクのブログカードも

どちらともサムネイル画像が非表示となります。

実際にCSSでブログカードのサムネイル画像を非表示にしてみた

ブログカードの見出し画像を非表示にするCSSを記述することにより、

記述していなかった時は表示されていた

外部リンクや内部リンクのブログカードのサムネイル画像が

このように

非表示になります。

普通にブログをやっている時には

あまり需要がないCSSだと思うけど

壊れた画像マークが表示されるよりは

画像がないほうが良いと思いました。

単純に、全ての記事のリンクをブログカード化したくないということであれば

Cocoon設定のブログカードというタブから

ブログカード化しないように設定すれば良いと思うのですが

特定の記事だけブログカードの見出しを非表示にしたいという場合に

今回のCSSを使うと良いと思います。

リンクをブログカード化すると、どんなページのリンクなのか

一目でわかるので個人的には

URLのみのリンクよりもブログカード化したリンクのほうが好きです。