SWELLのボタンカスタマイズ方法【CSS】

2023年1月16日2023年1月26日

たくろー

WordPressテーマ「SWELL」のボタンカスタマイズについて解説していきます。

SWELLには「SWELLボタンブロック」として、オリジナルのボタンデザインが用意されています。それらは専用の設定項目から大きさを変更できたり、色を変更できたりして、色々とカスタマイズできます。

しかし標準機能ではデザインを変更できないボタンもありますので、CSSでコードを追加してカスタマイズする例も含めてご紹介していきます。

「そもそもSWELLとは」については、下記の記事をご参考ください。

SWELLのボタンカスタマイズ【標準機能編】

まずはSWELL標準機能で使えるボタンのカスタマイズ方法をまとめました。

下記4種類のボタンについて解説します。

SWELLボタンブロック
WordPressのボタンブロック
メインビジュアルのボタン
投稿リストのMOREボタン

SWELLボタンブロックのカスタマイズ

SWELLには、オリジナルデザインとして「SWELLボタンブロック」が用意されています。

SWELLボタンの種類

ノーマル：ごく普通のフラットデザイン
立体：影がついたフラットデザイン
キラッと：定期的にキラッと光るデザイン
アウトライン：線だけで描かれたボタン
MOREボタン：デザイン固定の各ばったボタン

記事の中でよく使うのは、これら5種類のボタンです。これらのうち「MOREボタン」以外は、色や丸みをカスタマイズできる機能が用意されています。

「SWELL設定→エディター設定」と進んで「ボタン」のタブを開くと下記の画面へ。

カラーは自由に指定できて、丸みは各デザインそれぞれ「丸みなし」「少し丸める」「丸める」の3種類から選べます。

なおカラー設定の「ボタンのグラデーションをオンにする」をオンにすると、下記画面のように左右の色を選べるようになります。

簡単にインパクトのあるボタンが作れますので、ボタンを目立たせたいときにおすすめです。

WordPressのボタンブロックのカスタマイズ

WordPressの基本機能でもボタンブロックが用意されています。

「塗りつぶし」と「輪郭」の2種類があり、同じ画面から「背景色」と「文字色」を簡単にカスタマイズできます。

横に並べていけるのが意外と便利ですので、こちらも使ってみてください。

メインビジュアルのボタンカスタマイズ

メインビジュアルにも、ボタンを表示する機能が用意されています。

「外観→カスタマイズ→トップページ→メインビジュアル」と進み、下記のように「リンク先」と「ボタンテキスト」を入力するとボタンが表示されます。

デザインは「白抜きボタン」と「ボーダーボタン」の2種類で、同じ画面からボタンカラーを自由に選択でき、ボタンの丸みも3種類から選べます。

なおブログパーツ機能を使えば、自由にほかのボタンを表示させることもできます。詳細は下記の記事もご覧ください。

投稿リストのMOREボタンカスタマイズ

「投稿リスト」ブロックにも、MOREボタンを表示する機能があります。

文言は自由に設定できますが、標準機能でデザインをカスタマイズすることはできません。

SWELLのボタンカスタマイズ【CSS編】

SWELLボタンをCSSでカスタマイズする方法もご紹介します。

カスタマイズしたいボタンごとに、それぞれ下記のセレクタを指定しましょう。

ボタン種類	セレクタ
ノーマル	`.is-style-btn_normal a`
立体	`.is-style-btn_solid a`
キラッと	`.is-style-btn_shiny a`
アウトライン	`.is-style-btn_line a`
MOREボタン	`.is-style-more_btn a`

色やサイズに関するclassも同時に指定すれば、カスタマイズ対象のボタン種別をより細かく絞り込めますので、慣れている方は試してみてください。

ここではボタンの「縁取り」と「影」をカスタマイズするコードをご紹介していきます。

カスタマイズを失敗すると、デザイン崩れにつながる恐れがあります。心配な方はバックアップを取るなどしながら、自己責任でお取り組みください。

SWELLボタンの縁取りをカスタマイズ

ボタンに縁取りをつけると、ポップな印象になります。

例えばボタンをグラデーションカラーにして、CSSで太めの縁取りをつけると、下記のようなボタンになります。

この場合は黒色で5pxの縁取りを付ける指定をしていて、CSSでは下記のように記述しています。

/*ノーマルボタンの縁取り*/
.is-style-btn_normal a{
border:solid 5px #000; /*線の種類、太さ、色*/
}

これを使うことで、通常ではカスタマイズできない「MOREボタン」の縁取りを少し太くしたりもできます。

上記デザインでは色は変えず、縁取りの太さだけを指定しています。

/*MOREボタンの縁取り*/
.is-style-more_btn a{
border:solid 3px;/*線の種類、太さ*/
}

その他、縁取りを点線にしたり、角を丸めたりもできます。

/*MOREボタンの縁取り*/
.is-style-more_btn a{
border:dashed 3px;/*線の種類、太さ*/
border-radius:50px;/*角の丸さ*/
}

そのほかborderプロパティで色々とデザインをカスタマイズできますので、試してみてください。

SWELLボタンの影をカスタマイズ

box-shadowプロパティを使えば、ボタンに影を追加することもできます。例えば下記のようなイメージです。

コードはそれぞれ下記のとおり。

/*控えめな影*/
.is-style-btn_normal a{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 
}

/*派手な影*/
.is-style-more_btn a{
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

/*くっきりとした影*/
.is-style-btn_solid a{
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

指定するボタンは、お好みのものに変更してください。

なお上記に掲載しているbox-shadowの数値は、『Beautiful CSS box-shadow examples』のものを引用しています。他にも素敵なbox-shadowデザインが掲載されていますので、参考にしてみてください。

SWELLボタンカスタマイズまとめ

基本機能でも色や丸みは調整できますので、そこはCSSでいじらず基本機能に頼ることをおすすめします。

CSSをあてればアイデア次第で色々できますので、実現したいデザインがあれば、カスタマイズに挑戦してみてください。

＼当サイト最推しテーマ／

SWELL公式サイトを見る