TwitterWEBの新しいデザイン。

ブログ関連の設定の日記を書くのは、いつのこと以来だろう（こなた）


2014/04/29 追記
　4/28-29 頃にかけて Twitter の仕様変更があり、1500x500 の
　ヘッダー画像の取り込み範囲が変わりました。
　ここで解説している、テンプレートの取り込み範囲の違いによる
　ヘッダーとプロフィールカードのお遊びは、できなくなりました。


Twitter を専用アプリでしか見てない人は気づかないと思いますけど、
最近、Twitter の profile ページデザインが新しくなる案内告知が出て、
いずれは変更しないとダメなんだろうな～・・・ということと、少し前にも
デザインが変更されて、profile ヘッダー画像とアイコンの相対位置が
ズレたから、どのみち修正をしないとダメだな～と、この機に更新です（ん））

新しい Twitter Profile ヘッダー画像は、推奨サイズ 1500x500 という
とても横長で、風景とか適当な写真を入れておくと良さそうな感じかな（＠まじ）
ただ、ヘッダー画像は色々と仕掛けができるので、このようにしました（＠ぐらさん）


とくに横長の素材を思いつかなかったので、羅針盤娘ちゃんにしといた（こなた）


ヘッダー画像を貼りかえるとタイムライン表示ページにある profilecard
という部分も同時に切り替わりますけど、なんと同一領域を使いません（＠ぎょ）
タイムライン左上にある横長バナーみたいなものが profilecard のところ（ん）b



ヘッダー画像は推奨サイズ 1500x500 で、それを upload してますけど、
なんと上部の青い横長エリアも 1500x500 のサイズではなく、その中を
くりぬいた格好で、タイムライン左上の profilecard に使われるのでした（＠あれ）



Twitter WEB の新しいヘッダー画像が、各ページで利用される範囲は、
1500x500 の画像を表示位置（初期値＝最大範囲を利用）にしたとき、
だいたい、このような状態になり、オリジナル画像が少し縮小されます（＠まじ）


1500x500 の画像を upload して、表示位置が初期値だと・・・
　・およそ 85% くらいのサイズに縮小される
　・真ん中の薄い青の範囲がタイムライン左上の画像に使われる
　・ピンク色の範囲がヘッダー画像としていつも見えている
　・黄色い範囲はウインドウのサイズで見えたり見えなかったりする
　・上下の濃い青の範囲はいつも見えない
　　　ウインドウサイズを変更してヘッダー画像のサイズが変わると、
　　　ブラウザ側のリサイズ処理の都合で一瞬だけ見えたりもする
　・jpg だと再圧縮するみたいで、ちょっと劣化が激しい
　　　pngは劣化しないみたいだけど表示が遅く GIF は試してない（＠気まずい）

色分けしたヘッダー画像は、テンプレートとして使えるかもしれないので、
フルサイズが保存できるように yfrog に置いておきました・・・ yfrog 便利（＠にこ）
　→　http://a.yfrog.com/img197/8826/un5r.jpg
　2014/04/29 仕様変更に伴いリンク削除


この 1500x500 のテンプレートみたいなものを、更新したヘッダー画像に
重ねてみると、このようになるのですね～、タイムラインの画像とヘッダー
画像の file はおなじでも、使われる範囲が違うことを利用してお遊びです（ん）b


ま～でも専用アプリで見てる人は関係ないだろうし、タイムライン左上の
profilecard はアカウントの持ち主にしか見えなくて、プロフィール画面で
フォローとフォロワーを選んだときにバナーっぽく見えるだけ・・・、アプリの
作り方によるかもしれないし、ヘッダー画像が見えるアプリもあるのかな（こなた）

タグ：ブログ Twitter