このブロックには、想定されていないか無効なコンテンツが含まれています。

カテゴリー:WordPress(ワードプレス)

WordPressのブロックエディターでは時々「このブロックには、想定されていないか無効なコンテンツが含まれています。」という表示が出ることがあります。

これは初めて見るとびっくりしてしまいますが、落ち着きましょう。この表示が出るということはそのブロックはHTMLの記述が間違っているというケースがほとんどです。

何の前触れもなく「このブロックには、想定されていないか無効なコンテンツが含まれています。」っていわれる

このブロックには、想定されていないか無効なコンテンツが含まれています。

このような表示が出ると、ここに出ている2つのボタン「解決」「HTMLに変換」のどちらを押そうか悩みますね。でもちょっと待ってください。右上のボタンをクリックするともう2つ選択肢があります。

このブロックには、想定されていないか無効なコンテンツが含まれています。

「クラシックブロックに変換」「ブロックのリカバリーを試行」の2つが表示されます。さて、どれを選択しましょうか…

何をしたら「このブロックには…」の表示が出るのか?

段落を編集している時

ブロックエディターは段落中、文章中の部分的な文字色の変更、文字サイズの変更が出来ません。で、ちょっとHTMLを知っていたりCSSを使えたりするとこんな風にしたくなると思います。

段落のHTML記述

<p>昔々あるところに<strong class="big blue">お爺さん</strong>とお婆さんがおりました。</p>

CSSの記述

.big {
	font-size: 1.5em;
}
.blue {
	color: #00ABFF;
}

これをブロックエディターでしようとすると、まず段落ブロックで

段落ブロック

と入力します。

段落ブロック

で、「お爺さん」を選択し太字にします。

段落ブロック

そのあと、ブロック上部の「詳細設定」ボタンから「HTMLとして編集」をクリックします。

そこで上の画像のようにHTML編集すると…

このブロックには、想定されていないか無効なコンテンツが含まれています。

「このブロックには、想定されていないか無効なコンテンツが含まれています。」の表示が出ます。なぜだかわかりましたか?

HTMLの編集間違いです。

正しくは

<p>昔々あるところに<strong class="big blue">お爺さん</strong>とお婆さんがおりました。</p>

と記述するべきところを

<p>昔々あるところに<strong class="big blue>お爺さん</strong>とお婆さんがおりました。</p>

と記述しています。「blue」のあとの「”」が抜けているんです。たったこれだけのことでものすごく怒られちゃう感じです。で、上で紹介した4つの解決法を試すとどうなるか試してみます。

「解決」をクリック

「解決」をクリック

「HTMLに変換」をクリック

HTMLに変換

段落ブロックがカスタムHTMLブロックに変わります。間違ったHTMLの記述はそのままです。「blue」のあとの「”」は抜けたままですので解決にはなっていません。

「ブロックへ変換」をクリック

「ブロックへ変換」をクリック

段落ブロックになりますが間違いの記述の後からが消えてしまっています。これもやはり解決には至りません。

「HTMLに変換」をクリック

これも上の場合と同様に解決しません。

「クラシックブロックに変換」をクリック

「クラシックブロックに変換」をクリック

おっ!なんか直ったみたいです。が、HTMLを見てみると…

<p>昔々あるところに<strong class=""big">お爺さん</strong>とお婆さんがおりました。</p>

となっており、思ったようには直っていません。

「ブロックのリカバリーを試行」をクリック

「ブロックのリカバリーを試行」をクリック

これも段落ブロックにはなりますが間違った記述のあとが消えています。

「このブロックには、想定されていないか無効なコンテンツが含まれています。」って表示されたらどうするのがベストか?

「このブロックには、想定されていないか無効なコンテンツが含まれています。」って表示されたときにはジタバタしてもしようがありません。HTMLの記述が間違っているのでそれを何とかするしかないんです。では、どういう手順で行うのが良いかというと…

HTMLに変換してHTMLの間違いを修正する

「HTMLに変換」をクリックして「カスタムHTMLブロック」にして間違った部分を修正します。今回の例では「blue」のあとに抜けていた「”」を記述します。その後、

ブロックへ変換

ブロック上部の「詳細設定」ボタンから「ブロックへ変換」をクリックします。

すると段落ブロックになり、HTMLを確認しても

<p>昔々あるところに<strong class="big blue">お爺さん</strong>とお婆さんがおりました。</p>

と、正しいものになっています。しかしここで直したつもりが直っていないと…つまり誤ったままのHTMLの記述のまま「ブロックへ変換」をクリックすると…

このブロックでエラーが発生したためプレビューできません。

「このブロックでエラーが発生したためプレビューできません。」って表示されにっちもさっちもいかなくなります。

そんな時は…

取り消しましょう…戻りましょう…

「取り消し」をクリック

左上の「取り消し」ボタンをクリックしてもう一度やり直しましょう。何度見直してもどこに間違いがあるかわからない時は…

いっそのことそのブロックを作り直した方が早いかもです…

まとめ

