グーテンベルクのエディタ画面　書きやすくしよう②

※この記事はグーテンベルクで書いています。

どもも、グーテンベルクをグーテンベクルと書き間違いをよくするくまです‪( ˙꒳​˙ᐢ )

さて、前回の記事の引き続きで今回もグーテンさんのエディタ画面を使いやすくしようと思います。

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

おぉ～グーテンのおっさん！（サンタさんに見えなくもないw）

前回はエディタ画面の幅を広くしたので、今回はあれしましょう、背景に色を付けてみましょう。

背景をつけるって？

真っ白なエディタ画面に

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

背景の幅や位置もある程度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にぶち込んでくださいね(´罒`)

まとめ

前回は幅を広くして、今回は背景を付けてみました。

次はタイトルや見出しをいじりたいなぁ。

今回はオレの出番無し！！