Still not Gutenberg?

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

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

どんも、グーテンが書きやすくなってきたくまです( ˙꒳​˙ )

さて、今回もグーテンのエディタ画面を使いやすくしていきましょう。

書きやすくしよう記事

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

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

プレビューボタンを押しやすくするって?

通常

通常だと右側に

  • 下書きとして保存
  • プレビュー
  • 公開する

3つのボタンがありますよね。

menくん
これってまじで押しにくくない?プレビューボタンとか特に
ヨハネス・G
人によるとは思うけど、位置を変更すればええんじゃよ

変更

プレビューボタンを大きくして、真ん中よりにもってきました。

これならマウスの移動距離が少なくて済むのでちょっと効率的ですね。

menくん
ぼくとしては間違えて「こんにちは、〇〇さん」をクリックしてしまうのが減ったのが良きです

追加するコード

こちらをエディタ編集用のCSSにドーーーン!とぶち込んでください!

まとめ

こういった細かい所を使いやすくしていくと、もっとグーテンを好きになっていきますね。

ヨハネス・G
もっとワシを好きになってちょーだい!
くま
黙れジジイ

3 COMMENTS

まさる

いつも有益なカスタマイズ記事をありがとうございます。

この記事にあるようなグーテンベルクのカスタマイズを行いたいのですが、下記文章の「グーテン専用コード」を探しており、いくつも試しても、グーテンベルクのエディタ画面ではCSSが反映されません。

どのようなコードを書けば良いでしょうか?m(_ _)m

使用環境:
– SANGO
– PORIPU

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

返信する
bear face

まさるさん、お返事がおそくなり申し訳ありません( ˙꒳​˙ )

function.phpに下記のコードを追加すると反映されると思います!


/************************
editor-style.cssをグーテンベルクで表示
*************************/
add_action( 'enqueue_block_editor_assets', 'kumasango_editor_style' );
function kumasango_editor_style() {
wp_enqueue_style( 'block-editor-style', get_theme_file_uri( 'editor-style.css' ) );
}

返信する

コメントを残す

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