MENU
ブログ管理者 よこぽよ
執筆 よこぽよ
Amazonデバイス沢山持っています。
Fire TV好きです。

アレクサも日々活用。
デバイスを使っていて気づいたことを発信しています。

家電・ガジェットの記事、ブログ運営(主にCanva)のこと。

北海道に住んでいるため道民ネタ発信もしています。
PVアクセスランキング にほんブログ村
\ 最大10%ポイントアップセール! /

Canva文字背景エフェクト・色の変更方法!

クリックできる目次
スポンサーリンク

Canva【文字のエフェクト・背景】

Canva文字のエフェクト「背景」が追加されました。

もうすでに使っている方を見かけますし、私もかなり活用しています。

Canvaの文字エフェクト【背景】をまだあまり使っていないという方やよくわからないということがありましたらぜひ見ていただきたいです!

ちなみにこの記事は以下を参考にさせていただきました。

  Canvaでつくる!BANNER-TEMPLATE』さんのサイト

BANNERーTEMPLATEさんのテンプレートでデザイン♪

サンプル2
テンプレート2
サンプル3
チョリー

早速使い方をご紹介していきます。

文字のエフェクト

文字のエフェクト背景を使うことで、文字の部分だけに背景を付けることが出来ます。

このエフェクトは文字の背景の大きさを自由自在に変えれたり、色や透明度を簡単に変更出来るのでとても便利。

文字の後ろに図形を入れて作ることも出来ますが、エフェクトを使うことも出来る様になりました。

文字の後ろに図形を入れて背景を付ける方法

文字の背景に図形の四角を使っている
ネコ

今までは図形を文字の下に入れて透明にしていたよね!

エフェクトを使って背景を付ける方法

文字にエフェクト背景
チョリー

文字の背景エフェクト使えるね♪

図形を文字の後ろに置くパターンも良いけど、文字の部分だけに背景を入れられるのは楽ですねヽ(^。^)ノ

【エフェクト・背景】文字と背景の色を変える方法

文字エフェクト背景を使った時の文字色と背景の色を変える方法をご紹介します。

文字の色を変える

文字のエフェクト・背景を使った時に文字色を変える方法は簡単です。

他のエフェクトと同じで、Canva画面の上にあるツールバー文字Aのところで変更出来ます。

元々文字の色を自分の好きな色に変えておけば良いって話でもありますが…

エフェクトを付けてから文字の色を変更する方法はわかりずらいかも知れないので一応解説!

STEP
文字を入力する
文字を入力する
STEP
エフェクトをつける
  1. 背景を変えたい文字を選択する
  2. エフェクトで『背景』を選択する
エフェクトをつける
STEP
文字色を変えたい場合は上のバー「A」のところを押して変更する
文字色を変えたい場合は上のバー「A」のところを押して変更する
STEP
パレットで好きな色を選ぶ
パレットで好きな色を選ぶ
チョリー

背景の色と被って文字が見えなくなったけど…文字の色を変更することが出来た!

背景の色を変える

背景の色を変える方法も簡単です。

文字エフェクトの背景を選択するとすぐ下にカラーというところがあります。

その右側にあるカラーボックスの中をクリックし、背景の色を変更出来ます。

STEP
文字を選択し「エフェクト」をクリックするとスタイルが出てくるので「背景」を選択
  1. 背景を変えたい文字を選択
  2. 『エフェクト』をクリック
  3. 『エフェクト』のところにカーソルを置いて下にスクロール
背景を変えたい文字を選択
『エフェクト』をクリック
『エフェクト』のところにカーソルを持って行ってから下にスクロール
STEP
カラーの右をクリック
カラーの右をクリック
STEP
パレットで色を選択すると文字の背景色が変わる
パレットで色を選ぶと色が変わる
チョリー

文字の背景が白くなった♪

スポイト機能で色を変更する

色のスポイト機能

文字や背景の色を変更する時にとても便利なのがスポイト機能です。

Canvaに最初スポイトがなかったのですが、追加されました。

スポイトとは?>作っているデザインからスポイトで色を取ってくる機能

使い方は以下です。

STEP
文字を選択
背景の色を設定したい文字を選択
STEP
カラーの右側、四角のカラーBOXをクリック
カラーの右側、四角のカラーBOXをクリック

カラーパレットが表示されます。

カラーパレットが表示
STEP
「新しいカラーを追加」というところをクリック
「新しいカラーを追加」というところをクリック

※カーソルを合わせないと「新しいカラーを追加」という文字は出てきません。

