※この記事はグーテンベルクで書いています。
どんも、グーテンが書きやすくなってきたくまです( ˙꒳˙ )
さて、今回もグーテンのエディタ画面を使いやすくしていきましょう。
書きやすくしよう記事
MEMO
グーテンベルクは単純にeditor-style.cssにコードを書いても、エディタのスタイル変更ができません。function.phpにグーテン専用のコードを記入しておく必要があります。プレビューボタンを押しやすくするって？
通常
通常だと右側に
- 下書きとして保存
- プレビュー
- 公開する
3つのボタンがありますよね。
これってまじで押しにくくない？プレビューボタンとか特に
人によるとは思うけど、位置を変更すればええんじゃよ
変更
プレビューボタンを大きくして、真ん中よりにもってきました。
これならマウスの移動距離が少なくて済むのでちょっと効率的ですね。
ぼくとしては間違えて「こんにちは、〇〇さん」をクリックしてしまうのが減ったのが良きです
追加するコード
.edit-post-header__settings {
width: 64%;
}
.edit-post-header .components-button.editor-post-preview {
width: 250px;
}こちらをエディタ編集用のCSSにドーーーン！とぶち込んでください！
まとめ
こういった細かい所を使いやすくしていくと、もっとグーテンを好きになっていきますね。
もっとワシを好きになってちょーだい！
黙れジジイ
[…] 背景に色を追加する書きやすくしよう③： タイトル部分をスッキリ書きやすくしよう④： […]
いつも有益なカスタマイズ記事をありがとうございます。
この記事にあるようなグーテンベルクのカスタマイズを行いたいのですが、下記文章の「グーテン専用コード」を探しており、いくつも試しても、グーテンベルクのエディタ画面ではCSSが反映されません。
どのようなコードを書けば良いでしょうか？m(_ _)m
使用環境：
– SANGO
– PORIPU
“グーテンベルクは単純にeditor-style.cssにコードを書いても、エディタのスタイル変更ができません。function.phpにグーテン専用のコードを記入しておく必要があります。”
まさるさん、お返事がおそくなり申し訳ありません( ˙꒳˙ )
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' ) );
}