Twitterで自作ヘッダー画像の色が勝手に変わるときの対処法。原因は透過PNGかも?

いやぁ、びっくりした。まさか僕のTwitterページがこんな不気味に映っていたなんて。たしかにね。僕は美的センスがないのは認めるよ。でもね。さすがにこんな色合いは選ばないよ。かわいらしいひよこちゃんが、縦横無尽に飛び回ってる姿をイメージしたヘッダー画像。それが…ワーォ! お化けみたいになってる。゚(゚´Д`゚)゚。

なぜこんなことになってしまったのか、経緯と原因について勢いで書きます。はやく結論を言わんかい!って言われちゃいそうなので先に書くと、透過機能を使ったPNG画像をヘッダーにしていたのが原因です。

「なんだこの不気味なヘッダーは!」と不快に思っていた方、「こいつ、ついに病んだか?」と心配してくださった方など、もしいらっしゃったら申し訳ありませんでした。事故です。慌てて修正しましたので、見捨てないでください(´・ω・`)苦笑

では時系列に沿って書いていくね。

Twitterのヘッダー画像を変更した。

3日ほど前、ブログのテーマとヘッダー画像を変更したので、それにあわせてTwitterのヘッダー画像も修正した。フリーのペイントソフトでちゃちゃっと作って、画像ファイルとして書き出して完成。早速Twitterにアップロードしてヘッダー画像に設定。

でもね。その時点でちょっとおかしかったんだ。ペイントソフト上で見たときと、Twitterのヘッダー画像として見たときでは、色合いが大きく異なっていた。おかしいなぁとは思った。思ったけど、そこは適当さに定評があるゆとり隊長。なんとなく調整して、それっぽく見えるようになったからOKだと判断してた。最終的に設定した(つもりだった)画像がこれ。

異変に気づく。

Twitterのヘッダー画像を変更してから数日後の今日。偶然、表示がおかしくなってることに気づいた。自分のタイムライン上で、マウスを自分のアイコンの上に持っていくと、ポップアップがでるよね。そのときに表示される自分のヘッダー画像の背景色が、マイページで表示されるものと全然違っていることがわかった。そのときのキャプチャ画像がこれ。あれ、なんかオレンジ色がすこぶる薄い。

原因究明。

薄っすらと心当たりはあったけど、最初ははっきりとした原因はわからなかった。誰か優しい人がリアクションをくれることを微かに期待して、下記のようなツイートをした。

同時に自分でも状況把握を試みる。まずはTwitterからログアウトして自分のページを見てみた。するとあら不思議。正しい画像が表示された。

でも同じ端末だとキャッシュが残ってるとか、いろんなことが考えられるよね。そこでタブレットから見てみた。すると…まさかの水色!! オレンジ色ですらない!!! さらに残念なことにキャプチャ画像がない(´・ω・`)苦笑

一人あたふたしていたところで、心優しきお二人からの情報提供。ωさん、tarou.さん、ありがとうございました!

見え方が全然ち~~が~~うぅ~~!! tarou.さんのほうは僕と同じように見えてる。でもωさんの環境でみると、不気味すぎ。もう逆に笑える(笑)

原因は透過PNGでした。

ωさんがアップしてくれた画像をみて、しまったと思った。その時点では、Twitterのヘッダー画像にpng画像を使っていて、色の調整に「透過機能」を利用していたから。しかも前述したとおり、ペイントソフトと実際にアップしたときで見栄えが大きく異なっており、背景画像を思い切り透過させることで無理やり色を調整していた。

これが原因。透過率を相当高くしていたため、ユーザーごとに設定できるテーマの色ががっつり混ざってしまい、それぞれでまったく違う色に見えたようだ。もう一度最初に紹介した画像を載せておくね。

img_57fe42683daf6

img_57fe416e9a2bb

外的影響がなければ、上の画像のように見えるはずだった。それが僕の場合、Twitterのテーマ色をオレンジ色にしていたため、ヘッダー画像を透過してしまい、下の画像のように見えていたというわけだ。どんなに透過しても、色が薄くならないはずだ(苦笑)

img_57fe3d7fe4eed

さらにωさんの設定だと上図のように不気味な画像に映ってしまっていたし、僕のタブレットの設定だと全体が明るい水色になっていた。

解決策。

原因がわかれば解決策は簡単。png画像ではなく、jpg画像にしてからアップロードし直せばOK。jpg形式には透過機能はないため、色合いは保たれても、透過されることはなくなる。

ということで再度ペイントソフトで色合いを調整して、jpg形式で保存。そしてアップロード!!

ωさんの環境でも、ちゃんと表示されるとの返答あり。たびたびありがとうございました。ということで…無事解決!!

まとめ。

ブログなどの場合であれば、基本的に見え方はみんな同じなんだよね。だけどTwitterなどのSNSの場合、ユーザーごとに背景色などを設定できることがあり、png形式の透過機能を使うときには注意が必要

冷静に考えれば当たり前のことかもしれないけれど、今まで意識したことがなかった。心配なときは透過機能のないjpg(jpeg)形式でアップロードすると良いかもしれません。ということで、透過機能を本来の用途とは異なる目的で使ったがために起こったトラブルでした(´・ω・`)

みなさまもお気をつけください。以上、ゆとり隊長でした(๑•̀ㅂ•́)و✧

 


PAGE TOP