生きやすい人を増やすための働き方のブログ

【JIN】カスタムボタンの文字の色を変更する方法

  • 2021年1月27日
  • 2021年2月5日
  • JIN
JIN 【JIN】カスタムボタンの文字の色を変更する方法

こんにちは、ミスターパインです。

気の利いたことを言えないので、早速本題に入ります。

この記事では

  • WordPressテーマJINの
  • カスタマイズボタンの
  • 文字の色を変更する方法

についてまとめています

[chat face=”mr-pine-maru.png” name=”ミスターパイン” align=”left” border=”yellow” bg=”yellow”]とても簡単なので初心者にもおすすめ[/chat]

ということで早速やっていきましょう。

JINのカスタムボタン

通常のJINのカスタムボタンはこのような感じです。

通常のカスタムボタン

あらかじめ設定された背景色に白い文字が乗っかっています。

[chat face=”mr-pine-maru.png” name=”ミスターパイン” align=”left” border=”yellow” bg=”yellow”] これはこれで悪くないけど文字の色も変えたら個性が出るかも [/chat]

ということで変えてみましょう。簡単です。

JINのカスタムボタンの文字の色を変える方法

<span class=”color-button01-big”><a href=”ここにリンク先”>ボタンに表示させたい文字</a></span>

カスタムボタンを設置した後に、編集画面の「テキスト」で該当箇所を見てみると上記のような文字列になっています。ここを少しアレンジして以下のようにします。

<span class=”color-button01-big”><a href=”ここにリンク先”><span style=”color: #指定した色の配色コード;”>ボタンに表示させたい文字</span></a></span>

試しに配色コードを「#ffe227」に設定してみると以下のようになりました。

ボタンの文字色を変更した

[chat face=”mr-pine-maru.png” name=”ミスターパイン” align=”left” border=”yellow” bg=”yellow”] 配色センスは置いておいて、今回やりたいことは実現できた [/chat]

「配色コードって何?わからん」って人は#xxxxxxの部分をyellowとかredとかblackなどと記載してもOK。

「同じ黄色でも濃淡を意識したいぜ」と言う人はColor Huntというサイトからお好みの配色コードを探すといいと思います。詳しくは以下の記事で。

【JIN】サイトのテーマカラーの変更方法とおすすめの色の決め方

まとめ

ということで今回は以上となります。背景色だけでなく、ボタンの文字色まで変えてオリジナリティ溢れるサイトにしたい方は参考にしてみてください。

カスタムボタンの色を変えたいって人は以下の記事をどうぞ。

【JIN】ボタンデザイン設定方法!色、丸み、幅、高さを変更したりする方法