記事のアイキャッチ画像と一覧のサムネイル&Twitter Cardの画像をCanvaで見切れないように作成しました。

f:id:nukonano:20210906125739j:plain

ブログを表示すると綺麗に見えるけど

TwitterCardにすると見切れる件の調整を行いました。

 

  • このブログで分かる事。

アイキャッチ画像が見切れないようにTwitterCardをCanvaで調整。

  • 記事内の画像
  • 記事一覧のサムネイル画像
  • Twitterのリンク画像(TwitterCard)
  • Youtubeのアイキャッチ画像

これを全て綺麗に見えるようにCanvaで統一しました。

f:id:nukonano:20210906035435j:plain

これはゲームブログで書いている、ペルソナ2罪のプレイ日記のアイキャッチ画像。

これを記事のサムネイル画像で表示させると

f:id:nukonano:20210906035650j:plain

左下の2021 0903の文字が見切れてしまってるんですよね

左右は見切れて無いんですが...

これをTwitterに送信した際にリンク画像として貼り付けると

f:id:nukonano:20210906035955j:plain

ペルソナ2の文字と左下の日付両方が半分ぐらい切れてしまって見栄えが悪いので

全ての規格に合うように記事中の画像自体を修正しました。

Canvaでアスペクトを調整。

f:id:nukonano:20210906054140j:plain

1時間30分程、チェックと微調整を重ね。

このような感じになりました!!

アイキャッチ画像も完璧ですねヾ(*´∀`*)ノ見切れてない!!

全てを中央に寄せなくても良かったのですが(地獄のミサワのように)

f:id:nukonano:20210906083702j:plain

 

カテゴリーで並べた際に正方形になるので

それにも対応させようと思い、中央配置になっております。

解像度は1600x1000で作ってしまったので、再度解像度を変更し、1600x900(16:9)で生成し直しました。

16:9で作らないと、Youtubeのサムネイルに黒帯が出来てしまうので。

そして完成したのが、こちら!!

f:id:nukonano:20210906124356j:plain

  • 記事内の画像
  • 記事一覧のサムネイル画像
  • Twitterのリンク画像(TwitterCard)
  • Youtubeのアイキャッチ画像

これら4つの全てに対応した画像が出来ました。

canvaで上下の文字間隔にさえ気をつければ、基本対応可能です。

今思ったけど、1920x1080でサムネイル作った方が良かったかな?(゜-゜)...

でも無駄にページ重くなるのでいいか...