ブロックエディターの編集画面をカスタマイズして、小さな画面でもできるだけ操作しやすくする方法

公開日:/最終更新日: 2024(令和6)年4月6日

WordPressのカスタマイズ方法についての画像

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



私が普段使いしているのははるか昔製の1366x768pxという解像度モニターを持つノートPC。現在ではほとんどがフルHD(1920×1080)ですから、それと比べると、幅も高さも71%しか表示できません。

恐らくWordPressのブロックエディターのスタイルも、現在メジャーであるフルHDの画面で特に問題なく操作ができるようになっていて、私のモニターでは「Admin Menu(管理画面共通の左メニュー)」「Details(リストビューとアウトラインを表示する左側のパネル)」「content area(本文の編集領域)」「Settings(投稿や固定ページそのものの設定とブロックの設定を行う右側のパネル)」のすべてを表示させると、とんでもなく「content area(本文の編集領域)」が狭くなり、実質そのままの状態での編集は難しいです、

※各箇所はWordPress block editorなどに掲載されている呼称で表示しています

本ページではこれをちょっとカスタマイズして編集しやすくした方法をメモとして公開しておきます。

「Details」パネルを常に表示させる

「Details」パネルはリストビューとアウトラインを表示する左側のパネルで、エディター上部の「三」のようなアイコンをクリックすると表示されます。

「リストビュー」では、本文内のブロック構造を表示することができ、ドラッグで自由に移動したり、目的のブロックへ簡単に移動できるといった機能があります。

「アウトライン」では文字数などの情報と、見出しタグの階層を表示させることができます。

ブロックエディターを使い慣れてくると、結構このパネルを使うことが多いのですが、他の場所をクリックしてしまうと自動で閉じるので、必要な時にいちいちこの「三」をクリックして表示する必要があります。

できれば常に表示されるようにしておきたいということでいろいろと探した挙句、この機能はブロックエディターの基本機能として備わっているようです(どのバージョンからかは不明です)。

設定は、画面一番右上の「・・・」が縦に並んだメニューをクリックし、一番下の「設定」をクリックして表示された画面で「常にリストビューを開く」をONにするだけです。

ブロックエディターの左パネルを常に表示する設定

ONにした場合には、あえて「X」で閉じるまで、常に表示されるようになります。

QA Analytics QA Analytics

両サイドのパネルを表示した状態でも本文ができるだけ狭くならないようにする

前述したように、画面幅(領域)の狭いパソコンモニターでは、ブロックエディターの左右のパネルを表示させると、本文は残念な状態でしか表示できません。

でも、以下のコードを有効化しているテーマのfunctions.phpへ追加することで、左右のパネルの幅を調整することができます。

function pwcn_block_editor_side_panel_style() {
?>
<style>
/* 左パネルの幅調整 */
@media (min-width: 782px){
.editor-list-view-sidebar {
    width: 220px;
}
}
/* 右パネルの幅調整 */
@media (min-width: 782px){
.interface-complementary-area {
    width: 250px;
}
}
</style>
<?php
}
add_action('admin_head','pwcn_block_editor_side_panel_style');

ちなみに、WordPress6.5の段階では、左のパネル(Details)のデフォルトは350px、右のパネル(Settings)は280pxでした。

あまり左右のパネルを狭くしてしまうと、パネル内の表示が崩れたり、操作しにくくなったりするので、自身の環境に合わせて幅の調整はしてください。

冒頭で紹介した私のモニターでは、上記のコードを有効にし、左パネルは開きっぱなし、左のメインメニューを縮小した状態で、本文(サイトの本文幅は840px)は、ほぼそのまま表示できるようになりました(上図/処置前、下図/処置後)。

サイドパネルの幅を調整する前のエディター画面
サイドパネルの幅を調整した後のエディター画面

ちょっとしたことでずいぶん見やすくなりますね。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressのカスタマイズ方法についての画像
画面に表示させずにデバッグ情報(エラーや警告の情報)を取得する方法