Cloudinary 画像に l_text で載せるテキストの改行方法

Cloudinary で画像の上に l_text で載せるテキストを改行する方法をご紹介します。

背景 画像に載せるテキストを改行したい

Cloudinary で OGP 画像を動的生成する方法 の記事の通り、OGP 画像にテキストを載せるときに文字数が多いので改行する方法を調べた結果が本記事です。

Cloudinary で改行文字 %0A を使う

Cloudinary で画像に載せるテキスト部分の改行させたい箇所に、改行文字 %0A を入れることで改行できます。

https://res.cloudinary.com/codenote-net/image/upload/l_text:Sawarabi%20Gothic_160_bold:12345%0A67890,co_rgb:242424,w_1000,c_fit,f_auto,q_auto/v1599311015/CodeNote-OGP.png

Cloudinary で自動改行

Cloudinary でテキストを自動で改行するには c_fit と w, h パラメータを使います。

  • w 指定した width を超える場合に、自動で折り返す
  • h 指定した height を超える場合には … で省略する
https://res.cloudinary.com/codenote-net/image/upload/l_text:Sawarabi%20Gothic_150_bold:%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A%E3%81%8B%E3%81%8D%E3%81%8F%E3%81%91%E3%81%93%E3%81%95%E3%81%97%E3%81%99%E3%81%9B%E3%81%9D,co_rgb:242424,w_1000,c_fit,f_auto,q_auto/v1599311015/CodeNote-OGP.png

以上、Cloudinary で画像に載せたテキストを良い感じに改行したい、現場からお送りしました。

関連記事