2012年 4月26日をもって、Facebookページのプロフィール写真の大きさが変わります。 | 株式会社ISSUN(イッスン)

2012年 4月26日をもって、Facebookページのプロフィール写真の大きさが変わります。

目次

2012/04/27 10:30 追記
日本時間の 2012/04/27 10:00am 正式に変更されました。修正に必要な情報テンプレートをこちらに記述しましたので、参照下さい→[※詳細]

今週も、Facebookページ週間ハイライト がfacebookから送られてきました。

そのメールの冒頭には、

4月26日をもって、Facebookページのプロフィール写真の大きさが変わります。
必要に応じて、変更当日に現在のプロフィール写真の更新をお願いします。新しいサイズは160 x 160ピクセルで、ページ左側から左23ピクセル、ページ上部から210ピクセルの位置に配置されます。

と書かれていました。

2012-04-19_0542

■これだけでは、仕様が微妙でやや不明瞭。対策は慎重に。

3/31に、facebookページもタイムライン化されたばかりなのに、これはまた微妙な仕様変更です。

というのも、カバー写真とプロフィール写真をセットでデザインされているようなページのご担当者さんにとって、今回は、単純な仕様変更ではないのです。

どういうことかというと、簡単な設計予想図を作成してみましたので、ご参考になられてみて下さい。単純に画像を大きくすればOKというワケでも無さそうです。特に、facebookが「ページ上部」や「ページ左側」 としている起点に注意が必要です。

日本時間の 2012/04/27 10:00am 正式に変更されましたので、修正テンプレートをこちらに記述しました。2012/04/27 10:30 追記


(↓図をクリックして拡大) 

Newtimeline_profile

 

■起点はどこになるのか。余白4pxは継承?CSSの変更範囲は?

つまり、現時点で言えるのは、「これはタダの予想図」にすぎない、ということです。
何のための変更かも正直わかりませんし、伝えられている条件は、冒頭の数行だけです。
上図のような起点では無いかもしれませんし、余白4pxは継承されるかもしれません。

ただ、今回新しく告知された160 x 160 ピクセルを、現在のプロフィール写真の左下の起点にあわせて拡大するとなると、もう一つの条件「上部210ピクセル、左23ピクセル」を満たすには、

a )1ピクセルの枠線プラス、1ピクセルの余白 
b)1ピクセルの枠線プラス余白無し 

のいずれかのパターンとなる可能性があります。
しかしこれも、起点が違えば、また別の配置となります。

上図では、参考までに1pxの余白が入る予想パターンを作成してみました。  

現在のCSSでは、画像は125 x 125 ピクセルですが、そのまわりに、角丸枠線1ピクセル+余白4ピクセルがあります。今回のポイントは、その余白がなくなるか1pxになるかではないでしょうか。

参考までに、現在のCSSでは、

#fbTimelineHeadline .profilePic{background-color:#fff;border:4px solid #fff;-webkit-border-radius:2px;height:125px;width:125px}

2012-04-19_0613

と表記されている箇所です。上記では、webkit-border-radius は2ピクセル指定されていますが、border自体は1ピクセルです。(※追記:radiusは半径を表しています)

 

■ファンタさんを追っかけしてみる、という作戦。

いずれにせよ、当日の仕様を見てみないと分かりません。Fantaさんなどのナショナルクライアントさんのご担当者には細かな仕様が伝わっている(はず)と思いますので、カバー写真とプロフィール写真をセットでデザインされているようなページのご担当者さんは、4/26の午後5時前頃に、(米国太平洋時間の午前0時)Fantaさんのページを確認されると良いかもしれませんね!(日本時間でリリースされればまた別ですが・・・)

2012-04-19_0717

Fanta https://www.facebook.com/fanta

株式会社ISSUN スタッフ

関連記事:


この記事を書いた人
株式会社ISSUN(イッスン) 代表取締役 宮松利博
株式会社ISSUN(イッスン) 代表取締役 宮松利博
RIZAPグループ社創業時の商品開発とマーケティングを手がけ3年で年商20億円に成長、上場と同時に保有株を売却し、Webコンサルティング株式会社ISSUNを設立。日本イーコマース学会を立ち上げ、産官学連携にも取り組む。 【Facebook】【Instagram】【YouTube】【twitter】
Scroll to Top