Cocoonのナビカードの外部リンクにアイキャッチを設定する方法（ConoHa公式へのリンク例）

Cocoonのナビカードは推したいリンクをカード化して見栄え良く表示してくれる便利な機能です。
当サイトでもサイドバーに使っています。
こんな感じで。

しかし問題があります。
下２つは外部リンクなのですが、ナビカードに外部リンクを設定した場合はアイキャッチを表示できません。
全てそうなるのかはわかりませんが、少なくともConoHaの公式ページは表示されません。

どうすればいいんだ！

公式フォーラムを見ると「No Image画像をアイキャッチにしたい画像に変えればいい」。

そりゃそうかもしれないけど！
本来No Image画像を表示すべき箇所までその画像になるじゃんか！

というわけで、自分で対処することにしました。

修正後のナビカード見本

修正した後のナビカードです。

外部リンクにもアイキャッチが設定されているのがわかると思います。
私はわざと同じ画像にしていますが、それぞれ違う画像にすることもできます。

「ナビカード」ウィジェットではなく「カスタムhtml」ウィジェットを使います

より具体的に手順を書きますと、

表示したいナビカードを、一旦ナビカードウィジェットで作ります。
メニューを選んで、表示オプションを指定して。
画像を除く部分をサイトに表示したいスタイルで作ってください。

終わったら設置します。

サイトを開いて、ナビカードの上で右クリックして「検証」を選びます。
左側のhtmlを上下に動かし、ナビカード全体が選択された範囲のところで止めます。

具体的には次のセレクタの場所です。

.navi-entry-cards.widget-entry-cards.no-icon.border-square

右クリックして「copy」→「copy element」を選択。
テキストファイルに仮ペーストします。

先のhtmlの画像リンクを修正します。
今回の例ですと、２箇所あるこの部分です。

<img loading="lazy" decoding="async" src="（メディアフォルダのパス）60a34e446e5e460d9661ef7a10837d98-120x68.jpg"

コード内のhttpsから始まる記述はNo Image画像のURLです。
これを表示したい画像のURLと差し替えます。

修正例のケースだと、次の画像に差し替えます。

（メディアフォルダのパス）1280_720-1-120x68.jpg

「-120×68」とサムネイルの解像度を指定して表示させています。
（「」内の数字はお使いの環境で数字が異なります）
これを飛ばすとPageSpeed Insightsで怒られるかもしれません。

お使いの環境のナビカードに適合したサムネイルが作られているはず。
元のナビカードの表示サイズをチェック。
ブラウザに表示したい画像のURLを打ち込んで、上の通りサイズを付加します。
画像が表示されればサムネイル画像ファイルが存在しています。

もしサムネイルがない場合は作ってください。

外観→ウィジェットで、カスタムhtmlを設置します。
修正後のhtml貼りつけたら完成です。

ちょっと手間はかかりますが、この方法なら安全にアイキャッチを表示できます。
外部リンクだからといってアイキャッチがないのは寂しいもの。

ぜひお試しください