WordPressの記事の作成時に「このブロックには、想定されていないか無効なコンテンツが含まれています。」という表示が出てもあわてないことです。イライラしてもいけません。まずは冷静になりましょう。原因は大抵HTMLの記述間違いです。以下の手順でチェックしましょう。「WordPressが壊れてる!」とか騒いでも仕方ありません。ここまで大げさにエラー表示しなくても…とは思いますが記述の間違いなので探して直しましょう。

  1. 「HTMLに変換」してHTMLの間違いを修正する
  2. 「ブロックに変換」する
  3. それでもうまくいかなければ「取り消し」をクリックして前の作業に戻る
  4. ブロックを最初から作り直す
  5. エラーが表示され、原因がわからない時はとりあえず「取り消し」をクリック
0

この記事に関連する投稿記事

WordPressの基本情報を設定しよう

WordPressをインストールしたらまず最初にやっておきたい設定がいくつかあります。その中でもサイトの基本情報は重要ですね。この情報はWordPressインストールにに入力する項目でもあるので確認も... もっと見る

WordPressとは?

WordPress(ワードプレス)はCMS…ContentManagementSystem(コンテンツマネジメントシステム)の一つでウェブサイトを構築・運営するためのソフトウェアです。... もっと見る

WordPressをインストールしたら入れておきたいおすすめプラグイン5選

WordPressはそれ自体とてもすぐれた機能を持つCMSですが、プラグインを活用することでさらに機能的なWebサイト運営を可能にしてくれます。ただ、WordPressのプラグインサイトを見るとわかる... もっと見る

WordPressを簡単にインストールできるレンタルサーバー一覧

かつてはWordPressをインストールしようと思ったら、WordPressが動作するサーバーをサーバーの仕様で確認し、データベースを作成し、WordPress本体を公式サイトからダウンロードし、それ... もっと見る

WordPressでWebサイトを作成する流れ&必要な知識

WordPressでWebサイトを作成すると一言で言っても、やったことのない人にとっては何から始めればよいのか?はたして自分にWebサイトを作成する知識があるのか?不安や疑問は尽きませんね。ざっくりと... もっと見る

こんな記事が良く読まれています

WordPressのインストール後のデザインは?

WordPress(ワードプレス)

最近のレンタルサーバーはWordPressのインストールが簡単にできますのでWordPressのインストールまでは誰でも戸惑うことなくできるようになりました。インストール後の基本設定も最低限必要なプラ... もっと見る

ブロガー専用テーマ「ストーク19」

WordPressテーマブロックエディター対応テーマ

WordPressテーマ「ストーク(STORK)19」はレスポンシブデザインで特にスマホでの閲覧のしやすさを第一に考慮して設計されています。現在多くのウェブサイトではスマホでの閲覧がどんどん伸びていま... もっと見る

WordPressを簡単にインストールできるレンタルサーバー【1】

レンタルサーバーガイド

WordPressでWebサイトを制作する方が増えてきましたね。以前はWordPressをインストるする場合、サーバーにデータベースを作成し、インストールに必要な情報を入力したうえでWordPress... もっと見る

お名前.comでドメインを取得しよう

ドメイン取得と各種設定

ドメインの取得はレンタルサーバー会社でも取得できますが、一般的に割高であったり、将来サーバーを移転することがあったりした場合手続きが煩雑になる場合もあります。ドメインとサーバーは別々に契約しておくと管... もっと見る

WordPressで作成作業中のWebサイトを見られたくない時にする設定

WordPress(ワードプレス)

WordPressをインストールしたらまずは最初にやっておきたい設定がいくつかあります。まずは、WordPressで作成作業中のWebサイトを見られたくないと思ったときにしておく設定です。「制作中&... もっと見る

WordPressを簡単にインストールできるレンタルサーバー【2】

レンタルサーバーガイド

WordPressでWebサイトを制作する方が増えてきましたね。以前はWordPressをインストるする場合、サーバーにデータベースを作成し、インストールに必要な情報を入力したうえでWordPress... もっと見る

画像の拡大表示をカッコよく「Fancybox for WordPress」

WordPressプラグインガイド

「FancyboxforWordPress」はWordpressに貼り付けた画像、写真を拡大させるときにカッコよく表示させるためのプラグインです。どんな風に画像を拡大するのか?例えば以下のよう... もっと見る

ブロックエディターでコピペで勝手に半角スペースが入って困るとき

WordPress投稿&固定ページ作成マニュアル

WordPressの新しいエディターブロックエディターを使っていると「おや?」と思うのが…「テキストをコピペするとその前後に半角スペースが勝手に入る」っていうこと。ブロックエディターでコ... もっと見る

wp_list_categories( パラメータ )

WordPressテンプレートタグ

WordPressテンプレートタグ

カテゴリーのリストをリンク付で表示させます。リンクをクリックするとそのカテゴリーに属する投稿を表示させることが出来ます。サイドバーで使うことが多いです。その他トップページや固定ページのテンプレートでも... もっと見る

WordPress簡単インストールのレンタルサーバー【おススメ編】

レンタルサーバーガイド

WordPressでWebサイトを制作する方が増えてきましたね。以前はWordPressをインストールする場合、サーバーにデータベースを作成し、インストールに必要な情報を入力したうえでWordPres... もっと見る