くるみ
画像に文字を入れてくれるサービスとかないのかね
- URLで指定するだけで画像に文字を入れたい
- ページごとに入れる文字を変えてOGP画像を生成したい
という方に向けて、画像に動的に文字を入れられる「Cloudinaryの使い方」をまとめました。
そもそもCloudinaryってなに？
Cloudinaryというのはクラウドで画像を管理してくれるサービスです。
画像をアップロードしてURLを取得、そのURLをいじる(入れたい文字云々を入れる)だけでその画像を変換してくれる優れもの。
画像に動的に文字を入れられるCloudinaryの使い方
会員登録
Cloudinaryを利用するには会員登録が必要になります。
短時間で終わるのでサクッとやっちゃいましょう。
画像アップしてURLを取得
step1
画像のアイコンをクリックする
会員登録が済んだら、画面上部のアイコンをクリックします。
step2
変換したい画像をアップロードする
そうしたらこのような画面に遷移するので、ここに変換したい画像をドラッグ&ドロップします。
step3
アップロードした画像を確認
無事画像をアップロードできましたね。
step4
画像の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をいじってとんでみると…
しっかりと文字が入ってますね。
しゃんなろー!
くるみ
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
「y_100」は画像のY座標をずらしているものになります。
文の後に「,」を入れることによって、色や幅など様々な値を指定をすることもできますよ。
詳しくは以下の記事が参考になります。
参考 Cloudinaryの画像変換パラメータまとめ 〜 リサイズと最適化Developers.IOまとめ
参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
