Twitterのリンク用サムネをアイキャッチとは別に作成・設定したい

ずっとやりたいと思っていたんですが……twitterでURLを貼ったときに表示されるサムネをマ●ュマロとかn●teのデフォルトみたいな文字主体の画像にしたいという話。

今は書影の画像をアイキャッチに設定してそれがTwitterのサムネにもなるようにしてたんですが、感想記事はともかく、まとめ記事系は書影貼ってもインパクト薄くないですか…？個人的に記事タイトルをドカンと見せたほうが強い気がしてるんですが……。ブログのアクセス数を稼ぐことに関してそこまで強い執念はないのですが、まとめ記事って毎回無駄に時間がかかるので出来ればもう少しtwitterで引きを強くしたい。同人サイトのアクセスは諦めているけどこちらのアクセスはモチベのために一定数維持したい。人付き合いは苦手だけどそれはそれとして沢山RT・いいねが欲しい（自分に正直）ので出来ればツイッターに流れてきた時に「おっ」と言わせる感じにしたい。

【ステップ1】サムネ画像を作る

まずNoteやマシュマロがやってるんだからテンプレ画像に指定した文字を載せた画像を自動的に出力するシステムはおそらくある。そして多分Wordpressとかのプラグインとかもあるはず！！と検索してみたのですがみつからなかった。そもそもTwitterCardとかブログカードとかで検索するとブログ内でリンクにリンク先のサムネを拾って表示させるアレが出てくる。そうじゃない。PHPで画像に文字を載せること自体は出来るっぽいんですがやりかた知ってる人が居たらご一報下さい（絶対あるとおもうんだよな…！！！！！！！）

検索するとブログ更新をガチで頑張ってる人は１つ１つオシャレなサムネを作成して付けているようなのですが、とにかくこれ以上ブログ更新までの敷居を上げたくないのでPhotoshop等でサムネを１つ１つ作成する流れも遠慮したい。プラグインがない以上全自動での作成は難しそうだけど、せめてブラウザ内で完結させたい。

ここで思い浮かんだのがGoogle傘下の画像編集アプリ「Canva」に作成したテンプレート画像をアップし、文字の挿入位置などをざっくり決めて保存。それをテンプレートにして出力用の画像を作成・ダウンロードするという手段でした。土台は自分で適当にPhotoshopで800×418pxの画像を作成しました。


Canvaのテンプレートには「Twitter投稿用」という項目があるので、特にこだわりがなければこの辺から好きなテンプレを拾ってくると良いかとおもいます。（※「有料素材を含む」という記載のあるテンプレートは無料使用に制限がかかるので注意）


↑取りあえずこんな感じで作成完了！！（右下の本らしきなにかは自分で描いた）

【ステップ2】作ったサムネ画像をTwitterCardとして設定する

作成した画像を早速ブログ記事のアイキャッチに登録、TwitterCardに反映させてみる。文字が目立ってなかなか良い感じ……なんですが、アイキャッチが正方形サイズで固定されるブログの一覧ページでは見た目がとても残念な雰囲気に。サイト内のアイキャッチ、ほぼアイコンとしての使用なのでこっちはこれまで通りの書影がいいなあ……。



ここでカスタムフィールドに「twittercard」という要素を追加し、フィールドタイプを「画像」に設定（私は「Advanced Custom Fields」というプラグインでやってます）。このカスタムフィールドに要素が入っているときはTwitterCardのサムネを書き換えるように設定。Simplicity2では「header-twitter-card.php」「header-ogp.php」を編集すればOKでした。他のテーマだとheader.phpあたりにあるかも。

最後に、作成したカスタムフィールドの「手順」欄に作成したCanvaの編集リンクを載せる。


テンプレ右上の「共有」ボタンを押してメニューを出す→「リンクをコピー」か「テンプレートのリンク」をクリックして編集用のリンクを取得。「リンクをコピー」だとテンプレを直接編集、「テンプレートのリンク」だと最初に作ったテンプレを複製してそちらを編集する形。元テンプレを編集するのはなにかで事故った時にリスク高いな……と思ったのですがテンプレを無限に増やすのもなんか嫌だったのでテンプレを複製し、複製したテンプレを編集する形でリンクを作成しました。

完成！！