Cocoonテーマを使っていて「ブログカードのラベルが表示されない！」と
困ったことはありませんか？？
私も同じ状況にハマり、いろいろ調べて試しましたが解決せず…。
最終的に分かったのは、「サイトのキーカラーを白にしていた」ことが原因でした。
本記事では、ブログカードのラベルが表示されないときに考えられる一般的な原因をざっくり紹介しつつ、
私が実際に体験した「キーカラーげ原因だったケース」とその解決法を詳しく解説します。
ブログカードのラベルが表示されないときに考えられる一般的な原因
まずはよくある原因をチェックリスト的にまとめます。
Cocoon設定でブログカードの表示がOFFになっている
ブログカードの設定を確認する方法は、
WordPressダッシュボード > Cocoon設定 > ブログカード
の順番で確認できます。
ブログカードには、以下2つの設定があります。どちらもチェックが入っていない場合ブログカードは表示されません。
- 内部ブログカード設定
- 外部ブログカード設定
外部リンク扱いになっている
同じ自サイトでも、URLの表記が一致していないと「外部リンク」と判定されます。
以下は、外部ブログ設定の「ブログカード表示を有効にする」をOFFにした例です。
wwwなしで書いたリンクは、ブログカード化せずにリンクのまま表示されていることがわかります。
使い方が間違っている
そもそも論ですが、使い方が間違っている可能性もあります。
ブログカードの使い方は、ブロックインサーターをクリック > 検索バーで「ブログカード」と入力
表示結果で、ブログカードがありますのでクリックするとエディター本文上に挿入されます。
ただのリンクの貼り付けではブログカードのラベルを使ったレベリングはできないので、注意してください。
挿入できたら、今度は本文中のブログカードをクリックして選択します。
選択した状態で右ペインに表示されるスタイル設定にて、表示させたいラベルを選択できます。
あとは実際に選択したラベルが表示されているか確認します。
私の場合は「サイトのキーカラー」が原因だった
上記を確認しても改善されず悩んでいたのですが、実はサイトのキーカラーを白に設定していたことが原因でした。
Cocoonは「サイトのキーカラー」をボタンやラベルｍリンクなどにも適用する使用になっています。
その為、ラベルの背景色が白 →サイトの背景も白 → 結果としてラベルが”消えたように見える”という状態になっていたのです。
スクリーンショットではわかりずらいのですが、ラベルの枠事態は出力されていますが、色は同化してしまっていました。（わかりずらくてすみません。。）
キーカラーをクリアした状態では、問題なく「関連記事」のラベルが表示されていることが確認できます。
キーカラーが原因のときの解決方法
最もシンプルなのは、
Cocoon設定 > 全体 > キーカラーを白以外の色に設定する方法です。
私の場合は、キーカラーをクリアしてデフォルトに戻しました。
再発防止のチェックリスト
- サイトカラーを変更するときは、ラベルやボタンの色も一緒に確認する
- 設定を変更したらプレビューで表示崩れがないか必ずチェック
- もしラベルが消えていたら「キーカラー」をまずは疑う
まとめ
- Cocoonでブログカードのラベルが表示されない原因はいくつかある
- 外部リンク / 設定OFF / 使い方の誤りなどが一般的な原因
- 私の場合は「サイトのキーカラーを白にしていたこと」が原因で、ラベルが背景に同化して見えなかった
- 対策は「キーカラーを変更」もしくは「CSSでラベルだけ色を指定」
ラベルが見えなくなって困っている方は、ぜひキーカラー設定を確認してみてください。
あわせて読みたい記事
今回の記事では、Cocoonのブログカードでラベルが表示されないときの原因と対処法を紹介しました。
ブログを運営していると、テーマ設定のちょっとした工夫だけで見え方が変わったり、思わぬトラブルにハマったりすることがあります。
「study bud」では、Cocoonの設定だけでなく、ブログ運営や収益化に役立つ実体験もまとめています。
ぜひこちらもチェックしてみてください。
実際に取り組んで合格できた流れをまとめた体験記です。
PVアップや記事更新の工夫など、これから始める人にも役立つリアルな取り組みを紹介
コメント