【Cocoon】ブログカードやブログカードのラベルが表示されない時の対処法

こんにちは、阿木人です。

WordPressテーマのCocoonを使ったブログカードが上手く表示されない時の対処法です。

先日困ったのが、ブログカードのラベル(「あわせて読みたい」とか「人気記事」とかのラベル)が中々表示出来ない件。

解決するまでに結構時間を費やしてしまったので、同じ様な現象が出ている方の参考になればと思います。

結論から書きますが、この記事で伝えたい内容は以下の通りです。

ブログカードの表示の仕方

ブログカードを使うとしたら、大体は内部リンクとして使うかと思います。

Cocoonでの内部リンクの作り方は別記事にしてあり、そちらにブログカードの表示の仕方も記載してあります。

これでもうまくいかない場合、というのが今回の趣旨です。

ブログカードが表示されない時に確認する事

URLの前後に余計な文字は無いか

Cocoonの場合、URLを貼れば自動でブログカードが作成されます。

URLは直接書くかコピペするか、もしくはリンクボタンから内部リンク先のURLを選択or記事を選択すれば自動でURLを貼ってくれます。

が、下画像の様にURLの前後に余計な文字があるとブログカードとして認識してくれず、そのまま前後の文字と間のURLが表示されます。

URLの前後に半角スペースが入っていないか

気付き辛くて厄介なのが、URLの前後に見た目では何も無いのに表示されないパターン。そんな時は「(半角)スペース」が入っていないかどうか確認しましょう。

スペースは目視出来ないので、カーソルを合わせて確認してみて下さい。

URLをコピペした時などにうっかり入っている事もあるし、一部のブラウザからURLをコピペすると、勝手に半角スペースが前後に入るという仕様のものもあるみたいです。

Cocoonブロックの「ブログカード」を使っている場合

Cocoonブロックの「ブログカード」とは下画像のものです。

編集画面で「ブロックの追加」を選択すると表示される「Cocoonブロック」の中にあります。「囲みブログカード」というそうです。

こっちで内部リンクを貼る場合、ラベルが使えるのが利点ですね。

「あわせて読みたい」とか「関連記事」といった文言をラベルとして貼る事が出来ます。

私はこっちがなかなか上手くいかずに苦労しました。

URLの前後に余計な文字は無いか

囲みブログカードを使う際も、URLの前後に余計な文字(特に見つけづらい半角スペース)が入っていないかを確認しましょう。

余計なタグが入っていないか

私はこれでは解決しなかったんですが、一応色々調べた時に結構この情報があったので記載しておきます。

囲みブログカードを作るための<div>タグの間に、余計なタグ(<a>とか<p>とか)があると上手くいかない、という情報がありました。

その確認の仕方が↓です。　まずは囲みブログカードのブロックを選択して、画像の様にして「HTMLとして編集」を選択します。

するとビジュアルエディター内でもHTMLコードが見える様になるので、いらないタグ(下記画像の場合は<p>タグ。赤線の所です)を削除。

これで上手く行く場合もあるそうです。

---

ブログカードのラベルが表示されない時の対処法

ここまででブログカード自体は表示できる方が多いと思うのですが、問題は「あわせて読みたい」とかのラベル。正直私は一番これを調べるのに時間かかりました。

ブログカードは表示できたけど、ラベルが表示されない時は、「スキン」を確認してください。

確認方法は、ワードプレスのダッシュボードから、Cocoon設定→スキンのタブ

ここで私は「Bizarre-food」を選択していたのですが、これが原因でブログカードのラベルが表示されない状態でした。違うスキンを選択したらちゃんと表示されるようになったので、これも確認してみて下さい。

それでも上手くラベルが表示されない場合

これでもうまくいかない場合は、CSSでの対応になるかも知れません。

ブログカード表示がうまくいかない時の対処法まとめ

という訳で、ブログカードやブログカードのラベルが表示されない時の対処法でした。

再度まとめると以下の通りです。

本記事で悩みが解決出来たら幸いです。

---

内部リンクが貼れてpv数が増えてアドセンスも貼ったが、更に収益を伸ばしたい場合はアフィリエイトが必須です↓