Facebookページのカバー写真の一部が見切れてしまった

記事が気に入ったらシェアお願いします

  • このエントリーをはてなブックマークに追加

Facebookページを作ったのでカバー写真を作ったが、パソコンからFacebookページを見るとちゃんと表示されているのに、スマホから見るとFacebookページのカバー写真の一部が見切れていると相談されました。

スポンサーリンク

Facebookページのカバー写真。推奨されているサイズを調べてみた。

Facebookのカバー写真について推奨されているサイズを調べてみると

コンピューターでは幅820ピクセルx高さ312ピクセル、スマートフォンでは幅640ピクセルx高さ360ピクセルの大きさでページに表示されます。
引用元 Facebookページのプロフィール写真やカバー写真のサイズはどのくらいですか。

と書いてあります。

作成されたカバー写真を確認すると、コンピューターのサイズである幅820pixel×高さ312pixelより大きなサイズで作成されていました。

ここで気になるのがFacebookのカバー写真は、コンピュータとスマホでは推奨されるサイズが違っているということ。

もし、写真1枚をFacebookのカバー写真に使用するなら写真の中で見せたい要素が表示されるように位置を調整すればいい。

だけど、Facebookのカバー写真に、写真を複数枚使ったり文字情報を入れたりしたいなら、表示できるエリアがパソコンとスマホでは違ってくるから、そのエリア内に要素を配置しなくちゃいけないということになりますね。

つまり、全体的な幅・高さというより配置したい要素自体が持つ幅・高さに合わせて作成しておかなくちゃいけない、ということになります。

ということは、スマホの推奨サイズである幅の値「640pixel」とパソコンの推奨サイズである高さの値「312pixel」の中に表示したい要素を配置すればいいと考えることができそうです。

そこで、作成されたFacebookページのカバー写真用のファイルの幅と高さを確認してみると、全体的な幅と高さはパソコン・スマホ推奨サイズより大きく作成されていましたが、表示したい要素が全体的な幅と高さいっぱいに配置されていました。

Facebookのカバー写真を作成するなら表示したい要素の縦横のサイズに注意

まず、元画像を送っていただき、下記サイトを参考にFacebookページのカバー写真用の新規ファイルを作成し、表示したい要素を縦横中央に配置し直しました。

参考サイト スマホ対応!Facebookページのカバー写真(画像)のサイズと注意点

ちなみに新規ファイルのサイズ指定は、828pixel×466pixelで作成しました。

PhotoshopでFacebookカバー写真を作成するなら、AdobeのサイトにFacebookカバー写真とプロフィール写真を作成するためのテンプレート(Photoshop用)が紹介されていたので、こちらからテンプレートをダウンロードすると作りやすいかも。

Photoshopがインストールされていないパソコンなら、canvaというサイトがお勧めです。

合わせて読んでほしい Facebookページのカバー写真を「canva」で作成してみた

Facebookのカバー写真。自分で作成したいなら作成する縦横のサイズに注意して

撮影した写真をそのままカバー写真に設定するだけならこのようなことは起こりませんが、いくつかの写真を組み合わせたり、文字を入れたりしてFacebookページのカバー写真を作成するなら、カバー写真いっぱいに見せたいものを載せないようにしましょう。

【2016年11月改定】 Facebookカバー写真をスマホとパソコンに最適なサイズにする方法とは?というページにも書かれていましたが、どの端末でも同じように見せようとするなら、上下左右に要素を配置しない領域(見切れてもいい)を作っておく必要があったんですね。

このような現象は、ブログのヘッダーでも起こりうる可能性があるかもしれません。カバー写真やヘッダー画像がきちんと収まらないときは、見せたい要素が指定されている範囲に収まるように制作し、ギリギリまで要素を配置しないようにしておいたほうが良さそうです。

Facebookページのカバー写真。いろいろ決まりがあります(2017年度)
Facebookを団体や企業、店舗などで使用する場合、おすすめしたいのはFacebookページです。(Facebookはあくまでも「個」。団...

ホームページ開設・運用、リニューアルのご相談や、SNS・ブログの運用サポート、市民活動団体のIT活用提案・サポート、Webライティングを行っています。
また、県内各所にてパソコン操作講習会やSNS活用セミナーなどの講師もしています。

まずはお気軽にご相談ください。相談する

この記事をお届けした
だぶるしーどの最新ニュース情報を、
いいねしてチェックしよう!
リンクユニット

記事が気に入ったらシェアお願いします

  • このエントリーをはてなブックマークに追加

フォローはこちら

スポンサーリンク