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

おかぴーです。

WordPressで記事を作成して、「ビジュアルエディタ」タブと「テキストエディタ」タブを切り替えた時に出た、

 謎のコード
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
についての記事です。
みみこみみこ
Wow!な、な、なんですかぁ?!このコードは…。
おかぴーおかぴー
僕も今回初めて目にしたので、Oh〜!What is this?!って感じでしたね。
何かのタグであるのは間違いないんのですが…。
→なぜかアメコミ風のアイキャッチ画像と会話は、記事作成時の気分なのでお気になさらず(笑)

現象が起きた記事

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

コードが出た記事

.seien_demo{display: flex;display: -webkit-flex;justify-content: space-around;background:#fff;}.seien_demo div{width: ca[…]

 

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

 

コードが出ていた理由

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

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

 

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

WordPressWordPress
これは表示できない…

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

 

みみこみみこ
ただ文字を書いているだけなら、あまり起こらない現象のようですね。
おかぴーおかぴー
はい、僕がその記事を書いている時に、<style></style>で囲ってCSSのコードを「テキストエディタ」タブの中に書き込んで、切り替えたことが原因でした。

該当箇所がこちら↓

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

 

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

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

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

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

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

 

対処方法

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

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

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

 

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

おまけ

「ある程度ブログのデザインも納得したものができてきたなぁ」

「次はこのブログを、稼げるブログにしたい!」

と思っている方へ。

 

ブログ収益化において、

デザイン効果と組み合わせることで反応率が高まる効果的な方法があるのですが、

僕が勤めている会社では、とても言えない(というか教えたくないw)内容を、

ここだけの話で公開しようと思います。

 

どんな話かと言うと、

「発信するテーマ(内容)に合わせた最適な収益化方法が分かる」というものです。

 

100人いれば、100個のブログがあり、コンセプトがあります。

それによって収益化の方法も様々です。

 

デザインは視覚的に注目を集める力がありますが、その先の収益化へ進むには間違いなく発信内容に合わせてブログを構築していく必要があります。

 

あなたは最適な収益化方法を選択できていますか?

きっと、今ブログで伸び悩んでいる人には新しい発見になるはず^^

 

興味がある方は「こちら」をご覧ください〜

ストレスフリーなブロガーライフを送ろうWPテーマ「THE THOR」でリニューアル!" width="1280" height="479" >

WPテーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG