Gutenberg Stylist
WordPressブロックエディタの見た目を自分好みに、もっと使いやすく。
Editor Preview
これが記事の大見出しです
ブロックエディタのプレビューです。コンテンツ幅や背景色の設定がリアルタイムで反映されます。
テキストは自由に変更可能です。
これは「幅広 (alignwide)」ブロックの例です。
ここに独自のブロックスタイルを追加した際のプレビューが表示されます。
レイアウト設定
840px
1080px
配色・フォント
16px
UI クリーンアップ
ブロックスタイル登録
register_block_style を使用して独自のバリエーションを追加します。
functions.php
editor-style.css / style.css
このツールの使い方・詳細
🛠 使い方
1. 基本設定（幅や背景色）を入力します。 2. 必要に応じて「追加スタイル」で独自のデザインを作成します。 3. 生成されたPHP/CSSコードをテーマの functions.php とスタイルシートに貼り付けます。
💡 活用シーン・ユースケース
- 管理画面（エディタ）と実際のサイトの見た目がズレていて作業しにくい時に
- クライアントに余計なエディタ操作をさせないようUIを制限したい時に
- 独自のボタンスタイルやテーブルスタイルを簡単に追加したい時に