このブロックには、想定されていないか無効なコンテンツが含まれています(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を活用して作るWebサイトは多種多様です。現在インターネット上にあるWebサイトの多くがWordPressで構築されています。ショッピングサイトを運営しようとか、口コミサイトを運営し... もっと見る

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

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

どうしてWordPress?

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

WordPressとは?

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

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

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

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

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

WordPressのメディア設定をしよう

WordPressをインストールしたらまず最初にやっておきたい設定がいくつかあります。WordPressの固定ページや投稿の中で使用する画像のサイズをあらかじめ設定しておくことが必要です。WordP... もっと見る

WordPressの表示設定をしよう

WordPressをインストールしたらまず最初にやっておきたい設定がいくつかあります。WordPressを活用して作成したWebサイトのトップページ設定や記事一覧ページで表示される記事の投稿数などの設... もっと見る

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

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

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

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

お知らせ&コラム

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

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

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

WordPressテーマ

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

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

レンタルサーバーガイド

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

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

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

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

より自由に、柔軟にサイトを制作することをコンセプト「MOMENTUM」

WordPressテーマ

こんなサイトにピッタリ!インテリア・エステサロン・カフェ・ダイニングバー・レストラン・美容サロンWordPressテーマ「MOMENTUM」には、様々ななテーマオプション機能が用意されています。ウ... もっと見る

引用ブロック(WordPress5.5)

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

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

オシャレなWordPressテーマ「STREETIST」

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

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

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

WordPressプラグインガイド

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

ギャラリーブロック(WordPress5.5)

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

一枚の画像を貼り付ける際には「画像ブロック」や「メディアと文章ブロック」を利用しますが、一か所に何枚かの画像を貼り付ける際には「ギャリーブロック」が便利です。ギャラリーブロックを追加上のスクリーン... もっと見る

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

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

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