読者です 読者をやめる 読者になる 読者になる

学生のための情熱キャリアアドバイザー川島正好の『元気な大人を育むブログ』

千葉市で人材育成に関わるサラリーマンが毎日綴る、元気に働くヒントや気づき(旧:hataraku日記)

Facebookタイムラインに出るアイキャッチ画像の見え方まとめ

元気に働く-ブログ 元気に働く

Facebookでブログをシェアすると、画像の大きさによってタイムライン上での見え方が異なる。

 

画像が大きさで自動判別されるのは何となく理解していたが、Facebook側のルールを踏まえて画像の見せ方をコントロールすれば、ブログの入口が閲覧者によりわかりやすく伝わると思うのでまとめてみる。※突き詰めればもっとテクニックはあるのだろうけど、ここでは基本パターンとして3つ。

 

パターン①:長方形(よこ>たて)

f:id:es4794:20151015221833p:plain

デジカメで普通に撮ったような写真はこれ。

ただしアイキャッチ画像は上下の一部が切り取られる。正方形の画像で1辺が410px(?)以上の場合もこのパターン①で表示される。

f:id:es4794:20151015222404p:plain

 

詳細はこちらの記事に詳しくまとめられているのでどうぞ。

 

パターン②:長方形(よこ<たて)

f:id:es4794:20151015232235p:plain

縦長の写真は、画像とタイトル・記事の本文が横並びで表示される。画像が縦長なので下半分が余白になります。スマホで見るともっと顕著。

 

 

パターン③:正方形(よこ=たて)

 f:id:es4794:20151015224338p:plain

正方形の400px以下もパターン②と同じく画像とタイトルが横並びになるが、パターン②と比べて余白が少なくなり画像とタイトルのバランスが良い。 

 

実ははてなブログのアイキャッチ画像を変更してから、このパータン③で出すやり方が解からず放置していた。長方形だから上下が切れるのね、と思って正方形にするとパターン①に陥る。正方形で一辺を短くして試したことは無かったので盲点でした。

ネットでも情報が無く放置していたところで、201の記事を書かせていただいて偶然発覚。ありがとうございました!

 

おまけ

Facebookのアイキャッチ画像を綺麗に見せるなら、保存形式はJPGよりPNGの方がいいらしい。Facebookでは画像をアップロードするとサイズが自動調整されるので、JPGは画像が劣化して粗く見えてしまう。PNGの方が画像フォーマットの特性上、劣化が少なく綺麗に見える。