WordPressのテーマ「cocoon」内部リンクの「画像付き ブログカード」で 画像表示されない ときの対処法
WordPressの人気テーマ「Cocoon」で、内部リンクに画像付きのブログカードを使用することはSEOや読者への訴求力を高めるためにも、とても重要で人気を得ています。
ところが「ブログカードの画像が表示されない」というトラブル。
記事の魅力を引き立てるブログカードの画像が表示されないのは残念ですよね。
視覚的な魅力が失われると読者の興味も引きにくくなります。
この問題の原因と解決法についてわかりやすく解説。ぜひトラブル解消にお役立てください!
ブログカードの画像が表示されない原因
ツールからブログカードを選択し「HTMLとして編集」をクリックするとHTMLで展開してくれます。URLをよく見ると、赤い四角で囲った部分が全角日本語のタイトルになっていることが原因です。

そうすると、うまく画像表示されず、文字だけのリンクになってしまいます。

これを解決するために、次の手順でブログカードを設定してみてください。
初めから解説してみますので、辿ってみてください。
内部リンク ブログカード作成手順
1. ブログカードの土台を作成
左上の「田」ボタンを押すと「×」に変化してアイテムボタンが展開されます。
その中にある「ブログカード」を選択します。

「ブログカード」が、横長長方形の「四角い枠」として表示されます。

右上のカドにある「ラベルなし」は、ワードプレス右端の設定帯で変更できます。

2. 土台のカードに、記事のリンクを貼る
作成した土台をクリックすると、カード上にカーソルが点滅します。
他の記事でよくみられる解説では、手順が不十分でしっかり画像が表示されません
他の記事では「ここに直接URLをコピペで貼るとブログカードができます」と書いてある記事が多数ありましたが、それだけではリンクされず、四角い枠上に「URLという文字」が書いてあるだけで、リンクさせたい記事へは飛びませんでしたので、きちんとリンクできるようにこれから解説します。
また、他の記事の中には「URLに全角日本語が入っているとリンクされません」という記事も多く散見されましたが、解説をよく見ると、上記のようにブログカードの四角い枠上に直接URLをコピペで貼るやり方で解説していましたが、その方法ではきちんとブログカードになりませんでした。これについても、上記のとまとめて、このあと解説していきます。
手順の解説
1: リンクしたい記事を貼る
作成したブログカードの四角い土台枠の中をクリックするとカーソルが点滅し、横長のメニューバーが現れるので、右側にある「(ー)」マークをクリック。

展開された四角の枠に、リンクしたい記事を検索し、出てきたものから希望の記事を選択すると

以下のように、リンクとして貼り付けられます。

ただ、このままでは、公開されている記事を見ても下のように、青文字のリンクだけしか表示されておらず、ブログカードとしてしっかり表示できていません。

原因は、HTMLの中に貼られているURLが日本語表記の全角になっていることだったので、ブログカードにしたい記事のURLをコピーしてHTMLの中のブログのURLをそっくり入れ替えます。
2: 貼った記事のURLを表示
その手順
①作成したブログカード上で右クリックし、出てきたメニューバーの一番右にある「…」の縦バージョンをクリック。
②「HTMLとして編集」をクリック。

「HTMLとして編集」をクリックして展開したURLをよく見ると、赤い四角で囲った部分が全角日本語のタイトルになっているので、

3: リンクしたい記事のURLをコピー
この部分に、リンクさせたい記事の半角英語表記のURLをコピペして入れ替えます。

リンクさせたい記事を別窓で開き、右帯の設定を開くと、その記事のURLがコピーできます。
備考: 貼りたい記事のURLを半角英文字にする方法
そもそも、この記事のURL自体が半角英文字でなければならないので、事前にブログURLを半角英語で作っておく必要があります。
① ワードプレスの左上「W」マークをクリック

② 展開したメニューの中の「投稿一覧」からリンクさせたい記事を探す
③ 「クイック編集」をクリック

④ 「スラッグ」の欄に半角英文字でスラッグ文を作成。

スラッグ文は、半角小文字と単語同士はハイフンで繋ぐというルールがあるので、要注意です。作り方の詳細は、下記の記事をご参照ください。
4: URLをコピーしたら確認してみよう

上の画像の全角日本語URL部分を、半角英語のURLに上から貼り付けると、下の画像のようになります。

そして、しっかりと、思い描いていたブログカードが表示されます。

上記のように、しっかりアイキャッチ画像とタイトル文とが表示されていたら成功です。
ちょっと感動ですね!
まとめ
ブログカードをHTMLで展開し、全角になっている記事タイトルの部分を半角の記事のタイトルになっているスラッグ文をコピペして修正します。
ちょっと一手間かかりますが、これで画像のついたブログカードの完成です。こんな手作業をしなくても自動でできるように早く修正して欲しいですよね。
ということで今回は画像のついたブログカードの設定方法について記事にしてみました。
この記事を書いた経緯
ブログカードを作ろうと、ググって調べた記事に書いてあるとおりに試しましたが、全く成功しなかったので、あれよこれよで成功するまでたくさんの記事を読み漁る結果となってしまい、結果、どれもこれも失敗に終わりました。
「もういいや」と諦めて別の作業に取り掛かろうとした時に「ハっと」閃きました。
試しに閃いた方法でやってみたところ、これがなんと大成功!
忘れないうちに、備忘記録として記事に収めました。
自分も忘れた頃に、またこの作成した記事を読むことにはなるでしょうけど、皆さんにも同じところでつまづいている方がいらっしゃったら、きっとお役立てになるかなと思い、公開記事にしています。
自分は、相当数の記事をググって検索したものをハジからハジまで読み漁った結果の失敗だったので、おそらくここまで詳細解説している記事はこの記事だけでしょう。
ただ、検索した記事も相当古い記事もあったので、作成した当時ではその記事で解決できたのでしょうけど、現時点のバージョンでは解決できなかったので、この記事に辿り着いた方で、同じような状況の方でしたら、ここで解決できると思います。
たまたま、手探りであれやこれやで解決できたので結果おーらい。
同じ悩みでつまづいている方に向けて、この記事を参考にしていただけたら幸いです。
パパさんBlogでは、メインは投資記事ですが、サブで、困ったことの備忘記録も記事にしています。
おそらく、初心者であれば同じようなところでつまづいている方も多いかと存じます。
そんな同じようなところでつまづいてる方にもお役立てできたら幸いです。
もしよろしければ、サイト内の他の記事もタメになるようなものもあるかと思いますので是非お立ち寄りください。
新着記事
人気記事