お問い合わせはコチラから

Cocoonでブログカードが表示されない時に確認すべきこと

サイト運営

Cocoonのブロックエディタを使っていて、エディタ上ではブログカードとして認識されているのに、公開するとURLがそのまま表示されたことはないでしょうか?

クラシックエディタを使っていた時はなかったのに、ブロックエディタを使い始めてから結構な頻度でそれが起こるようになりました。

URLを空ブロックにコピペしたらブログカードブロックに変換してほしい。。。

この記事では、Cocoonのブログカードブロックを使用した時に、ブログカードが表示されない原因と、正しく表示されるための手順をご紹介しています。この記事を読むことで、Cocoonのブロックエディタ使用時に安定してブログカードを表示させることができます。

ブログカードがURLのまま表示される原因

  • URLが書式ありで張り付けられている(プレーンテキストで張り付けていない)
  • ブラウザのURL欄や、アンカー付きテキストからコピーしている

書式有でURLを張り付けた時のブログカードの実際のコード

書式有でブログカードにURLを張り付けると、

  • <a>タグで囲まれる
  • <p>タグの前後に空白ができる
<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">


<p> <a href="https://xxxx/</a> </p>


</div>

この状態だと、URLがそのまま表示されてしまいます。

期待通りに表示される時のブログカードの実際のコード

期待通り表示されるには、

  • <a>タグで囲まれる
  • <p>タグの前後に空白がない
<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">


<p><a href="https://xxxx/</a></p>


</div>

ブログカードが必ず表示される貼り付け方

ブログカード貼り付け手順
  1. URLをコピーする
  2. ブログカードブロックを選択する
  3. ブログカードに『プレーンテキストで張り付け 』 を使ってURLを張り付ける(Windowsだと右クリックメニューにある)
<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">


<p>https://xxxx/</p>


</div>

プレーンテキストで張り付けると、<a>タグが入らないので、<p>タグに余計なスペースも入らなくなります。

ブログカードが表示されない時の確認方法

何かおかしいと思ったら、HTMLコードを確認しましょう。

  1. ブログカードを選択します。
  2. 3つ縦に・が並んでいるメニューから、HTMLとして編集を選択
  3. HTMLが表示されたら、<p>タグ内に余計なスペースがないことを確認

まとめ

Cocoonのブロックエディタはとても便利で多機能なので、覚えるまでが大変です。トラブルが起きない方法を見つけて、手順を固定化していくと不思議な動きに悩まされることもないかと思います。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました