私が普段使いしているのははるか昔製の1366x768pxという解像度モニターを持つノートPC。現在ではほとんどがフルHD(1920×1080)ですから、それと比べると、幅も高さも71%しか表示できません。
恐らくWordPressのブロックエディターのスタイルも、現在メジャーであるフルHDの画面で特に問題なく操作ができるようになっていて、私のモニターでは「Admin Menu(管理画面共通の左メニュー)」「Details(リストビューとアウトラインを表示する左側のパネル)」「content area(本文の編集領域)」「Settings(投稿や固定ページそのものの設定とブロックの設定を行う右側のパネル)」のすべてを表示させると、とんでもなく「content area(本文の編集領域)」が狭くなり、実質そのままの状態での編集は難しいです、
※各箇所はWordPress block editorなどに掲載されている呼称で表示しています
本ページではこれをちょっとカスタマイズして編集しやすくした方法をメモとして公開しておきます。
「Details」パネルを常に表示させる
「Details」パネルはリストビューとアウトラインを表示する左側のパネルで、エディター上部の「三」のようなアイコンをクリックすると表示されます。
「リストビュー」では、本文内のブロック構造を表示することができ、ドラッグで自由に移動したり、目的のブロックへ簡単に移動できるといった機能があります。
「アウトライン」では文字数などの情報と、見出しタグの階層を表示させることができます。
ブロックエディターを使い慣れてくると、結構このパネルを使うことが多いのですが、他の場所をクリックしてしまうと自動で閉じるので、必要な時にいちいちこの「三」をクリックして表示する必要があります。
できれば常に表示されるようにしておきたいということでいろいろと探した挙句、この機能はブロックエディターの基本機能として備わっているようです(どのバージョンからかは不明です)。
設定は、画面一番右上の「・・・」が縦に並んだメニューをクリックし、一番下の「設定」をクリックして表示された画面で「常にリストビューを開く」をONにするだけです。
ONにした場合には、あえて「X」で閉じるまで、常に表示されるようになります。
両サイドのパネルを表示した状態でも本文ができるだけ狭くならないようにする
前述したように、画面幅(領域)の狭いパソコンモニターでは、ブロックエディターの左右のパネルを表示させると、本文は残念な状態でしか表示できません。
でも、以下のコードを有効化しているテーマの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)は、ほぼそのまま表示できるようになりました(上図/処置前、下図/処置後)。
ちょっとしたことでずいぶん見やすくなりますね。
コメントを残す