みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Twitterカードに背景透過画像を設定する 🦜

f:id:kimizuka:20200707165022p:plain

ひょんなことから調べてみたのですが、ブラウザ版のツイッターでは背景透過の画像がTwitterカードに設定可能でした。(2020年7月7日現在)
裏に単色が敷かれることもなく、透過のまま表示されます。
つまりタイムラインの背景色と併せれば不可視にすることも可能なのです。圧縮されているときに微妙に色が変わっているのか、背景色そのままだと微妙に不可視にならないのと、hover時に微妙に不可視にならないので、もうちょっと研究しなければならないですが。

ただし、アプリ版は裏に単色が敷かれて透過しないので注意が必要です。(iPhoneアプリで確認)
ちなみにFacebookで背景透過画像をOG画像に設定すると裏に白を敷かれて表示されます。(2020年7月7日現在)

以下に、ブラウザ版のツイッターの各背景色に、背景透過画像をTwitterカードを設定した結果をまとめます。

デフォルト

通常時

f:id:kimizuka:20200707164744p:plain

hover時

f:id:kimizuka:20200707164757p:plain

スマホ版

f:id:kimizuka:20200707164819p:plain

ダークブルー

通常時

f:id:kimizuka:20200707164839p:plain

hover時

f:id:kimizuka:20200707164856p:plain

スマホ版

f:id:kimizuka:20200707164911p:plain

ブラック

通常時

f:id:kimizuka:20200707164924p:plain

hover時

f:id:kimizuka:20200707164937p:plain

スマホ版

f:id:kimizuka:20200707164956p:plain



この仕様を使えば、背景色に応じて別のコンテンツを表示できるかもしれない!と一瞬考えましたが、前述の通り、そもそもアプリ版だと裏に単色を敷かれるという仕様のため、頓挫しました。

f:id:kimizuka:20200707165327p:plain