カスタム HTML を追加する

カスタム HTML ブロックを使用して HTML コードを追加し、編集しながらプレビューできます。このガイドでは、このブロックを使用してサイトにコードを追加する方法を説明します。

始める前に、カスタム HTML ブロックは単一の固定ページまたは投稿に生の HTML コードを追加するためのものです。常に適したツールというわけではありません。目的が以下のケースのいずれかである場合、リンク先のガイドを使用すると迅速に進めることができます。

• YouTube、Spotify、Instagram、Giphy、Pinterest などの動画、地図、ソーシャル投稿、サードパーティのサービスを埋め込む:「他のプラットフォームからコンテンツを埋め込む」を参照してください。埋め込みブロックはすべてのプランで機能し、カスタムコードなしで多くの人気サービスをサポートします。
• 連絡先の詳細、登録、フィードバックを収集する: 「フォームブロック」を参照してください。フォームブロックは、HTML なしで作業フォームを構築します。
• サイトに CSS スタイルを追加する:「カスタム CSS を追加する」を参照してください。
• サイトのヘッダーにコードを追加する (認証メタタグ、サイト全体で読み込むサードパーティのスクリプト):「コードをヘッダーに追加する」を参照してください。

カスタム HTML ブロックを追加するには、次の手順を実行します。

1. サイトのダッシュボードに移動し、HTML を追加する固定ページ、投稿、テンプレートを選択します。
2. 「+」ブロック挿入アイコンをクリックして「HTML」を検索します。
3. 「カスタム HTML」ブロックをクリックしてコンテンツに追加します。

ブロックを追加する手順についてはこちらを参照してください。

ブロックを追加したら、次の手順を実行して HTML コードを追加します。

1. 「HTML を編集」ボタンをクリックします。

2. エディターの左側に HTML コードを入力するか、貼り付けます。
   • HTML を作成すると、右側にコードのプレビューが表示されます。
3. 完了したら、「更新」ボタンをクリックして変更を保存します。

HTML コードの結果がエディターに表示されます。変更を加えるには、ブロックツールバーの「HTMLを編集」ボタンをクリックします。

HTML はブラウザーにサイトのコンテンツを表示する方法を伝えるコンピューター言語です。WordPress.com では、すべてのプランで次の HTML タグを使用できます。

以下のタグを追加するには、ホスティング機能を有効化した有料プランが必要です。プランのホスティング機能を有効化する方法について、こちらで参照してください。

embed, frame, iframe, form, input, object, textarea, script, style, link

サイトに追加できるコードの種類と、コードの種類がサポートされていない場合の代替案については、サイトにコードを追加する方法のガイドを参照してください。

保存後に HTML コードが期待どおりに表示されない場合は、次の一般的な原因を確認します。

WordPress.com はセキュリティ目的で特定の HTML タグをフィルタリングします。iframe、script、style、form、embed、object などのタグは、ホスティング機能が有効化された有料プランを必要とします。

保存後にコードが消えたり、部分的に削除されたりする場合は、次のチェックを順番に実行します。

1. プランを確認します。サイトのダッシュボードに移動し、「アップグレード」→「プラン」を選択します。カスタム HTML ブロックは、有料プランでのみ制限付きタグを受け入れます。無料プランをご利用の場合は、有料プランにアップグレードして続行します。
2. ホスティング機能を有効化します。有料プランだけでは不十分であり、ホスティング機能も有効にする必要があります。サイトに1つ以上のプラグインをインストールし、プランを有効化してカスタムコードを受け入れます。
3. コードを再入力します。プランの支払いが完了し、ホスティング機能が有効になったら、コードをカスタム HTML ブロックに再度貼り付けて保存します。

ホスティング機能を有効化した後もコードが削除される場合は、このコンテキストでタグがサポートされていないか、サードパーティのサービスがサポート対象外のマークアップを使用する埋め込みコードを公開している可能性があります。代わりに埋め込みブロックを試すか、以下の「想定されていないか無効なコンテンツ」エラーを解決するを参照してください。

サードパーティのサービス (動画、音楽、地図、ソーシャル投稿、カレンダー、ニュースレター、ドキュメントビューア) からコンテンツを埋め込もうとしている場合は、代わりに埋め込みブロックを使用します。埋め込みブロックはすべてのプランで機能し、HTML を記述する必要はありません。また、YouTube、Vimeo、Spotify、X、Instagram、TikTok などの多くのサービスをサポートしています。

埋め込みブロックの一覧にサービスが表示されない場合は、サービスに iframe または script が必要である可能性があります。ホスティング機能が有効化された有料プランで、埋め込みコードをカスタム HTML ブロックに追加します。

ブロックに想定されていないコンテンツまたは無効なコンテンツが含まれていることを示すメッセージが表示される場合は、ブロック内の HTML が不正な形式か、変更されている可能性があります。「ブロックのリカバリーを試行」を選択して、エディターが問題を自動的に修正できるようにします。エラーが解決しない場合は、ブロックエラーの解決方法のガイドでさらなるオプションを参照してください。