【新版】TwitterのヘッダーとアイコンをiPhoneで合わせる方法（2014年6月）

うろこ @_shortbread_

以前作ったまとめ togetter.com/li/486461 が、グーグル先生に「ヘッダー」「アイコン」って訊くとわりと上のほうに出るんですよね…。 今のPC版Twitterのデザインだとヘッダーとアイコンはがっつり重なってないから、この方法は今や無用のもの…。

うろこ @_shortbread_

ヘッダーとアイコンの絵柄を合わせて遊ぼうとしたとき、iPhoneのほうだけ考えればOKだから楽ちんになった！ということなのに、新デザイン用テンプレが検索しても見付けられない（探し方悪い？）…そんなこんなで、自分用に新しいテンプレ作ってみたので続きに載せます。

うろこ @_shortbread_

ここで言うiPhoneとは公式アプリ（Twitter for iPhone）とします。Safari等から見るモバイルWEBではアイコンとヘッダーはずれます…。 もろもろの説明は2014年6月現在のもので、Twitterアプリのバージョンは6.8（鳥がぐーんってなるやつ）です。

うろこ @_shortbread_

まずテンプレ → p.twipple.jp/niBVK ヘッダー画像の推奨サイズの1500×500です。 真ん中の濃い茶色がアイコンにする部分。クリーム色部分はiPhoneで見たときのヘッダーになります（外側の部分は表示されない）。

拡大

うろこ @_shortbread_

以下、ざっくりとやり方説明。 アイコンがいい感じになるよう元画像にテンプレを重ねる。薄茶色部分で切り抜いて1500×500のヘッダー画像を、濃い茶色の部分（164×164）を切り抜いてアイコン画像を作る。 twitpic.com/e733vv

拡大

うろこ @_shortbread_

作ったヘッダーとアイコンをアップロード。普通にPCからしても問題ないですが、アイコンはご親切に240×240に拡大した画像がアップされるようです。なので、アイコンをオリジナルサイズでアップしたいときはついっぷるを使ったりしました。

うろこ @_shortbread_

iPhoneで見るとこんな感じになってるはず。 twitpic.com/e734md

拡大

うろこ @_shortbread_

ちなみにPCでは…うん、おかしいことはない。と信じたい。 twitpic.com/e734o3

拡大