ワンタッチボタンのデザインをカスタマイズしよう

 
 投稿記事「スマホからワンタッチで電話できるボタンの設置方法」でスマホ表示時にワンタッチ電話&メールボタンの設置をご紹介しました。

 プラグインを使わないことのメリットは自分でデザインを変更できることです、せっかく自分でワンタッチボタンを作成したのでデザインを変えてみましょう!

 このページでは追加CSSの使用方法から色の変更方法までをご紹介します。

1.追加CSSを活用しよう

 

 今回は、変更をリアルタイムで確認したいので『追加CSS』で作業を行います。
 追加CSSとはカスタムCSSと呼ばれ、実際にCSSを編集してリアルタイムで変更を確認することが出来るのです。
 この機能を使用できるのはWordPress バージョン 4.7以降からとなりますので、皆様あらかじめバージョンアップしておきましょう(2018年4月に配信されてるので大体の方は問題ないと思います。)
 以前style.cssで記述したソースを切り取ります。
(せっかく追加CSSで設定するのにstyle.cssにソースが残ってたら編集してもstyle.cssの設定が反映される可能性があるため)


 使用しているテーマとstyle.cssが開かれていることを確認し、ワンタッチボタンのレイアウトを決めていたソース文を切り取ります。

 切り取ったら『ファイルを更新』を忘れずにクリックします。
ダッシュボード→『外観』→『カスタマイズ』よりカスタマイズ画面に向かいます。

 
 カスタマイズ画面が表示されます。
左側のテーマカスタマイザーの一番下にある『追加CSS』を選択。



 追加CSSの編集画面が表示されました。人によってはあらかじめ入力部分に別のソースが入力されている方もいるかもしれません、その場合は消さずに残しておきましょう。

 先ほど切り取ったソースを入力部分にペーストします、もし切り取り忘れた方は下のソースをご活用ください。

 
 スマホサイズでの確認を行うため。テーマカスタマイザーの下側にある小さな携帯電話のようなアイコンをクリックしてください。

 

 style.cssで切り取ったにもかかわらずスマホ用のレイアウトで表示されていますね。
 これで下準備は終了です、次は枠の色を変更していきましょう。

 

2.背景色と文字の色を変更してみよう

 

 背景色は『background-color』プロパティ、文字の色は『color』プロパティで指定します。 
 背景色は自分のホームページのイメージ(例えば私の場合は薄い青をイメージしています)に沿う色にすると見栄えもよくなります。
 また、背景色を変更したら文字の色『color』プロパティも変更して見やすいように工夫します。(加工前は未設定でしたので、文字部にcolorプロパティを追加します)
 なお、私のワンタッチボタンは本文が隠されないようにopacity(透過)を使用しております。

  色見本としてカラーピッカーを配置しましたので、どの色が合うかご参考にしてください(設置方法は別記事に記載します)

  
 例①

  background-color:#fbdfe5;
  color : #257d8e;

 例②

  background-color:#6af6b9;
  color:#f66a88;

 例③

   background-color:#7f2215;
   color:#7afaf9;

 もともと使っているアイコンが黒ということもあり、背景色が強いとアイコンが見えなくなってしまいますね。
 ホームページのイメージにもよりますがあまり強い(濃い)背景色を使いますと本来読んでほしい本文が読みづらくなりますので、注意しましょう!

3.より見栄えよくしよう

 

 今までbackground-colorというプロパティを使用して背景色を変更しましたが、その上位にあたるbackgroundプロパティはlinear-gradientやradial-gradientという関数で背景色をグラデーションすることが出来ます。

background:linear-gradient(グラデーションの角度または方向, 開始色, 途中色, 終了色)

background:radial-gradient(形状 サイズ 中心の位置 始点の位置 終点の位置)


 グラデーションの細かい設定は他サイト様(サルワカ様など)で調べますと詳しく説明されてますので一度見てみてください。

 こちらでも何個か例をご紹介いたします。
先ほどまで使っていたbackground-colorの文を消し、新たにbackgourdを記入します。

 

 

 例①

  background:linear-gradient(#F89174,#FFC778);

 例②

  background:linear-gradient(#75eaf5,#d0eb);

 例③

  background:radial-gradient(#fffcf0,#f1cf46);

 背景色をグラデーションにするとおしゃれになりますね(笑)。
色々試してみて自分のホームページに合う色を選定しましょう!

 

 いかがでしたでしょうか。
 スマホからの閲覧は今後も増えていきますので、デザインは今後も意識しなければなりませんね。
 今回はデザインについてご紹介しましたが、次回は動き(ふわっと出てきたり、横から飛び出してきたり)についてご紹介をします。

 こちらの記事が皆様の少しでもお役に立てば幸いです。

 

 著者 マエヒロ

画像を押して、質問に来てね!

タイトルとURLをコピーしました