「span data-mce-type=”bookmark”」がWordPressでタブ切り替え時に出た場合の解決策

bookmark エラー タグ テキストエディタ ビジュアルエディタ

この記事は、最新のWordPressで実装されているブロックエディターではなく、古いクラシックエディターでのお話になるので過去の備忘録として載せています。

WordPressで記事を作成して、「ビジュアルエディタ」タブと「テキストエディタ」タブを切り替えた時に出た、↓のコードについてです。

みみこ

Wow!な、な、なんですかぁ?!このコードは…。

<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
目次

現象が起きた記事

ちなみに、このコードに気づいたのが↓の記事を作成している時でした。

調べてみたところ、WordPress特有のもののようなのでとりあえずご安心を。

コードが出ていた理由

このコードが出てしまった原因ですが、

  1. 「テキストエディタ」タブで書いたコードが、「ビジュアルエディタ」タブでは表示できないものである
  2. その表示できない部分にカーソル(マウス)を合わせている状態で、「テキストエディタ」→「ビジュアルエディタ」タブに切り替える

この2つの条件が揃った時に、WordPress側が

これは表示できない…

ということになってしまい、一種のバグとしてコードが出てしまうようでした。

みみこ

ただ文字を書いているだけなら、あまり起こらない現象のようですね。

おかぴー

はい、僕がその記事を書いている時に、<style></style>で囲ってCSSのコードを「テキストエディタ」タブの中に書き込んで、切り替えたことが原因でした。

<style>タグ:この中にCSSのコードを記述することで、HTMLファイルだけでもCSSを適用できるものです。

該当箇所がこちら↓

bookmark エラー タグ テキストエディタ ビジュアルエディタ

追加CSSではなく、記事のテキストエディタにコードを書いた理由

一般的にCSSでカスタマイズする際には、「外観>カスタマイズ>追加CSS」の項目にコードを書きます。

ただ、今回の記事だけに対してCSSを適用させたかったので、

ブログ全体で毎回読み込まれるCSSファイルから少しでもデータ量を減らせると思ったためでした。

…と、ちなみにのお話^^

対処方法

これが表示されるのを回避するには、

タブを切り替える際に「ビジュアルエディタ」タブで表示されるであろう通常の文章にカーソル(マウス)を合わせた状態で切り替え

てあげることで表示されなくなります。

ですので、切り替える時はその点を注意して切り替えましょう。

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次