おむころすびりん

おむすびころりらすっとこどっこい

適当サイズは?ブログで取り扱う画像サイズまとめ

f:id:omsb014:20170520014559p:plain

不肖私、記事を指定日時で投稿する際トゥイッターにもお知らせする機能を使っているんですが、面白い事態が起きました。

タイムラインにおにぎりの画像がでん!と飛び出していたんですね(笑)

メインコンテンツじゃないのに(笑)

最初見たとき笑いましたが、これではいかんぞいと思い、適切な画像サイズを調べたのでまとめておきます。

 

アイキャッチ画像のサイズは?

悩んだときはヘルプです。

アイキャッチ画像(記事のサムネイル) - はてなブログ ヘルプ

ヘルプの中にこんな記述がありました。

デフォルトのアイキャッチ画像をブログごとに設定する際には、ソーシャルメディアに投稿されることを考慮して、横長で十分な大きさの画像を用意するとよいでしょう。

横長ですか!

普通に正方形使ってましたよ!

だからおかしかったのか!

 

更にこんな記事も。

staff.hatenablog.com

ちゃんとアイキャッチ画像も一緒につぶやいちゃうぞいって書いてました。

読んでませんでした。

すみませんでした。

 

上記二つを参考にさらに調べると細かいサイズまで教えてくださるエントリを見つけました。

bizvektor.com

内容を読むと、アイキャッチ画像作成のポイントは3つ。

  1. 長方形で作成する。
  2. 正方形でトリミングされた際違和感がないよう、文字等は中央に寄せておく。
  3. サイズは1200×630で作成する。

結構大きいですね。

作成した画像は『OGP画像シミュレータ』というので確認できるそうです。

というわけで、作成した画像の確認結果がこちら!

f:id:omsb014:20160826022417p:plain

© tsmallfield

まぁいい感じではないでしょうか(自画自賛)。

およそどういうシチュエーション? とも思わなくもないですが、形はハマっていますね。

この画像に関してはおむすびのように恋も転がりだしたら止まらないとかそういう感じなんです(?)。

お結びころりんからの縁結びみたいな(ん?)。

 

背景画像のサイズは?

続いて背景画像についてヘルプを確認してみましたが、特にこれと言ってサイズの指定はありませんでした。

大きすぎたら調整が入るのかもしれません。

はてなブログテーマ制作の手引き - はてなブログ ヘルプ

 

調べてみても該当するページは多くないので、ある程度自由にアップロードしてしまってよいのかもしれませんね。

私の場合テーマの仕様上背景画像を変更してもナビゲーションバーから上しか変わらないので、こんな感じになりました。

f:id:omsb014:20160826005530p:plain

© Hatena

95×95(梅×2 ゴマ×2)の小さい画像をタイル表示させています。

文字が見づらいのであとで修正します。

 

タイトル画像のサイズは?

タイトル画像はスマホで表示される際の一番初めに表示される上部の画像なんですが、こちらは公式のブログを確認すると、ある程度画像に合わせてくれるみたいなので、細かい調整はこちらも不要かもしれません。

staff.hatenablog.com

私は背景画像をそのまま流用する形で作成し、こんな風になりました。

f:id:omsb014:20160826010346p:plain

© Hatena

背景画像と比べると愛らしい印象になりました。

画像サイズやレイアウトによって印象って結構変わるので、きちんと確認をしないとイメージに合わなかったりするかもしれません。

 

今回のまとめ

人によって色々微調整が入ると思うので、今回の内容はあんまりお役には立てないかもしれませんねー。

ただレイアウトの構成とか色の組み合わせとか考えながら画像を作成するのは面白かったです。

どちらかというと画像作成の方に気合が入りましたが、今後変更する際は改めて参考にしようと思います。

それでは!

 

超カンタン! 最強メディア ブログ成功バイブル

超カンタン! 最強メディア ブログ成功バイブル