SWELLカスタマイズ｜ボタンを4色以上に設定する方法

SWELLのボタンの色設定が3色しか設定できないのが不便です

SWELLは他のテーマと比べて変な制限がある部分が多いです。

SWELLのボタンブロックはブロックの設定からだと、メインカラー＋3色の色指定しかできません。

ボタン毎に自由に色指定ができればいいのに、なぜこの部分に制限を加えてるのかとても謎です。

もちろん、プリセットのカラーは便利だと思いますが、その種類が3つあっても、自由に設定できるモードが無いのは不親切だと思います。

この記事ではSWELLのボタンブロックの色指定を自由に変更するカスタマイズをご紹介します。

SWELLフォーラムにて同じような質問がありました。

swellボタンのカラー変更が初期設定で３色用意されていると思うのですが、ボタンを４つ配置してそれぞれ色分けしたい場合は、どのようにすればよろしいでしょうか？
現在はSWELLボタン以外のボタン機能で色分けをしています。
ご回答よろしくお願いいたします。

https://users.swell-theme.com/forum/swell-forum/swell%e3%83%9c%e3%82%bf%e3%83%b3%e3%81%ab4%e8%89%b2%e7%9b%ae%e3%82%92%e8%a8%ad%e5%ae%9a%e3%81%97%e3%81%9f%e3%81%84/

この質問者の方は、SWELLボタンは最大で4色までしか指定できないので、標準のボタンブロックを使って色を変更しているということでした。

SWELLのボタンブロックの色指定の仕組み

SWELLのボタンブロックは、メインカラー＋プリセットの3色の中から選択する仕組みになっています。

SWELLのボタンブロックの色は、CSS変数の--the-btn-colorで指定されています。

この変数を他のセレクタと組み合わせて、書き換えています。

メインカラーの場合

[class*=is-style-btn_] {
    --the-fz: 1em;
    --the-width: auto;
    --the-min-width: 64%;
    --the-padding: .75em 1.5em;
    --the-btn-color: var(--color_main);
    --the-btn-color2: var(--color_main);
    --the-btn-bg: var(--the-btn-color);
    display: block;
    font-size: var(--the-fz);
    margin: 0 auto 2em;
    position: relative;
    text-align: center;
}

プリセットの3色の場合

赤系

ボタンブロックに、red_というセレクタが追加され、CSS変数の--the-btn-colorが上書きされます。

.red_ {
    --the-btn-color: #f74a4a;
    --the-btn-color2: #ffbc49;
    --the-solid-shadow: rgba(185,56,56,1);
}

青系

ボタンブロックに、blue_というセレクタが追加され、CSS変数の--the-btn-colorが上書きされます。

.blue_ {
    --the-btn-color: #338df4;
    --the-btn-color2: #35eaff;
    --the-solid-shadow: rgba(38,106,183,1);
}

緑系

ボタンブロックに、green_というセレクタが追加され、CSS変数の--the-btn-colorが上書きされます。

.green_ {
    --the-btn-color: #62d847;
    --the-btn-color2: #7bf7bd;
    --the-solid-shadow: rgba(74,162,53,1);
}

SWELLのボタンブロックの色指定を変更するには？

SWELLのエディタ設定の色を増やすことはユーザーのカスタマイズで実現するのは荷が重いのでCSSの追加とパタン登録で対応するのが良いと思います。

ボタンブロックにclassを追加して、そのclass定義をしてあげれば構造的には簡単に増やせます。

例えば、紫色にしたいと思ったら、次のようにCSSを追加して、カラーコードを好きなように書き換えます。

.purple_ {
    --the-btn-color: #6b29c6;
    --the-btn-color2: #7bf7bd;
    --the-solid-shadow: rgba(74,162,53,1);
}

ボタンブロックにpurple_というクラスを追加してあげれば、ボタンの色指定は完了です。

class追加をしたボタンブロックをパターンとして登録しておけば、毎度ブロックにCSSを追加する必要もありません。

まとめ

SWELLのボタンブロックでブロックごとに自由に色指定できないので不便だな？と思っている人は、今回の記事を参考にカスタマイズしてみてください。

ブロックにclassを追加して、独自のカラーに設定して、そのブロックをパタンに登録するというのはWordpressのブロックエディタの使い方としては一般的な方法なので、覚えておいて損はないでしょう。