ブロックエディタを狭い画面で表示するときの文字サイズを小さくした

ブロックエディタを狭い画面で表示する際の文字サイズを小さくしました。
画面幅1080px以下の時に、文字や余白を調整するカスタムCSSを追加しました。
これにより、AI画面を表示させた狭い画面でも、文章の全体像が見やすくなりました。

1. ブラウザにサイドバーを表示すると「狭い」

ブラウザのサイドバーにAI画面などを表示させると作業がスムーズになるものの、表示画面は狭くなります。

Chromeにサイドパネルとマウスジェスチャーを拡張した（Page Sidebar, simpleGestures）

Chromeで面倒な画面切替えをスムーズにするために、「サイドバー」と「マウスジェスチャー」のChrome拡張機能を追加しました。Page Sidebarを使うと、サイドバーで別のウェブサイトを開きながら作業ができ、タブの切り替えが減ります。simpleGesturesは、マウスの動きだけで様々な操作ができるため、ブラウジングがよりスムーズになります。（参考）（chromeウェブストア）Page Sidebar | Open any page in side panel（Ch...

特に、WordPressのブロックエディタを使っているときに、文章の全体像が見えにくく感じます。

一時的にサイドバーを非表示にすれば済ますが、頻繁に切り替えるのも面倒です。
そこで、画面幅1080px以下のときに、文字や余白を狭くするようにしました。

目次に戻る

2. CSS

ブロックエディタ用のカスタムスタイル（editor-style.css）に以下のコードを追加しました。

/** 2024-09-22 狭い画面用の調整 */
@media (max-width: 1080px) {
  .wp-admin-fz-20px .editor-styles-wrapper {
    font-size: 17px;
    line-height: 1.4;
  }
  .editor-styles-wrapper .is-root-container > * {
    margin-bottom: 1em !important;
  }
  .editor-styles-wrapper.article h1 {
    font-size: 1.5em;
  }
  .editor-styles-wrapper.article h2,
  .editor-styles-wrapper.article h3 {
    font-size: 1.2em;
    padding-bottom: 0;
  }
  :where(.editor-styles-wrapper) p {
    font-size: inherit;
  }
}

なかなかフォントサイズの設定が反映されない「:where(.editor-styles-wrapper) p 」などは font-sizeがrevert（ブラウザのデフォルト）でした。

目次に戻る

3. editor-style.cssとadd_editor_style()

editor-style.cssは、このスタイルシートは編集時のみ読み込むようにfunctions.phpで設定しています。

//子テーマ用のビジュアルエディタースタイルを適用
add_editor_style();

add_editor_style() は、ビジュアルエディタ（現在はブロックエディタも含む）のスタイルをカスタマイズするためのWordPress関数です。

指定されたCSSファイルをビジュアルエディタに読み込み、エディタ内でのコンテンツの見た目がサイトのフロントエンドでの表示により近づけることができます。

今回は、一部をエディタ内で小さく表示するようにしているわけです。

こちらもどうぞ。

Chromeにサイドパネルとマウスジェスチャーを拡張した（Page Sidebar, simpleGestures）

[WordPress]ブロックエディタに「書式のクリア」のショートカットキーを追加した（functions.php）

WordPressのブロックエディタに「書式のクリア」のショートカットキーを追加しました。functions.phpとcustom-editor.jsを使用して、Command+Jで「書式のクリア」をできるようにしました。「書式のクリア」のショートカットキーを追加したいWordPressのブロックエディターにControl+Spaceでテキストの書式をクリアするショートカットキーとして「Command+J」を追加しようと思います。ブロックエディタの「書式のクリア」は、そのほか...

[WordPress] ブロックエディタで下線のショートカットキー（⌘U）が反応しなかった（プラグインの再有効化）

WordPressのブロックエディタで、下線のショートカットキー（⌘U）が反応しない不具合がありました。いったんWordPressプラグインをすべて無効化して有効化し直すと、⌘Uがちゃんと動作するように戻りました。WordPressプラグインも、一時的な不調でリセットが有効なことがあるんですね。下線のショートカットキーが使えない？ブログ記事の装飾の仕方で、「主張を太字し、根拠に下線をつけると見やすい」という意見を見つけました。これまでは強調のための太字しか使っていなかったので...

[WordPress] エディタ画面をダークテーマにしたい（Dark Reader拡張機能）

WordPressの編集画面を目に優しいダークテーマに変更したくなりました。個人的には、黒背景の方が落ち着くからです。最初はプラグインを使ってカスタマイズしようと考えましたが、望む色調にうまく調整できませんでした。（参考）WP Dark Mode - The Best WordPress Dark Mode Pluginそこで、発想を転換してブラウザの拡張機能を利用することにしました。自分が使用する画面のみをダークテーマに変更できればよいからです。（参考）Dark Reade...

目次に戻る

QRコードを読み込むと、関連記事を確認できます。