STEP
「スポイトのマーク」をクリック
「スポイトのマーク」をクリック
STEP
写真にマウスを合わせるとデザインから色を選ぶことが出来る
写真にマウスを合わせるとデザインから色を選ぶことが出来る
STEP
色が決まったらエフェクトの中、空欄部分で一回クリック
写真にマウスを合わせるとデザインから色を選ぶことが出来る
STEP
元のエフェクト画面に戻れる
元のエフェクト画面に戻れる
ネコ

作っているデザインから色を選択できるスポイト機能って便利だね♪

文字エフェクトの背景を調整する

デザインに合わせて背景エフェクトの形や大きさ、透明度を調整していくことが出来ます。

背景の調整方法、以下をご紹介。

  • 透明度を出す
  • 角の形を調整
  • 背景の大きさを変える

順番に解説していきます。

透明度を出す

背景の透明度を調整することが出来ます!

全く透明度を出さないのも目立って良いですが、調整出来るのはとても便利。

透明度調整の方法は以下です。

STEP
透明度を調整したい文字を選択
背景に透明度を出したい文字を選択
STEP
透明度のバーを移動すると透明度数を変えることが出来る
よこぽよ

ここで透明度を調整出来るのは便利ですね(゚∀゚)

背景の丸みを調整する

文字背景にエフェクトを付けるとデフォルトでは少し丸みがある形になっています。

この丸みを全くなくし、四角にすることも出来ます。

背景の丸みを調整出来ることで、画像全体の印象がかなり変わるので使ってみると便利ですよ♪

調整方法は以下になります。

「丸み」バーで調整出来ます。

丸い形の文字背景にしたい時

丸い形の文字背景にしたい時
丸みを100にした状態
背景の角が丸い

角の丸みをなくした背景にしたい時

角の丸みをなくした背景にしたい時
丸みを0にした状態
角に丸みなし
背景の角の丸みなし
ネコ

丸み「0」のスタイルがすごく使える!

大きさを変える

文字背景の大きさを微調整することが出来ます。

文字背景スタイルのスプレッドというところで調整。

スプレッドで背景を広めに設定したり、小さくすることも出来て便利です♪

スプレッド調整方法は以下。

「スプレッド」バーで調整出来ます。

背景を大きめに見せたい時

背景を大きめに見せたい時
スプレッドを100にした状態

背景を小さくしたい時

背景を小さくしたい時
スプレッドを0にした状態

スプレッドの大きさを変えた比較

【スプレッドを100

【スプレッドを0

ちょっと今回はわかりやすい様に100か0かの極端な例をあげました。

大きさを変更するだけで結構見た目が変わる♪

文字エフェクト背景のデメリット

デメリットとしてはエフェクトをつけると文字自体の装飾エフェクトが出来なくなることです。

エフェクトを2つ付けることが出来る様になればよいですが、今は1つのエフェクトしか付けられない仕様。

文字背景も付けて、更に文字にも影付きなどのエフェクトを付けたい場合は背景に図形を使うことになります。

それか同じ文字を2つ作りそれぞれにエフェクトを付けて重ねる方法ならできますね!

ちょっと意味わからないかも知れないので解説します。

文字にエフェクト背景をつけた時

文字にエフェクト背景をつけた時
文字に『影付き』などのエフェクトはつけられない。

【図形の四角】の上に文字を重ねた時

四角の図形の上に文字を重ねた時
文字に「影付き」など別のエフェクトを付けることが出来る
文字に『影付き』のエフェクトをつけています。

ちなみに、下にある大きい透明の四角は【図形の四角】を使っています。

  1. 文字の下に【図形の四角】を置く
  2. 四角の【透明度】を下げる
  3. 【配置】で文字の下に四角を配置する

まとめ

文字2つ作りそれぞれエフェクト付けて重ねたパターン

エフェクト文字背景+エフェクト文字影付き

エフェクト文字背景
画像の内容「ウェブセールスコピーの法則」引用

Canvaの機能文字のエフェクト背景についてご紹介しました。

今回ご紹介した機能をまとめると以下です。

<文字と背景の色を変更する>

  • 文字の色
  • 背景の色

<色のスポイト機能>

  • 文字の色をスポイトで変える
  • 背景の色をスポイトで変える

<文字背景の調整>

  • 透明度を出す
  • 角の丸みを調整する
  • 大きさを変える

デザインをする際は写真やイラストの上に文字を載せることも多いと思います。

その場合は文字が目立たなることもあるのでとても便利な機能ですよね。

私もCanvaの『文字背景エフェクト機能』頻繁に使う様になりました(゚∀゚)

チョリー

参考になると嬉しいです。

よこぽよ

最後までお読みいただきありがとうございました。

Pro 無料体験30日

スポンサーリンク

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
クリックできる目次