イントロダクション
Twitter では、ツイートするコメントに画像を追加することができます。ツイートに画像を追加した例：
ブログの文字に影をつけたい!条件を設定すれば簡単に影付き文字を作れる「CSS3 Text Shadow Generator」が便利！- Dr.ウーパのコンピュータ備忘録 http://t.co/WBk9bHBnle @hiyokoXP pic.twitter.com/Knml9wbi7N
— module_hiyoko_xp (@hiyokoXP) 2015, 2月 18
ツイートに画像を追加すると、タイムライン上に画像が表示されるため、ツイートしたメッセージを目立たせることができます。
そのため、追加したい画像がある場合には、よく画像を追加してツイートしています。
さて、そのようにツイートに画像を追加していたら、遭遇した出来事がありました。
それは、
背景が透明の画像をツイートに追加して投稿したら、真っ黒になった
という出来事です。
Twitterに背景透明の画像を投稿したら、とんでもないことになった!! - 真っ黒である
そのときに、Twitter のツイートに追加した画像はこちらです。
 |
| Twitter のツイートに追加した画像 これが後に、真っ黒になる |
この画像は、透過（透明）色が有効である png 形式の画像です。
そのため、この画像は背景が白色のように見えていますが、このブログの本文の背景色が白であるため、白く見えているだけです。
画像の背景を白く塗ることもできますが、あえて塗らずに透過（透明）色を背景としました。
その画像を追加したツイートを、タイムラインに投下した時の様子が次の画像です。
 |
| 背景を透過色とした画像を追加したツイート タイムラインでは普通に見えている |
このように、タイムラインで見る分には、いたって正常に画像が見えています。
さて、Twitter では、タイムライン上の画像をクリックすると、拡大して表示することができます。
そこで、上記のツイートに追加した画像を拡大してみましょう。
 |
| 背景を透過色とした画像を追加したツイートを拡大 真っ黒である |
なんということでしょう。
白く見えていた背景が黒くなり、画像全体が真っ黒になっています!!
追加した画像が真っ黒になりすぎて、何が何だか分かりません。
これは、Twitter （ブラウザ版）で画像を拡大すると、その画像の背景に「黒い」要素が配置されているためだと思われます。
そのため、画像の透明部分が真っ黒になっています。
なお、この現象を確認した時に投稿したのは、このツイートです。
埋め込みツイート：
USBケーブルが短すぎて、スマートフォン・タブレットを充電しながら使いづらい！そんな時はUSB延長ケーブルを使おう！ - Dr.ウーパのコンピュータ備忘録 http://t.co/hvq9FxTt5V @hiyokoXPさんから pic.twitter.com/3cOBm7RpdB
— module_hiyoko_xp (@hiyokoXP) 2015, 3月 1
これを活用すると、面白いことができるかも？
でも、この仕組み、上手く利用すると面白いことが出来るかもしれません。例えば、透明の背景の上に、白色で文字を書いた場合には、普通は見えないのに、Twitter のタイムライン上の画像をクリックして拡大表示した場合のみ、その白い文字が見えるといったギミックを作れそうです。
 |
| 例えばこの画像 透明背景に、白文字です。 |
その画像を追加してツイートしたものを、以下の埋め込みツイートで示します。
埋め込みツイート：
Twitterに背景透明の画像を投稿したら、とんでもないことになった!! - 真っ黒である - Dr.ウーパのコンピュータ備忘録 http://t.co/AjfwpZXP9Z @hiyokoXPさんから pic.twitter.com/tyftgD2hy7
— module_hiyoko_xp (@hiyokoXP) 2015, 3月 1
埋め込みツイート上では、透明背景の上の白文字が見えていますが、ブラウザ版 Twitter のタイムラインで見ると、画像部分が真っ白に見えます。
とはいえ、あくまでブラウザ版 Twitter のタイムライン上の画像を拡大した時の背景色を利用したものなので、モバイル版などを含めたすべての環境でこのようなことが出来るのかは、別途検証が必要です。
また、今後の Twitter の仕様変更によっては、できなくなるかもしれません。
まとめ
このような現象があるため、背景が透明の画像を使う場合には、注意が必要です。でも、この仕組みを使えば、面白いこともできるかもしれませんね。
コメントを投稿 （ここをクリックしてコメント投稿フォームを表示）
コメント投稿機能について