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

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

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

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

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

WordPress5.5にバージョンが上がりこのあたりもだいぶ変わってきているようですので再度検証してみます。

HTML編集した後「このブロックには、想定されていないか無効なコンテンツが含まれています。」っていわれる

WordPress5.5になってブロック内の文字色も「よりリッチなテキスト制御」によりHTMLやCSSをいじることなく変更できるようになりました。ですからブロックエディターでHTMLを直接編集する機会はかなり減ったのではないかと思います。

それでも、部分的に文字サイズを大きくしたいという欲求にかられるかもしれません。そんな時便利なプラグインもありますが、HTMLやCSSを知っていれば…「直接HTMLに書いちゃえ!」ってなると思います。

例えばこんな感じ…

文字色を変更

よりリッチなテキスト制御」から文字色を部分的に緑色に変更しました。この緑色の文字の部分を大きな文字にしたいなあという場合「詳細設定」から「HTMLとして編集」をクリックしHTML編集画面にします。

HTML編集
<p>テスト投稿の本文<span style="color:#0ea22c" class="has-inline-color">テスト投稿の本文テスト投稿の本文</span>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p>

HTMLは上記のようになっていますがこれを以下のように編集します。

<p>テスト投稿の本文<span style="color:#0ea22c; font-size:2em;" class="has-inline-color">テスト投稿の本文テスト投稿の本文</span>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p>

style="color:#0ea22c"
の部分を
style="color:#0ea22c; font-size:2em;"
と変更しました。

これでビジュアル編集に戻ると以下のように表示されます。

文字が大きくなりました。

あえて記述間違いをしてみる

段落の閉じるタグを間違えた

<p>テスト投稿の本文<span style="color:#0ea22c; font-size:2em;" class="has-inline-color">テスト投稿の本文テスト投稿の本文</span>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文<p>

段落のタグ

<p> ~ </p>

の閉じるタグを間違えて”/”を消してしまい

<p> ~ <p>

としてしまいました。

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

出ました…恐怖の
「このブロックには、想定されていないか無効なコンテンツが含まれています。」

「解決」をクリック

「解決」をクリック

「解決」をクリックすると「HTMLに変換」と「ブロックへ変換」と表示されます。上のHTMLソースを見るとわかりますが、「HTMLに変換」をクリックすると誤った記述のまま「カスタムHTMLブロック」に変わります。

「ブロックに変換」をクリックすると正しいHTMLの記述に修正されて正常に表示されました。

「HTMLに変換」をクリック

こちらもやはり誤った記述のまま「カスタムHTMLブロック」に変わります。

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

「...」→「クラシックブロックに変換」をクリック
<p>テスト投稿の本文<span style="color:#0ea22c; font-size:2em;" class="has-inline-color">テスト投稿の本文テスト投稿の本文</span>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文<p>

クラシックエディターのブロックに変換されました。懐かしいクラシックエディターですね。HTMLソースは修正されていません。

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

「...」→「クラシックブロックに変換」をクリック
<p>テスト投稿の本文<span style="color:#0ea22c; font-size:2em;" class="has-inline-color">テスト投稿の本文テスト投稿の本文</span>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p><p></p>

こちらもクラシックエディターになりました。何故か空の段落タグが増えています。おそらく「段落タグを閉じるタグが無い」と判断しているのでしょう。

ダブルクォーテーションマークを誤って消した

<p>テスト投稿の本文<span style="color:#0ea22c; font-size:2em;" class="has-inline-color">テスト投稿の本文テスト投稿の本文</span>テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文テスト投稿の本文</p>

スタイルの記述

style="color:#0ea22c; font-size:2em;"

と記述しなくてはいけないところを

style="color:#0ea22c; font-size:2em;

と最後のダブルクォーテーションマークを誤って消してしまいました。

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

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

は?

もう一回聞いていいですか?

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

ひたすら戻りましょう!

そんなにっちもさっちもいかないエラー表示が出たらページ左上部の「元に戻す」アイコンをひたすらクリックしましょう。何度かクリックするとどこかのタイミングで表示される可能性があります。

こちらもおススメ!!

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

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

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

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

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

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

WordPressのパーマリンク設定をしよう

WordPressをインストールしたらまず最初にやっておきたい設定がいくつかあります。その中でもパーマリンク設定は重要です。パーマリンクを作成するWebサイトに最適なものにしておかないとSEO上も不利... もっと見る

WordPressの管理画面(ダッシュボード)

WordPressの管理画面(ダッシュボード)にログインすると上のような画面になります。WordPressの管理画面ではどのようなことが出来るのか簡単に解説します。左側にメニューがあるので一つ一つ見て... もっと見る

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

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

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

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

WordPressでホームページを作成したほうがいいのか?それとも…

WordPressでWebサイトを構築するとブラウザ上で更新作業が出来てとても便利ですが、自分のWebサイトに必要かどうか見極める必要があります。それはWordPressでWebサイトを構築することは... もっと見る

どうしてWordPress?

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

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

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

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

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

お知らせ&コラム

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

ポータルサイトを作成するためのテーマ「EVERY」

ポータルサイトを作成するためのテーマ「EVERY」

WordPressテーマ

スマホの普及により多くの方が常にインターネットにアクセスし様々な情報やコンテンツにアクセスするようになってきました。この流れは今後もますます加速すると思われますが、これらのユーザーに満足してもらえる情... もっと見る

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

レンタルサーバーガイド

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

メディアと文章ブロック(WordPress5.5)

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

画像ブロックで画像の配置を設定できますが、「メディアと文章」ブロックではより豊富なレイアウトが可能になります。メディアと文章ブロックを追加上のスクリーンショットのように左上の「ブロックの追加」アイ... もっと見る

引用ブロック(WordPress5.5)

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

ホームページやブログを運営していて他のサイトや文献から引用することもあるでしょう。「コピペはいかん!」とは言っても、ホームページを見ている人に分かりやすくするために引用文を載せたほうがいいこともありま... もっと見る

アイキャッチ画像を自動設定してくれる「XO Featured Image Tools」

WordPressプラグインガイド

設定画面が日本語の自動アイキャッチ設定プラグイン投稿や固定ページで記事の内容を分かりやすく表すためのアイキャッチ画像を自動的に設定してくれるプラグインとして「EasyAddThumbnail」を... もっと見る

見出しブロック(WordPress5.5)

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

「見出し」はページの文章をわかりやすくするために段落などの前に配置します。書かれている文章を的確に表す「見出し」をつけることはサイトを閲覧しているユーザーのためにもSEOの観点からもとても重要です。「... もっと見る

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

WordPressプラグインガイド

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

wp_list_categories( パラメータ )

WordPressテンプレートタグ

WordPressテンプレートタグ

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

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

WordPress(ワードプレス)

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