現在アイキャッチ記事なのに自作しすぎてフリー画像のダウンロード制限にかかってアイキャッチが作れない状態です
追記:無事解決し作りました
アイキャッチ加工を自作したほうがいいよ~と教えてもらって最初はパワーポイントってやつを見てたのですが、どうもいつも使ってるCanvaでも出来そうな感じだったんでこっちでやってみることにしました
ブログを始めてみたけどアイキャッチは使ってない
アイキャッチは使っているけど帯や文字は入れてない
帯の入れ方やぼかし方など面倒じゃない?
今日はそんな方に無料のCanvaを使ってフリー画像に帯や文字を入れる方法を解説したいと思います。慣れると簡単です!
登録してサイトにいくとまず最初にこのような画面になります。各種テンプレートが用意されているのでテンプレに文字を書くなら探してみるといいと思います
今回はフリー画像からなので、どこでもいいんで適当にFacebookの投稿を選んでやってみます
左側にアップロードというのがありますが特に選択する必要は無く、アップする時はテンプレートの画像が並んでるところにアップしたい画像をドロップするだけで簡単にアップロードされます
アップしたものをクリックします
ここで適当に引っ張って大きくしてもいいんですが
私の場合は一旦左の端に画像をくっつけてそこから右上に伸ばしてます
やり方は画像にマウスカーソルを合せると十字矢印になるので、その状態でドラッグして左に寄せるだけですね
カチッとはまる感じでくっつくので分かりやすいです。適当に伸ばして次は帯を入れます
一番左に並んでいる素材を押して四角ぽいやつを選びます
角は丸くなっていても横にメイン画像より長く伸ばすので問題ありません
見つからなければ検索窓で四角とかいれると出ると思います。注意点として似たような形でも横に伸ばせないものとかあるようなので帯が伸びないようなら素材を変更してみてください
クリックするとこんな感じで出てきます。複数押してしまったなど戻りたい場合は左上の矢印が曲がったようなマークを押せばokです(ctrl+zでも戻れるみたいです)
帯の高さと幅を調整します。四角部分をクリックすると上下左右伸ばせるので好きな数字にします
細かい数字があわせにくい!といった場合は右下の50%となっているところを100%とか125%に大きくすれば調整しやすくなるぽいです
ここの%が小さいと微調整がやたら難しくて、気づくまでかなりの時間使ってしまいました
横幅は画像をオーバーするように長く設定し帯をクリックした状態の時なら
右上にコピー、配置、透明度アイコンが並ぶので配置の右の透明度アイコンをクリックして調整します。今回はコピーの←側のカラーを黒にして透明度は60%にしてみました
画像をぼかしたい場合は変更したい画像をクリックして左上の調整からやるようです
ぼかしの数値や明るさなどを調整して好きな画像に仕上げてみてください
ちなみに今回は使いません
色を変えたい場合は画像をクリックします。すると左上にカラーという場所が表示されるのでカラーを押してデフォルトから選べば色が変えれます
細かい色を設定したい場合は+マークでデフォルト以外の色も設定できます。今回は青っぽくしてみました
作成する画像が1つだけだったらいいんですが、複数作る場合に帯の高さが全く合わないとかよくあって、毎回同じくらいの位置に帯入れるのにどうやればいいか試行錯誤してました
思いついたのが他の画像を使って測ればいいのかも!ということで、もう1個別の四角ぽい素材を用意します。それの高さ(h)を決めて画像の一番下に当てる感じです(画像によっては一定数以上小さくならないのもあるので素材を変えてみてください)
新しく作った素材の高さの数値(h:180とか)を覚えておけば毎回同じように作れると思います。序盤に作ったのが微妙にずれてるんですが素材が残ってなくて直せず仕方ないのでそのままにしときます。もっといい方法が他に方法あったらすみませんw
こんな感じで帯をくっつけて、いらなくなった素材はクリックして十字矢印になったらドラッグして下のほうにでもおいておけばokです
次に文字をいれていきます
一番左のテキストから適当に選びます
フォントや大きさ等あとで変えれるので今回は文字数の少ないやつを重視して選択してみます(いらない文字は消さないとダメな為)
違う大きさの文字を入れたいとかなら、また別のテキストを重ねればいけます
最初は文字が消えたりして焦るんですがうまくクリックできれば表示されます
あと移動させるときの十字矢印も最初はどこらにあわせたら出るのか分からないので、表示させるのが難しいですがやっていけば慣れます
最初はこんな感じになります
文字部分をクリックすると現在のフォントが左上に表示されているので、それを変えてみます
Source Han SerifJP Boldというのを選んでみました
こんな感じになります。パパとママよりのところは必要ないので消して文字を入れていきます
左上のフォントの右にサイズが表示されてるのでいい感じの大きさにして
四隅の〇を引っ張って幅を調整と十字矢印を出して全体の位置を合わせます
ちなみにドロップリストからのフォントサイズ調整の数値は一定数刻みなんですが、自分で数値を打ち込めばリストにない大きさにする事も可能です
文字の色も変えてみます。クリックしてサイズの右側にテキストの色というのがあるので選択して変更。さらに改行し2行目も書いていきます
これでcanvaの加工は終わりです。どうでしょう。完全に釣りぽいですが少し気になるアイキャッチになったと思いますw
ちなみに四隅の〇は他のところをクリックすれば消えるので問題ありません
あとは右上のダウンロードマークからダウンロードします。私はいつもJPGを選択してます
いらない所を切り取ってアップすれば終わりなんですがワードプレスでトリミングをすると、アイキャッチと文字の幅が出来てしまって何故かうまく行かなかったんで別でやってます
どこでもいいんですが私はiLoveIMGって所で切り抜きやサイズ変更をしてます
ここでのポイントは左側で調整するんじゃなく、右側の数値を入れるところに幅、高さを先にいれてから左側にいって十字矢印で全体を動かして位置を決めて最後の微調整を右側のY位置でやる感じです
変更したものをワードプレス等にアップすれば完成です。サイズが大きすぎるとエラーになったりするので画像サイズ変更などをうまく使ってみてください
最初めちゃくちゃ時間かかってやばかったですが、さすがに徐々に慣れてきて最後は5分ちょいで出来るようになりました

複数加工する場合
加工画像のすぐ下に+新しいページを追加というのがあるのでそれをクリックし
上にスクロールして戻って削除を押せば毎回複数ダウンロードするのを避けることができます
既にアップロードした画像も画像の右上にアイコンがあるので削除すればCanva側の容量がいっぱいになることもないかと思います
最後に
ワードプレスでサイズ変更してそのまま使うとうまく幅が合わないのに
一旦デスクトップに出して名前を変更して戻してやるとサイズが揃ったり
まだよく分かってない事も多いですがある程度できるようにはなりました
最初は慣れないですが数こなせばそのうち早くできるようになります
自作アイキャッチのほうがクリックされる確率は高くなると思うのでやってみてもいいかもしれませんね