Still not Gutenberg?

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

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

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

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

ヨハネス・G
ホホホ、今回からワシも参加させてもらうよ
menくん
おぉ~グーテンのおっさん!(サンタさんに見えなくもないw)

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

書きやすくしよう記事

書きやすくしよう①:記入する幅を広くする
書きやすくしよう②: 背景に色を追加する
書きやすくしよう③: タイトル部分をスッキリ
書きやすくしよう④: プレビューボタンを押しやすくする

MEMO
グーテンベルクは単純にeditor-style.cssにコードを書いても、エディタのスタイル変更ができません。function.phpにグーテン専用のコードを記入しておく必要があります。

背景をつけるって?

真っ白なエディタ画面に

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

ヨハネス・G
背景の幅や位置もある程度PC表記のときに合わせているんだよ
menくん
まぁ、位置が気に入らなかったらコードを少し変えてね

追加するコード

.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にぶち込んでくださいね(´罒`)

まとめ

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

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

くま
今回はオレの出番無し!!

1 COMMENT

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です