Facebookのカバー＆アイコン画像作成でつまづいたのでメモ
Category:Social
先日、ブログやSNSのカバー画像を一気に変えました。
個人的になかなか満足な出来映えです。
Blog/SNSのカバー画像を作り替えてみました | Web/Blog - color pencils
blog、twitter、facebook、facebookページの それぞれのカバー画像（トップ画像）を一気に作り替えてみました。 いろいろ乱立しているものを、統一したいと思い、 同じイメージから ...
いろいろサイトを参考に、案外簡単に出来るんだなぁと思いながら画像作ってたら、
Facebookのカバー画像でちょっとつまづいた。。
なので個人的メモがてら、シェアしたいと思います！
個人のFacebookと、Facebookページとでは位置関係が違う？
個人ページとFacebookページで同じように作っていました。そしたら、どうも個人ページのアイコンとカバー画像の位置関係がズレる。。
画像の書き出しサイズを間違えたのかと思って、再度画像作ってもズレる。
何度やってもズレる。
と、１日経って気づいたのが(遅い)、
もしかして「個人ページとFacebookページではカバーとアイコンの位置関係が違う！？」
ということでした。
実際に比較してみると、
(※左がFacebookページ、右が個人のFacebookです）
やはり。。
調べたら、同じような件で引っかかった方も居るようです
Facebookページはプロフィールページの写真より25px下に下がっていた。 ※Facebookの画面上だとプロフィールページとFacebookページの プロフィールアイコンの位置は17px違う。 ...
Facebookのヘルプみたいなところには画像サイズしか書いてありませんでしたので、勝手に同じだと思ってた。
というわけで、上図の位置関係でそれぞれ画像書き出し（画像ファイル作成）。
個人とページのアイコンはサイズ制限がちがう？？
画像を書きだして、順調にアップしていたら。。最後に自分個人のアイコンをアップロード使用しても何度やってもうまくいかない。。
何度も上記のエラー？ウインドウが出てきます。
FBページではうまくいったのに。。
どうやら、個人のFacebookではアイコン画像のサイズがちょっと大きくないとアップロード出来ないようです。
（具体的には、縦160px、横320px以上必要：なぜこんなサイズかは不明）
アイコンの解像度に合わせて、カバー画像の解像度が高い物を用意する必要があります。
(ここまで作ったのに。。)
やむなく、解像度を上げたものを作り直しました（泣）
（高解像度の画像データを残しておいて本当に良かった。）
ちゃんと寸法通りに作ったのに、アイコンがズレる！(怒)
解像度も合わせて、ちゃんとアップロードできて、これで完了！と思いきや、カバー画像とアイコンとの位置関係がずれてる？？
な ぜ だ
位置がずれているというより、拡大されているような感じ。
解決方法はすぐわかりました。
プロフィール写真にマウスを合わせると、「プロフィール写真を編集」と出ます。
そこで、「サムネイルを編集」とすると、
以下のウインドウが出てきて、位置関係を調整できるようです。
ここで、「適切な大きさになるよう拡大・縮小します。」にチェックを入れると、
無事に画像が正しいサイズで表示されました。
完成！
と、道のりが長かったですが、なんとか無事にFacebookのカバー設定できました。
Facebook Page
つまずいた点のまとめ
①個人ページとFacebookページではカバーとアイコンの位置関係が違う②個人のアイコンはアップロードするための画像解像度の制限が違う
→大きいぶんには問題ないので、初めから個人ページ/Facebookページ両方共、320×320pxの解像度で作っておけばOK
③アップロードしたアイコン画像の拡大・縮小のチェックをチェック！
最終的に出来上がった画像サイズは、
カバー画像：1702×630px
アイコン画像：320×320px
となりました。
具体的な画像の作り方は、また後日記事にしたいと思います！