画像に動的に文字を入れられるCloudinaryの使い方

Cloudinaryの使い方

くるみ

画像に文字を入れてくれるサービスとかないのかね
ということで今回は

  • URLで指定するだけで画像に文字を入れたい
  • ページごとに入れる文字を変えてOGP画像を生成したい

という方に向けて、画像に動的に文字を入れられる「Cloudinaryの使い方」をまとめました。

そもそもCloudinaryってなに?

Cloudinary

Cloudinaryというのはクラウドで画像を管理してくれるサービスです。

画像をアップロードしてURLを取得、そのURLをいじる(入れたい文字云々を入れる)だけでその画像を変換してくれる優れもの。

画像に動的に文字を入れられるCloudinaryの使い方

会員登録

Cloudinaryを利用するには会員登録が必要になります。

短時間で終わるのでサクッとやっちゃいましょう。

画像アップしてURLを取得

step1
画像のアイコンをクリックする

画像のアイコンをクリックする

会員登録が済んだら、画面上部のアイコンをクリックします。
step2
変換したい画像をアップロードする

変換したい画像をアップロードする

そうしたらこのような画面に遷移するので、ここに変換したい画像をドラッグ&ドロップします。
step3
アップロードした画像を確認

アップロードした画像を確認

無事画像をアップロードできましたね。
step4
画像のURLをコピーする

画像のURLをコピーする

その画像をクリックし、右側にあるURLをコピーします
step5
タイトル1
すると以下のようなURLが取得できるはずです。

https://res.cloudinary.com/dhyv1iouw/image/upload/v114514/ogp_image_ezngm1.png

文字を入れよう

次に、先ほど取得したURLをいじり画像を変換していきます。

https://res.cloudinary.com/dhyv1iouw/image/upload/ここをいじるよ/v114514/ogp_image_ezngm1.png

上の「ここをいじるよ」というところに入れたい文字を挿入すればOK。

その際に、ただ文字を入れるのではなく、フォントやフォントサイズを指定してあげる必要があります。

l_text:Sawarabi%20Gothic_60_bold:"入れたい文字"

こんな感じで指定してあげる必要があります。上の例だと「Sawarabi Gothicというフォントでサイズは60、太めの文字でお願いします」とお願いしています。

https://res.cloudinary.com/dhyv1iouw/image/upload/l_text:Sawarabi%20Gothic_60_bold:ソロモンちゃんは世界一/v114514/ogp_image_ezngm1.png

実際にURLをいじってとんでみると…

Cloudinaryで画像を変換した結果

しっかりと文字が入ってますね。

しゃんなろー!

くるみ

ちなみに、複数の文を入れたいときは「/」で区切って指定してあげます。

https://res.cloudinary.com/dhyv1iouw/image/upload/l_text:Sawarabi%20Gothic_60_bold:ソロモンちゃんは世界一/l_text:Sawarabi%20Gothic_60_bold:ソロモンちゃんは銀河一,y_100/v114514/ogp_image_ezngm1.png

Cloudinaryで画像を変換した結果

「y_100」は画像のY座標をずらしているものになります。
文の後に「,」を入れることによって、色や幅など様々な値を指定をすることもできますよ。

詳しくは以下の記事が参考になります。

参考 Cloudinaryの画像変換パラメータまとめ 〜 リサイズと最適化Developers.IO

まとめ

以上、Cloudinaryを使って画像を変換・文字を入れる方法でした。

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

コメントを残す

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。