2026年5月25日 / 最終更新日 : 2026年5月27日対馬俊彦 WordPress

WordPress 7.0 のカスタム HTML ブロックの困った点とその対策

私の使い方の場合だとブロックの存在に気がつかなくなってしまいましたので、対策を行いました。

WordPress 7.0 のカスタム HTML ブロックのいいところ

WordPress 7.0 になって、カスタム HTML ブロックが進化しました。
具体的には以下の点が WordPress 6.9 までのカスタム HTML ブロックとの違いです。

HTML / CSS / JavaScript を切り替えて入力できる
入力欄が独立して管理しやすくなりましたし、<style> や <script> のタグの入力が不要になってちょっとだけ楽になりました。
プレビューが表示される
入力画面でプレビューできるので、効率よく作業できるようになりました。
入力画面を全画面にできる
行数が多いコードを書くときにありがたい機能です。

WordPress 7.0 のカスタム HTML ブロックの困った点

私のカスタム HTML ブロックの使い方として、HTML を入力せず、CSS だけを入力する目的で使っていることが圧倒的に多いんです。

この使い方の場合、編集画面を開いたときに カスタム HTML ブロックがある場所になにも表示されなくなってしまうんです。そのためにカスタム HTML ブロックの存在に気がつかなくなってしまいました。これ、すごく困ります。

対策として行ったこと

そこで、以下の CSS を追加してエディターのスタイルをカスタマイズしました。

/* 編集画面で カスタム HTML ブロックの存在がわかるように */
.wp-block-html {
    position: relative;
    border: 1px dotted #ccc;
}
.wp-block-html::before {
    content: 'カスタム HTML';
    position: absolute;
    padding: 1px 5px;
    top: 0;
    right: 0;
    font-size: 9px;
    text-align: left;
    color: #333;
    background-color: #e5e5e5;
    z-index: 10000;
}

この CSS によりカスタム HTML ブロックが以下のように表示されて、ブロックがあることがわかるようになりました。

プラグインを使うやり方

Custom HTML Block Extension というプラグインを使うと、カスタム HTML ブロックが高度なコードエディターになって、上記の困った点の対策にもなります。

数行のコードをコピペするだけ、という用途にはこのプラグインはオーバースペックに感じますが、ブロックエディターでコードをたくさん書く作業を行う場合にはこのプラグインが適しています。

サイト運営者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / X-T9 / VK Blocks / VK Filter Search などのベクトル製品のサポート、カスタマイズを最も得意としています。

打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのウェブサイト制作・運用のサポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら