ブロックテーマのスタイルを追加する方法

WordPressテーマ「Twenty Twenty-Three」にはデフォルトに加えて10個のスタイルバリエーションが含まれていて、「スタイルサイドバー」から簡単に選んだりカスタマイズしたりすることができますね!

国内のメジャーなテーマでは「スキン」を選択したり、「カスタマイザー」で調整していたりしていましたが、ブロックテーマでは、スタイルサイドバーを使うことで、色や文字の設定(フォント・文字色・背景色・文字サイズ・行間など)が設定できます。

この、スタイルのバリエーションをテーマに組み込みたい!と思ったので、やり方をメモ。

目次

「Create Block Theme」プラグインを使用

ブロックテーマの自作には、WordPress公式プラグイン「Create Block Theme」を使います。

Create Block Themeで、デフォルトのスタイルを作成する方法は「作って学ぶWordPressブロックテーマ」に詳述されているため割愛。

エディターから「インデックス」など、わかりやすいところを開いて編集していきます。

ある程度カスタムできたら、「スタイルバリエーションを作成」

「Create Block Theme」を開きます。

「スタイルバリエーションを作成」を選び、「バリエーション名(ここではsweetsとしています)」を入力して、「生成」。

エディターに戻って、スタイルを表示すると、「スタイル一覧へ」という項目が増えています。

クリックすると、スタイルのバリエーションが出現!

テーマのフォルダを見てみると、stylesフォルダが現れていて、「sweets.json」が格納されています。

意外と簡単にできました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次