SWELLでボタンを作っていると、「背景画像の上に白枠のボタンを置きたい」と思うことがありますよね。
でも、白枠ボタンを作ったあとにカーソルを合わせると、背景が白くなってしまい、文字やアイコンが見えなくなってしまいます。
私も実際に、背景画像の上に白枠ボタンを置いたとき、通常時はいい感じに見えていたのですが、カーソルを合わせた瞬間に「あれ？文字が読めない……」となりました。
そこで今回は、SWELLの白枠ボタンで、ホバー時も文字やアイコンが見えるようにするCSSカスタマイズを紹介します。
難しい作業はありません。追加CSSクラスを入れて、CSSを少し追加するだけでOKです。
「SWELLのボタンを白枠にしたい」「白背景になって文字が見えない」という方は、ぜひ参考にしてみてください。
SWELLボタンを白枠ボタンで文字が見えなくなる原因
まずは、なぜSWELLボタンを白にすると文字が見えにくくなるのかを簡単に確認しておきます。
原因が分かっていると、CSSを追加するときも「何を直しているのか」が分かりやすくなります。
ホバー時にボタン背景が白くなる
SWELLボタンでは、ボタンの色を変更できます。
とても便利な機能なのですが、白を選んだ場合、文字だけでなくボタンの背景も白くなってしまいます。
そのため、背景画像や濃い色のセクションの上にボタンを置いたときに、ボタン部分だけ白く塗りつぶされたように見えてしまいます。
本当は「白い枠線と白い文字だけ」にしたいのに、ボタン全体が白くなってしまうイメージです。
これだと、デザインによっては文字やアイコンが見えにくくなったり、せっかくの背景画像になじまなかったりします。
背景画像の上では白枠ボタンにしたい場面がある
背景画像や濃い色の背景を使っているセクションでは、塗りつぶしのボタンよりも、白枠だけのボタンの方がきれいに見えることがあります。
たとえば、メインのボタンは色付きにして、横に並べるサブボタンだけ白枠にするような使い方です。
このようにすると、ボタン同士の役割が分かりやすくなり、全体のデザインもすっきり見えます。
ただ、カーソルを合わせると前述したように白背景で文字やアイコンが見えなくなってしまいます。
そこで今回は、追加CSSクラスを使って、特定のSWELLボタンだけを白枠デザインにしても使えるようにしていきます。
この記事で作るSWELLボタンの完成イメージ
今回カスタマイズするのは、SWELLの白枠ボタンです。
白枠ボタンは、SWELLの標準機能でも作れます。なので、通常の状態だけを見ると「これで問題なさそう」と感じるかもしれません。
ただ、実際にページを確認してみると、ボタンにカーソルを合わせた時に背景が白くなり、文字やアイコンが見えにくくなることがあります。
私も最初は「普通に白枠ボタンできてるやん」と思っていたのですが、ホバーした瞬間に「あ、読めない……」となりました。
特に背景画像や濃い色のセクション上に置いているボタンだと、この違和感がけっこう目立ちます。
ホバー時も読みやすい白枠ボタンにする
この記事では、通常時だけでなく、カーソルを合わせた時も文字やアイコンが読める白枠ボタンに調整していきます。
具体的には、ホバー時に背景が真っ白にならないようにして、白文字やアイコンが見える状態を保つCSSを追加します。
ボタンの見た目を大きく変えるというより、今ある白枠ボタンを少しだけ整えるイメージです。
「デザインはいい感じなのに、ホバーした時だけ惜しい」という場合に使いやすいカスタマイズです。
SWELLボタンを白枠にする手順
ここからは、実際にSWELLボタンを調整していきます。
やることは大きく分けて2つだけです。
- 白枠にしたいSWELLボタンに、専用のCSSクラスを追加する
- 追加CSSに、ホバー時の見た目を整えるCSSを入れる
「CSS」と聞くと少し難しく感じるかもしれませんが、今回はコピペで使える内容にしています。
ボタン全体のデザインを大きく変えるというより、ホバーした時に白背景になって読みにくくなる部分だけを直すイメージです。
1. カスタマイズしたいSWELLボタンを選択する
まずは、白枠にしたいSWELLボタンをクリックします。
編集画面でボタンを選択すると、右側にブロックの設定パネルが表示されます。
ここで、白枠にしたいボタンだけを選んでおきましょう。
サイト内のすべてのボタンを一括で変えるのではなく、必要なボタンだけにCSSを当てる形にすると、他のボタンのデザインに影響しにくくなります。
2. 「高度な設定」を開く
ボタンを選択したら、右側の設定パネルから「高度な設定」を開きます。
一番下の方にあるので、見つからない場合は設定パネルをスクロールしてみてください。
SWELLに限らず、WordPressのブロックではこの「高度な設定」にCSSクラスを追加できます。
最初は少し分かりにくい場所にありますが、一度覚えておくと他のカスタマイズでも使えるので便利です。
3. 追加CSSクラスに専用クラスを入力する
「高度な設定」の中にある「追加CSSクラス」に、今回使うクラス名を入力します。
入力するクラス名はこちらです。
このCSSを入力する
btn-white-outlineこのクラス名を入れることで、「このボタンだけ白枠ボタン用のCSSを当てる」という目印になります。
クラス名自体は自由に決められますが、この記事では分かりやすいように btn-white-outline という名前にしています。
4. すでにクラスが入っている場合は半角スペースで区切る
今回、私の環境では最初から以下のクラスが入っていました。
is-style-btn_lineこの場合、既存のクラスを消す必要はありません。（消したらデザインが崩れます）
後ろに半角スペースを入れて、今回のクラスを追加すればOKです。
is-style-btn_line btn-white-outlineここ、地味ですがけっこう大事です。
クラス名同士をくっつけてしまうと、別の名前として認識されてしまい、CSSが効かなくなります。
なので、すでにクラスが入っている場合は、必ず半角スペースで区切って追加してください。
SWELLボタンのホバー時を調整するCSS
追加CSSクラスを設定できたら、次はCSSを追加します。
今回やりたいことは、白枠ボタンそのものを作るというより、カーソルを合わせた時に白背景になって読みにくくなる状態を防ぐことです。
なので、通常時の白枠デザインはできるだけそのまま活かして、ホバー時だけ見た目を調整していきます。
追加するCSSコード
以下のCSSを追加してください。
/* SWELLボタン：白枠ボタンの通常時 */
.btn-white-outline .swell-block-button__link {
background: transparent !important;
color: #fff !important;
border-color: #fff !important;
}
/* SWELLボタン：白枠ボタンのホバー時 */
.btn-white-outline .swell-block-button__link:hover {
background: rgba(255, 255, 255, 0.12) !important;
color: #fff !important;
border-color: #fff !important;
}
/* ホバー時のアイコン色も白にする */
.btn-white-outline .swell-block-button__link:hover svg,
.btn-white-outline .swell-block-button__link:hover i {
color: #fff !important;
fill: #fff !important;
}このCSSを入れることで、カーソルを合わせた時にボタン背景が真っ白にならず、文字やアイコンも白のまま表示されます。
背景にはほんの少しだけ白を重ねているので、完全な透明のままよりも「ボタンに触れている感じ」が出やすくなります。
個人的には、背景画像の上に置くボタンなら、このくらい控えめなホバー表現の方が上品に見えると思います。
CSSはどこに追加すればいい？
CSSを追加する場所はいくつかありますが、よく使うのは以下の場所です。
外観 → カスタマイズ → 追加CSSサイト全体で同じカスタマイズを使いたい場合は、この「追加CSS」に入れておくのが分かりやすいです。
特定の固定ページだけで使いたい場合は、固定ページ側に用意されているCSS入力欄に入れてもOKです。
どちらに入れるか迷う場合は、今後ほかのページでも使う可能性があるかで考えるとよいです。
他のページでも白枠ボタンを使いそうなら「追加CSS」に入れる。今回のページだけで使うなら、そのページ専用のCSS欄に入れる。そんな感じで大丈夫です。
背景の濃さに合わせて透明度を調整してもOK
ホバー時の背景は、以下の部分で調整できます。
background: rgba(255, 255, 255, 0.12) !important;0.12 の数字を大きくすると、ホバー時の白い背景が少し濃くなります。
たとえば、もう少し分かりやすくしたい場合は、以下のようにしてもOKです。
background: rgba(255, 255, 255, 0.2) !important;ただし、数字を大きくしすぎると白背景に近づいてしまい、また文字が見えにくくなることがあります。
まずは 0.12 くらいで試して、実際の背景画像を見ながら少しずつ調整するのがおすすめです。
追加CSSクラスを複数入れる時の注意点
今回のカスタマイズで、少しだけ気をつけたいのが「追加CSSクラス」の入れ方です。
ここが間違っていると、CSSのコード自体は合っていても反映されません。
「CSSが間違っているのかな？」と思いがちですが、実はクラス名の入力ミスだった……ということはけっこうあります。
クラス名の間は半角スペースで区切る
SWELLボタンの追加CSSクラスには、すでにクラス名が入っている場合があります。
今回でいうと、私の環境では最初から以下のクラスが入っていました。
is-style-btn_lineこの状態で、今回のクラス名を追加する場合は、既存のクラスの後ろに半角スペースを入れて追加します。
正しい入力例はこちらです。
is-style-btn_line btn-white-outlineこれで、もともとの白枠ボタンのスタイルを残したまま、今回追加したCSSも効くようになります。
クラス名をつなげて入力しない
反対に、以下のようにクラス名をくっつけてしまうと、うまく反映されません。
is-style-btn_linebtn-white-outline見た目では少しの違いに見えますが、WordPress側ではまったく別のクラス名として扱われます。
そのため、CSSに書いた btn-white-outline が見つからず、カスタマイズが効かない状態になります。
カンマや全角スペースも使わない
追加CSSクラスを複数入れる時に、カンマで区切りたくなるかもしれませんが、カンマは不要です。
以下のような入力は避けましょう。
is-style-btn_line,btn-white-outlineまた、スペースは半角スペースを使います。
日本語入力のまま作業していると、うっかり全角スペースが入ることもあります。反映されない時は、クラス名の間のスペースも一度確認してみてください。
既存のクラスは消さなくてOK
すでに入っている is-style-btn_line は、SWELL側のボタンスタイルに関係するクラスです。
なので、基本的には消さずにそのまま残しておくのがおすすめです。
今回のように、後ろへ新しいクラスを追加するだけで問題ありません。
「今あるクラスを消して、新しいクラスに置き換える」というより、今のボタンに目印をひとつ足すくらいの感覚で大丈夫です。
まとめ｜SWELLボタンの白枠はホバー時の見え方まで整えると使いやすい
SWELLの白枠ボタンは、標準機能だけでも作れます。
ただ、実際にページで確認してみると、カーソルを合わせた時に背景が白くなり、文字やアイコンが見えにくくなることがあります。
通常時はきれいに見えているのに、ホバーした瞬間だけ読みにくくなると、ちょっともったいないですよね。
そんな時は、追加CSSクラスを使って、対象のボタンだけホバー時のデザインを調整するのがおすすめです。
今回のように btn-white-outline というクラスを追加しておけば、他のボタンには影響を与えず、必要なボタンだけカスタマイズできます。
すでに is-style-btn_line が入っている場合は、以下のように半角スペースで区切って追加すればOKです。
is-style-btn_line btn-white-outlineCSSに慣れていないと、最初は少しむずかしく感じるかもしれません。
でも、やっていることは「このボタンだけ見た目を少し整えるための目印を付ける」というシンプルな作業です。
背景画像や濃い色のセクションに白枠ボタンを置きたい時は、ぜひ試してみてください。
ホバー時まできれいに整えるだけで、サイト全体の印象もかなり引き締まります。
KATADORIでは、SWELL専用の業種別テンプレートを配布しています。
構成・デザイン・導線まであらかじめ整えているので、
文章や画像を差し替えるだけで、見た目の整ったサイトを作りやすくなります。
