WordPress / devs tools
WordPress CSS Studio
追加CSS、ブロックの追加クラス、Block Style Variation、theme.jsonなど、WordPressへ安全に反映できる形式で出力します。
編集画面を準備しています…
このツールの範囲
見た目だけで終わらない生成結果
見た目の設定だけでなく、状態、画面幅ごとの差、実装手順、注意点まで1つのProjectとして保存できます。
- 初心者向け貼り付け手順
- コアブロック別のscope
- theme.json fragment
- 戻し方と競合確認
出力形式
CSS · PHP · theme.json · WordPress
Glossary
画面に出てくる英語の意味
- Preview(プレビュー)
- 現在の設定を実際の見た目として確認する領域です。
- State(ステート)
- マウスを重ねた時、キーボードで選んだ時、押している時、無効時などの状態です。
- Responsive(レスポンシブ)
- 画面や親要素の幅に合わせて、配置や見た目を調整する考え方です。
- Reduced motion(動きを減らす設定)
- アニメーションによる負担を減らすため、端末側で動きを少なくする利用者設定です。