himawaripressのhimawariです。
当ブログも徐々に訪問者様が増えているようで非常に有難く思います。
以前、Canvaで簡単・無料に「はてなブログ」や「WordPress」のアイキャッチを作るといった
記事を掲載させて頂きました。
↓その時の記事はコチラになります。
この記事よりお問い合わせを頂いた件が有ります。
「文字の背景を塗りつぶしたいけど、どうしたらいいですか？」
と、いう内容でした。
確かに私himawariがこの記事で紹介したアイキャッチ画像もまた、
文字と背景画像の色が似通って見にくいものとなっていました。
今回の記事はこのお問い合わせに対応したものとなります。
下記の方におススメな内容となっています。
・Canvasで文字の背景色を変更したいけど分からない方。
・簡単、無料でHatenaブログやWordPressのアイキャッチ画像を作りたい方。
この記事を読むとCanvaで文字背景を塗りつぶしする事が出来るようになります。
そもそも、Canvaで文字背景を塗りつぶす事って出来たの？
見た事ないんだけど・・・。
himawariは無料でCanvaを活用しているよ。
今までアイキャッチを作り続けてきたけど、文字背景の塗りつぶし法は知らないよ。
出来ないのかもねぇ。
でも、この方法なら文字背景を塗りつぶしたものと同様の効果が出るんだ。
Contents
Canvaで文字背景を塗りつぶす方法
素材画像の入手
上で紹介させてもらった過去記事に記載していますが、
画像1200×630を用意します。
”WordPress”でも”はてなblog”でも同じです。
今回はこのイラスト画像を無料でPhoto ACさんよりダウンロードさせて頂きました。
Canvaに背景画像のアップロードとタイトル挿入
画像のアップロードとタイトルの挿入方は過去記事を参考にして頂けると幸いです。
早速、タイトル色を黒色で入れ込んでみました。
大変見にくいですね。
文字色を変更しても見難さに変化はありません。
これを改善したいというのが、今回お問い合わせ頂いた内容になります。
対応策
先ほども記載しましたが、Canvaでは文字背景を塗りつぶす手法が有りません。
調べたことは有りませんが、出来ないのではないでしょうか？
しかし対応策は有ります。
素材を使って文字の背景に挿入する。
手順
①Canva 編集画面のアイコンより丸印内の【素材】を選ぶ。
②線と図形項目より【□】を選択、画像に貼る。
③タイトルの大きさに合わせて図形を調整する。
④図形の塗りつぶし色を変更する。
はい。このような感じになります。
文字背景の塗りつぶしと同じ効果が出ているのではないでしょうか。
アイキャッチ画像背景が単調な風景ですと、これだけで問題ないかと思われます。
しかし、折角のイラストです。
このイラストも少し活かしたい所ですね。
背景画像を活かすには
私はよく運営する他のブログで次の手法を使います。
とっても簡単ですよ。
図形を選択して丸印の透明度をクリック。
文字背景用の図形の透明度を下げてみましょう。すると、こんな感じになります。
イラストの線が黒く太いので少しタイトル色の黒と混ざりますが、
これなら背景イラストも活かせているのではないでしょうか？
出来上がりです。
ほんとだ。
そのまま塗りつぶすだけだとイラストが勿体ないけど、
こんな感じになるなら良いね。
文字背景に使用できる背景は四角だけじゃないなよ。
丸を使用して楕円にしても面白いよ。
文字背景 塗りつぶし系 新機能 22.05.18 更新
Canvaの文字スタイル機能が追加され、同じ目的として使用する事が出来るようになりました。
早速、流れの紹介に入りましょう。
①テキストより適当な見出しを追加
②メニューよりエフェクトを選択。
③エフェクトのスタイルで”背景”を選択。
この機能が追加された用です。
他のエフェクトスタイルと混合は出来ません。
しかし、素材枠を使用することなく、文字背景に色を付ける事が可能になりました。
④スタイルを修飾する。
※普通に文字タイトルを入れると左右の文字数が異なり背景が凸凹になります。
行間を入れて枠を□にすると綺麗になります。
まとめ
今回のCanvaで文字背景を塗りつぶす方法はどうだったでしょうか？
意外に簡単に出来るものですよね。
アイキャッチ画像は人目に触れやすくなるばかりか、
”本格的なブログっぽくなる”という要素も持ち合わせています。
Canvaは無料で使用できるサイトですので是非ご活用ください。
最後まで読んで頂き有難うございました。
【Canva】無料で簡単にアイキャッチ画像【ブログ初心者必見】
Canva（キャンバ） ファイル削除の方法 【はてなブログ・WorPress アイキャッチ】
Canva 文字背景を塗りつぶしたい 時の対処法
【Canva】WordPress アイキャッチ 作り方 【簡単】
コメント