10周年のSPコンテンツ!

【今は無理?】TwitterのヘッダーとアイコンをPCとiPhoneの両方で合わせる方法

PCで見てもiPhoneで見てもTwitterのヘッダーとアイコンの絵柄を合わせる方法覚書。 iPhoneと言いつつ、ここではモバイルWEBではなく公式アプリを指してます。 ☆☆2014/06/28追記☆☆ こちらの方法が無用のものになっているのが気になったので、新しいテンプレ作りました。 → http://togetter.com/li/685819
6

★★2014/06/28追記
PC版Twitterが新デザインになって以降の、iPhoneでヘッダーとアイコンを合わせる方法は新しく作った下記まとめをご覧いただくのがいいかと思います。

ツイートまとめ 【新版】TwitterのヘッダーとアイコンをiPhoneで合わせる方法(2014年6月) iPhoneでTwitterのヘッダーとアイコンの絵柄を合わせる方法覚書。 2014年5月末にPC版Twitterが新デザインになって以降の見た目に合わせたバージョンです。 11428 pv 6 1 user 1

★★2013/09/09追記
アニメGIFファイルはアイコンに設定できなくなってしまったようです(ついっぷるからも不可)。そのため、現在このまとめの方法は使えませんm(_ _)m

うろこ @_shortbread_
先日こちらのサイトを見てTwitterのヘッダーとアイコンの絵を合わせるというのをやってみた。 http://t.co/rZZhQ5WCPe でもiPhone等で見ると、こちらでも言及されてるけど、ヘッダーとアイコンがずれるんですよね。
うろこ @_shortbread_
PCで見てもiPhoneで見てもヘッダーとアイコンの絵柄を合わせる方法が何かないかなーと考えてたときに、アイコンをGIFアニメにする方法を思い付きました。試してみるとうまくいったので、メモ書きしておこうと思います。
うろこ @_shortbread_
ここで言うiPhoneとは公式アプリとします。iPhoneのSafari等から見るモバイルWEBではやっぱりアイコンとヘッダーはずれます(理由は後述)。 もろもろの説明は2013年4月現在のものです。iPhone公式アプリのバージョンは5.5です。
うろこ @_shortbread_
使ったソフトはPhotoShop Elements9です。 テンプレのようなものを作ってみました。ピンクのところがPCで、緑がiPhoneでアイコン表示される部分です。 http://t.co/YCaPn0pGB2
拡大

★2013/05/02修正↓

うろこ @_shortbread_
PC用のアイコンサイズと位置を修正しました。 修正版のテンプレはこちら→ http://t.co/XaF8mDCc9U オレンジ部分(176×176)がPC用のアイコンとして表示される部分になります。
うろこ @_shortbread_
【1.ヘッダーを用意】 ヘッダーにしたい元画像にテンプレを重ねる。アイコンがいい感じになるように調整しつつ、公式の推奨サイズに合わせて1252×626の画像を作って保存する。 http://t.co/eunptgV4UR
拡大
うろこ @_shortbread_
【2.アイコン切り出し】 ピンクの部分(180×180)を切り抜いてPC用のアイコン画像を作る。 iPhone用のアイコン画像は緑の部分(234×234)の画像を切り抜き、PC用アイコンのサイズに合わせて180×180に解像度を下げたものを用意。

上記は修正版テンプレを使った場合、下のようになります。
【2.アイコン切り出し】
オレンジの部分(176×176)を切り抜いてPC用のアイコン画像を作る。
iPhone用のアイコン画像は緑の部分(234×234)の画像を切り抜き、PC用アイコンのサイズに合わせて176×176に解像度を下げたものを用意。

うろこ @_shortbread_
【3.アイコンをGIFアニメ化】 1フレーム目にiPhone用、2フレーム目にPC用のアイコン画像をセット。フレームの表示時間をごく短く(私の場合0.1秒)する。ループ(繰り返し再生)を忘れずにオフにする。アニメーションGIFファイル形式で保存。
うろこ @_shortbread_
【4.ヘッダーとアイコンをアップロード】 GIFアニメファイルはTwitter本家からはアップ不可なようなので、私はPC版のついっぷるからアップしました。ヘッダーは普通にPC版の公式Webからアップ。
うろこ @_shortbread_
【5.表示を確認】 うまくアップできていれば、PCで見た場合一瞬だけiPhone用のアイコンが表示された後でPC用のアイコンになる…はず。 http://t.co/e4385A9GLv
拡大
うろこ @_shortbread_
iPhone公式アプリで見た場合は普通にiPhone用アイコンを表示します。 http://t.co/m7dTLulG7c
拡大
うろこ @_shortbread_
【注意点】 ・アイコンはGIFファイルなので256色しか使えません。カラフルな画像は粗が目立つかも。 ・ついっぷるからアップしてもGIFアニメファイルをアップできない(強制的に静止画のGIFにされる)場合がある気がする…できるアカウントとそうでないアカウントがある??
うろこ @_shortbread_
【そもそもどういう理屈か?】 GIFアニメはPCのブラウザではきちんと再生されます。一方iPhone公式アプリではアニメ表示にはならず、1フレーム目が普通の静止画として表示されます。
うろこ @_shortbread_
また、GIFアニメはずーっとちらちら動いているものというイメージがあるかもですが、アニメの再生を一回きりに設定することもできます。その場合、アニメ表示が最終フレームまで来ると1フレーム目に戻らずそのままで静止します。 これらのことを利用しています。
うろこ @_shortbread_
GIFアニメアイコンはPCで見た場合、アニメ再生されてiPhone用アイコンからPC用アイコンへ表示が切り替わって止まります。再読み込み等をしない限りそのままです。iPhoneの公式アプリで見た場合はアニメにならず1フレーム目のiPhone用アイコンを表示したまま動きません。
うろこ @_shortbread_
モバイルWEBはGIFアニメをアニメーション再生するためPC用のアイコンが表示されます。その結果アイコンはヘッダーとずれます。 なお、今回はうまくいったこの方法も、Twitterの仕様変更等でいつ使えなくなるか分かりません(^_^;)

★★2013/07/10追記

うろこ @_shortbread_
先日、ついっぷるからもGIFアニメのアイコンをアップできなくなった!?と焦ったのですが、いろいろ試したところ、ファイルサイズがだいたい10KB以下ならアップできるみたいです。
うろこ @_shortbread_
具体的に言うと、9.51KBのはOKで9.62KBのはアップできませんでした。境目どこー??(^O^;)
うろこ @_shortbread_
このまとめの方法でアイコン作ったら、10KB以下のアニメGIFファイルになんてまずならないと思うので、無理矢理サイズを小さく作る方法をメモっておきます。 私の場合、以下の方法でなんとかついっぷるからアップ可能なアニメGIFアイコンができました。 …画質は気にしない方向で。
うろこ @_shortbread_
【1】アイコンの縦横サイズを半分にする。 そのためには、ヘッダー画像からアイコン用の画像を切り出す際に PC用:オレンジの部分(176×176)を切り抜き、解像度を88×88にする。 iPhone用:緑の部分(234×234)を切り抜き、PC用と同様に解像度を88×88に下げる。
残りを読む(3)

コメント

コメントがまだありません。感想を最初に伝えてみませんか?

ログインして広告を非表示にする
ログインして広告を非表示にする