ブロックエディターで任意のHTMLを書けるようになりました（HTMLブロック）
Ver. 3.2.36から、ブロックエディターにHTMLブロックが加わり、本文の途中に任意のHTMLを書けるようになりました。
よく使うのは、外部サービスが発行する埋め込みコードを貼る場面です。会社案内のページにGoogleマップの地図を置く、イベントの告知記事にGoogleフォームの申し込み欄を付ける、といったことが、本文をまるごとHTMLで書き直さずにできます。前後の文章は、これまでどおり段落や見出しのブロックで書けます。
次の画像は、HTMLブロックにGoogleマップの埋め込みコードを貼り、公開側で表示したところです。
Googleマップの地図を貼る
Googleマップで場所を開き、「共有」から「地図を埋め込む」を選びます。「HTML をコピー」を押すと、
<iframe>で始まる埋め込みコードがコピーされます。a-blog cmsのエントリー編集画面で、本文の空の行にカーソルを置き、行の左に出る「+」を押します。メニューの「挿入」にある「HTML」を選ぶと、HTMLブロックが入ります。本文で「/html」と入力して、出てきた「HTML」を選んでも同じです。
「HTMLを編集」を押すと、編集画面が開きます。左の欄に、コピーした埋め込みコードを貼ると、右のプレビューに地図が出ます。「行を折り返す」のチェックを外すと長い行を折り返さずに表示し、プレビューは「拡大」で広げられます。
「更新」を押すと、ブロックの中に地図のプレビューが表示されます。書き直すときは、もう一度「HTMLを編集」を押します。ブロックをダブルクリックしても編集画面が開きます。
エントリーを保存し、公開側のページで地図が出ることを確かめます。
この例では、ベースキャンプ名古屋の地図の埋め込みコードを、Googleマップが出力したまま貼りました。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3261.3525740238033!2d136.887427!3d35.172764!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x600376dc919b8655%3A0x5bbf0168ec8292bb!2z44OZ44O844K544Kt44Oj44Oz44OX5ZCN5Y-k5bGL!5e0!3m2!1sja!2sjp!4v1791337181488!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe>公開側の出力は、widthやstyleなどの属性も含めて、貼ったコードのままです。検証に使ったblogテーマでは、スマートフォンの幅（375px）で開くと、地図は画面の幅に合わせて縮みました。縮むかどうかはテーマのCSSによります。
Googleフォームを貼る
Googleフォームも同じ手順で貼れます。埋め込みコードが出てくるのは、フォームの編集画面の右上にある「その他」（縦に3つ並んだ点）から「HTML を埋め込む」を選んだときです。幅と高さを指定して「コピー」を押します。
フォームは、編集画面の右上の「公開」を押して公開しておきます。検証では、公開するときの回答者を「リンクを知っている全員」にしました。
次のコードは検証用に作ったフォームの埋め込みコードで、Googleフォームが出力したままのものです。
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd1FrIrpn1G8JnMJMMNVfVzbHjHzbqV_FcJcve2UPJk29JSMw/viewform?embedded=true" width="640" height="476" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
Googleにログインしていないブラウザで公開側のページを開くと、フォームが表示されました。そのページの中で選択肢を選んで「送信」を押すと「回答を記録しました」と表示され、Googleフォームの回答にも1件として届きました。
公開側の出力を見ると、srcはそのままで、frameborderなどの属性はstyle="border:0;"に置き換わっています。<iframe>の中の「読み込んでいます…」の文字は消えますが、フォームの表示には影響しません。
スマートフォンの幅（375px）で開くと、フォームの幅は画面に合わせて縮みましたが、高さは指定した476pxのままでした。フォームの中身は枠の中でスクロールして読むことになるので、質問が多いフォームは「HTML を埋め込む」で高さを大きめにしておきます。
貼れるサービスと貼れないサービス
公開側のページは、出力するときにHTMLPurifierで危険なタグを取り除きます（コンフィグのstrip_dangerous_tagがonのとき）。<iframe>は、許可したホストのものだけが残る仕組みです。
Ver. 3.2.36で最初から許可されているのは、たとえば次のサービスです。一覧はconfig.system.default.yamlのhtml_purifier_iframe_allowed_hostsにあります。
種類 | サービス |
|---|---|
地図 | Googleマップ、Yahoo! MAP、NAVITIME |
Googleフォーム、Googleカレンダー、Looker Studio、ウェブに公開したGoogleドキュメント・スプレッドシート・スライド | |
動画 | YouTube、Vimeo、ニコニコ動画 など |
音声 | Spotify、Voicy、stand.fm、SoundCloud、Apple Podcasts |
資料 | Speaker Deck、SlideShare、note など |
ツール | Figma、Canva、CodePen、CodeSandbox、Miro など |
一覧にないホストの<iframe>は、srcだけが外れて空の枠が残ります。次の画像は、developer.a-blogcms.jpのページを<iframe>で貼り、公開側で表示したものです。枠の大きさだけが残り、中には何も表示されません。
一覧にないサービスを使いたいときは、private/config.system.yamlのextends_html_purifier_iframe_allowed_hostsにホストを足します。検証で次の2行を足したところ、上の空の枠だった<iframe>の出力にsrc="https://developer.a-blogcms.jp/"が残るようになりました。Googleマップの<iframe>も消えずに出ていたので、最初から許可されている一覧はそのまま使われています。
extends_html_purifier_iframe_allowed_hosts:
- developer.a-blogcms.jp|書式はホスト名/パス|allow属性に許可する値|sandbox属性に許可する値です。www.youtube.com/embedのようにパスまで書くと、そのパスで始まるURLだけを許可します。
html_purifier_iframe_allowed_hostsそのものをconfig.system.yamlに書くと、最初から許可されている一覧ごと置き換わります。足すだけのときに使うのは、extends_の付いたほうです。
iframe以外で表示が変わるもの
編集画面のプレビューと公開側で表示が変わるのは、<iframe>だけではありません。検証環境で確かめた結果が次の表です。
書いたもの | 公開側の表示 |
|---|---|
| そのまま出る |
| タグごと文字として表示される |
|
|
|
|
いちばん気づきにくいのは<style>要素です。プレビューでは指定した色が付きますが、公開側では<style>から</style>までが、本文の中に文字のまま表示されます。
見た目を変えたいときは、style属性で書くか、テーマのCSSにクラスを用意してHTMLブロックからはクラス名だけを指定します。何度も使う見た目なら、テーマのCSSに書いておくほうが後で直すのが楽です。
編集画面にも「閲覧ページで確認してください」と注意書きが出ます。保存したら、サイトプレビューか公開側のページで表示を一度見ておきましょう。
strip_dangerous_tagがoffのサイト
strip_dangerous_tagは新しくインストールしたサイトではonですが、古いバージョンからアップデートしたサイトではoffのままのことがあります（変数の仕様変更についてのお知らせ）。offだと、HTMLブロックに書いたものは<script>も、許可していないホストの<iframe>も含めて公開側にそのまま出ます。エントリーを編集できる人なら誰でもJavaScriptを入れられる状態なので、HTMLブロックを使い始める前に設定を確かめてください。設定のしかたはHTMLPurifier による HTML サニタイズにあります。
メニューに「HTML」が出ないとき
ブロックのメニューに並ぶブロックは、管理画面の「編集画面」にある「ブロックエディター設定」の「ブロックメニュー」で決まります。新しくインストールしたサイトなら、「HTML」は最初から一覧の中です。
アップデートする前にこのブロックメニューを保存していたサイトでは、保存した一覧がそのまま使われるため、「HTML」が入っていないことがあります。その場合は「追加」で行を増やし、ブロックに「HTML」を選んで保存します。アップデートしたサイトでのこの操作は、今回の検証では試していません。
他のブロックとの使い分け
YouTubeやXの投稿のように、URLを貼るだけで表示できるものは、同じVer. 3.2.36で入った埋め込みブロックが使えます。HTMLブロックを使うのは、Googleマップのように埋め込みコードを貼る必要があるときや、ほかのブロックにない要素を書きたいときです。
段落や見出しなど、ほかのブロックをHTMLブロックに変換することはできません。HTMLにしたいときは、HTMLブロックを新しく追加して書き直します。
HTMLブロックの中身は、HTMLを読める人しか直せません。表のように、ほかのブロックで作れるものはそちらで作っておくと、後から直す人が困りません。
参考
ブロックエディターの基本ブロック。HTMLブロックの保存形式と注意点があります
ブロックエディターのカスタマイズ。ブロックメニューの設定項目の説明があります
HTMLPurifier による HTML サニタイズ。iframeの許可ホストの書式と追加のしかたがあります
検証環境
Ver. 3.2.36で、2026-10-07に確認しました。管理画面の表示は、お使いのバージョンによって異なる場合があります。
