「tokusetsu 2」を使った時、宣伝tweetのサムネイルがおかしくなる問題の解決方法

煽りタイトルと見せかけてtumblrで特設ページ作ってる人向け解決方法の記事です。
御機嫌よう、蟻坂(@4risaka)です。

twitterカードのサムネイルが意味不明だよ！

tumblrの「tokusetsu」という特設ページ特化のテンプレートを利用して
同人音楽の特設ページを作成されている方も多いかと思います。

で、ですね。twitterで特設ページの宣伝をするのは別にいいんですけど、
tweetにくっついているこれは一体なんですか意味がわかりません。※画像はPhotoshopで適当にでっちあげたものです

しかもこんなんなっちゃってる人、一人や二人じゃなくてすっごいいっぱい居るんですけど、
視覚で最初に判断されるtwitterの宣伝において、見た目が残念なのは意味をなしません。

気になったのが、tokusetsuクラスの素晴らしいテンプレートで
なんでこんなふうになっちゃうんだろう？という素朴な疑問です。これくらい自動でやってくれそうなもんなのですが。

というわけで、調査・確認をして以下に直し方を示しましたので、
クールなサムネイルを掲載して効果を上げましょう。

原因と対処

技術的な詳細は省きますが、twitterカードという
tweetに連携してサムネイルを自動生成するtwitterの機能に非対応と思われる部分があります。
というわけで、これについて簡単に説明した後、直し方を解説します。

変なサムネイルになっている原因

twitterにサムネイルを出すには、HTML上に特殊なコードを入れる必要があり、
これはtwitterのページで解説がされています。

Twitterカード | Twitter Developers

で、tokusetsuは既にこの処理がほとんど既にできていて、何もしなくていいはずなのですが、
Twitter対応だけなぜか適用されないことがわかったので、こいつを補完して対応させます。

現状、Card Validatorを開いて
あなたのtumblrページのURLを入力すると、以下のように出てきてしまうはずです。

うーん、おかしいですね。直しましょう。

解決方法

「tokusetsu」テンプレートが適用されている前提でお話します。

まず、tumblrのテーマ編集画面から、「HTMLを編集」を選択して
ソースを編集できる状態にします(以下の画像はもう対応しちゃってますので適当に流して下さい)。

次に、126行目あたりの

の下辺りに、以下のコードをコピー&ペーストしてください。

【追記 2016.4.26】
まさかのミスがあったのでご指摘頂きました。ありがとうございます。
8行目のcontentは{image:Main Image}ではなく{image:Jacket}が適切です(下記は修正済)。
もしコピペもうしちゃったよ！という方がいらっしゃいましたら、お手数ですが修正ください。

これで対応完了です。

tokusetsuの強力な機能によって、サムネイル=ジャケット画像や
ページのタイトル、説明などはテーマ編集から入力しておくと既に適用されているはずです。

実際に適用されていることを、Card Validatorで確認してみましょう。

できてますね。よしよし。

というわけで、あなたの特設ページがtwitterで宣伝した時にかっこよく見栄えするようになりました。

まとめ

tokusetsuは非常に完成度の高いテンプレートであり、
同人作家が誰でもかっこいい特設ページを一瞬で作製できるという点で、
非常に創造性や公平性、広告性が高いです。これを利用しない手はありません。

が、なぜか肝心のtwitter宣伝でコケるみたいなので、MITライセンスに基いて勝手に解消しました。
metaタグにtwitterカード用の各種が抜けているっぽいので、
これについて、GitHubのなんでしたっけ、修正のリクエストをしなきゃですね。

え、M3春の開催秒読みの段階になってから言うなって？気づいたのが２２日(金)なんです。

 - 創作, 方法論 tokusetsu 2, tumblr, twitterカード, 特設ページ