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

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

ども、グーテンベルクを少しでも上手に使いこなしたいと、日本中の誰よりも思っているくまです٩( ᐛ )و

グーテンベルクのエディタ画面を自分の使いやすいように変更するカスタマイズの備忘録を書いていきます。

今回は、エディタ画面の文字入力幅を広くしますね。

こんな感じが完成系

デフォルトのエディタ画面

SANGO用のグーテンベルクプラグインを入れている方はこの様なエディタ画面になっていると思います。

カスタマイズした完成形

背景やフォントなどを微調整しています。

今回の記事ではこちらの全部を紹介しませんが、ひとつひとつを記事に残していくつもりです。

今回は幅を広くするよ

エディタ画面と実際の投稿画面とでは幅が違うのでそれを合わせました。

ついでに、わかりやすく後ろに背景を追加しても良いかもですね( ˶ˆ꒳ˆ˵ )

ちょっとその前に

ぼくは丸っこいフォントではなく、シュッとしたフォントに変更しています。

そのため、みなさんとはちょっとだけ幅が違うかもしれません。

まぁそこらへんはご了承くだはい‪( ˙꒳​˙ᐢ )

もしもフォントも合わせたい人は、こちらをエディタ編集用CSSに貼り付けてください。

.wp-block *, .editor-styles-wrapper{
    font-family: "Helvetica","Arial",YuGothic,"Yu Gothic","Hiragino Sans","ヒラギノ角ゴシック","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif!important;
}

このフォントコードは無理に入れなくても大丈夫です！

エディタ画面の幅と文字サイズを変更する

.wp-block {/*文字が書ける幅を広げる*/
    max-width: 780px;
}
div.editor-styles-wrapper p {/*文字のサイズを調整*/
    font-size: 107%;
}

こちらをエディタの編集用CSSに入れれば、実際の投稿画面と同じサイズで記入できるようになります。

好みで幅のサイズを変更してくださいね。

こんな感じで文字を書ける横幅が広がっています。

まとめ

今回はここまでです。

完成形までの流れはまた今度。