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

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

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テーマをもっと見る

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

WordPressでどんなサイトができる?

WordPressを活用して作るWebサイトは多種多様です。現在インターネット上にあるWebサイトの多くがWordPressで構築されています。ショッピングサイトを運営しようとか、口コミサイトを運営し... もっと見る

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

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

どうしてWordPress?

そもそもWordPressって何?これからホームページを公開しようと色々検索している人、もう既にホームページを運営している人、ブログやFacebook、その他のサービスを利用して情報発信をしている人... もっと見る

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

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

WordPressのディスカッション設定をしよう

WordPressをインストールしたらまず最初にやっておきたい設定がいくつかあります。WordPressには「ディスカッション」というWebサイトを訪れた人が投稿に対してコメントしたり、他のサイトから... もっと見る

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

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

WordPress(ワードプレス)

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

Amazonプライムの自動更新設定を解除いたしましたというメール

お知らせ&コラム

Amazonプライムというサービスをご存じの方も多いでしょう。Amazonをちょくちょく利用する方ならプライム会員になっている方も多いことと思います。みんなに嬉しい、Amazonプライムプライム会... もっと見る

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

レンタルサーバーガイド

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

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

WordPressプラグインガイド

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

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

WordPress(ワードプレス)

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

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

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

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

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

レンタルサーバーガイド

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

wp_list_categories( パラメータ )

WordPressテンプレートタグ

WordPressテンプレートタグ

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

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

レンタルサーバーガイド

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

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

ドメイン取得と各種設定

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