※この記事はグーテンベルクで書いています。
どもも、グーテンベルクをグーテンベクルと書き間違いをよくするくまです( ˙꒳˙ᐢ )
さて、前回の記事の引き続きで今回もグーテンさんのエディタ画面を使いやすくしようと思います。

ホホホ、今回からワシも参加させてもらうよ

おぉ~グーテンのおっさん!(サンタさんに見えなくもないw)
前回はエディタ画面の幅を広くしたので、今回はあれしましょう、背景に色を付けてみましょう。
書きやすくしよう記事
MEMO
グーテンベルクは単純にeditor-style.cssにコードを書いても、エディタのスタイル変更ができません。function.phpにグーテン専用のコードを記入しておく必要があります。背景をつけるって?

真っ白なエディタ画面に

こんな感じでうっすら背景を追加します。

背景の幅や位置もある程度PC表記のときに合わせているんだよ

まぁ、位置が気に入らなかったらコードを少し変えてね
追加するコード
.edit-post-layout__content .edit-post-visual-editor { background: #f9f9f9; } .block-editor-writing-flow { height: auto; width: 780px; border-radius: 8px; background: white; margin: 0 auto 0 205px; padding: 0 0 40px; } @media (min-width: 600px){ .block-editor-block-list__layout { padding-left: 32px; padding-right: 32px; }}
これをエディタの編集用CSSにぶち込んでくださいね(´罒`)
まとめ
前回は幅を広くして、今回は背景を付けてみました。
次はタイトルや見出しをいじりたいなぁ。

今回はオレの出番無し!!
[…] 書きやすくしよう①:記入する幅を広くする書きやすくしよう②: 背景に色を追加する書きやすくしよう③: タイトル部分をスッキリ書きやすくしよう④: プレビューボタンを押しやすくする […]