1. WordPress 5.3 のエディタにおける問題点
WordPress 5 の新エディター「Gutenberg」では、記事内の各要素が「ボックス」として扱われます。
この「ボックス」は要素の種類によって性質が異なっており、「1行にしかならないボックス」と「複数行になるボックス」とがあります。
例えば、「段落ボックス」は 1行しかありません。
それに対して「カスタムHTMLボックス」は、複数行になります。
つい先日まで、この「複数行になるボックス」はリサイズすることができました(下画面)。
ところが WordPress 5.3 になった途端、このリサイズができなくなってしまいました。
「ボックス内の一部分しか見れない」状態で編集するのは、結構ストレスが溜まります。
本記事では、この複数行あるボックスをリサイズできるようにする方法を紹介します。
2. カスタムHTMLボックスをリサイズ可能にする
カスタムHTMLボックスを例として、リサイズを可能にする方法について説明します。
※ Chrome ブラウザを使います。
まず、Chrome の開発者ツールで、このカスタムHTMLボックスがどのような HTML で記述されているかを確認すると、予想通り <textarea>
タグになっていました。
ざっとこのタグのプロパティを見ると、リサイズを妨げている2つのプロパティが見つかりました。リサイズを可能にするには、これらのプロパティの値を変更する必要があります。
resize
プロパティ:値が “none” になっているのを “vertical” に変更する(縦方向のみリサイズ可能にする)。max-height
プロパティ:具体的な数値がセットされているが、これを “none” に変更する(縦方向の高さに上限を設定しない)。
この変更を実現する JavaScriptコードが以下です。
document.querySelectorAll('textarea.block-editor-plain-text').forEach((elm)=>{
elm.style.resize = 'vertical';
elm.style.maxHeight = 'none';
});
<textarea>
タグに指定されている “block-editor-plain-text” というCSSクラス名を利用して要素を取得し、2つのプロパティ値を書き換えています。
querySelectorAll()
メソッドの引数に指定しているCSSセレクタを変更してください。
編集ページ上で このコードを実行すれば、画面上に追加されているカスタムHTMLボックスがリサイズ可能になります。
但し、これから追加するカスタムHTMLボックスは対象とならないため、新しくカスタムHTMLボックスを追加したら、再度このコードを実行する必要があります。
どうやって実行するのかというと、編集ページを開いた状態で Chrome の開発者ツールを開き(Ctrl + Shift + I キー)、[Console] パネル内に 上の JavaScriptコードを貼り付けて Enter キーを押すだけです。
ただ、この方法は面倒ですので、今回はブックマークレットを用意しました。
執筆者:
関連記事
-
-
【WordPress】Gutenberg の 画像ブロック(core/image)で相対URLをセットする
WordPress の Gutenberg において、「 画像ブロック (core/image)」で相対URLを使用するプラグインを作りましたので紹介します。
-
-
目次1. はじめに2. WordPress をフレームワークとして利用する場合に便利な機能3. ブログでない Webサイトに WordPress を使う試み3-1. したいこと3-1-1. メインのコ …
-
-
【WordPress】特定の画像には Easy FancyBox を適用させない方法
目次1. WordPress の Easy FancyBox プラグインについて問題点2. 特定の画像リンクで、Easy FancyBox を適用させない方法3. デモ 1. WordPress の …
-
-
WordPress: Gutenberg のブロックに独自のCSSクラスを追加する
WordPress: Gutenberg のブロックに独自のCSSクラスを追加する方法を紹介します。
-
-
WordPress: 特定の記事に特定のCSSを出力する方法
WordPress: 特定の記事に特定のCSSを出力する方法