Still not Gutenberg?

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

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

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

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

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

書きやすくしよう記事

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

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

こんな感じが完成系

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

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

カスタマイズした完成形

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

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

今回は幅を広くするよ

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

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

ちょっとその前に

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

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

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

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

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

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

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

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

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

まとめ

今回はここまでです。

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

コメントを残す

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