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

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. エラーが表示され、原因がわからない時はとりあえず「取り消し」をクリック

WordPressのテーマはやっぱり国産テーマが安心!

WordPressのインストールは最近ではレンタルサーバー会社の「簡単インストール機能」などでだれでも簡単にできるようになりましたが、そこからのデザインがやっぱり悩みどころ。プラグインも何を使ったらよいのかわかんないし、解説サイトが英語表記というのもよくあるケースです。そして、

WordPressなんてムリだ…

なんていう残念な結論を出して、挫折してしまう方がとても多いです。
せっかく独自ドメイン取得したのに…
せっかくレンタルサーバー契約したのに…
せっかくWordPressインストールしたのに…
です。

WordPressのデザインを決めるものが「テーマ」であることは理解したと思いますが、どのテーマを選べばよいのかわからない…ダッシュボードのテーマの新規追加を試みても種類が多すぎるし、解説は英語だし、有効化してもよくわかんないし…

国産(日本語)のWordPressテーマを導入しよう

WordPressのダッシュボードからテーマを新規追加しようと探しても日本語のものはまず見つかりません。世界中のユーザーから見れば日本語なんて希少言語なので仕方ありません。日本語サイト向けのWordPressテーマはいくつもあります。それらの日本語サイト向けWordPressテーマはそれぞれのテーマ開発者のサイトなどで公開、販売されています。

日本語サイト向けWordPressテーマは有料のものも多いですが、有料であるからこそサポート体制も充実しています。多くの有料の日本語サイト向けWordPressテーマでは日本語での丁寧なサポートに対応しています。何をインストールすればよいかよくわからない「プラグイン」も不要だったり最小限の利用で済んだりします。以下に挙げる日本語サイト向けWordPressテーマは当サイトがおススメするWordPressテーマです。

おススメ① 高品質高機能なハイスペックなテーマ「DIVER」

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

WordPressテーマ「DIVER」はアフィリエイター、ブロガーにおススメのWordPressテーマです。目を引くほどのデザインではありませんが、ムダのないレイアウト構成は長い期間使っても飽きの来な… もっと見る

おススメ② オシャレなWordPressテーマ「STREETIST」

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

写真をクールに魅せてくれるWordPressテーマです。企業サイトでももちろん使えますが、写真をよく掲載するブロガーやアフィリエイトサイト運営者に向いているWordPressテーマですね。もちろんレス… もっと見る

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

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

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

日本語サイト向けWordPressテーマをもっと見る

よかったらシェアしてね!

この記事を書いた人

初めてホームページを作成したのは1996年。
2000年よりフリーランスで主に中小企業、学校、各種公的団体、個人事業主のホームページ制作を行っています。
近年はほとんどがWordPress案件となっています。
ビール、料理、カメラ、アウトドア好き!

目次
閉じる