BlogMap(ブログマップ)の画像サイズはコレでOK!

BlogMap(ブログマップ)の画像サイズはどうすればいい?

ブロガーのヒトデさんやワードプレステーマJINを作っているひつじさんたちが作ったサービス「BlogMap」

BlogMapとは、一言で表すと読みたいブログが見つけられるサイトです。つまり、自分のBlogを検索エンジン以外からアクセスしてもらうためのツールとも言えます。

もっと詳しく知りたい!という方はヒトデさんが記事にしているので、こちらを見てください

実際に登録してみたら、画像サイズをどうすればいいのか?悩んだので記事にしてみました

  • BlogMapの推奨画像サイズが無くて混乱した
  • BlogMapの画像が切れて表示されてしまう
  • BlogMapの画像が横にずれてしまう

こんなお悩みのある方は参考にしてみてください。
公式の推奨画像サイズではないので、あくまで参考程度に。

目次

BlogMap(ブログマップ)で登録する画像サイズ

ブログマップで使う画像は2種類あります。

  1. 基本設定のヘッダー画像
  2. ブログ設定のヘッダー画像

表示される場所によってサイズだけでなく使う画像の内容も注意が必要だったので、その点も追加して書いておきます

①基本設定のヘッダー画像

画像サイズの前に、どこにどのように表示されるか把握しておきましょう!!

基本設定のヘッダー画像は、3カ所に表示されるようになっていて、場所によって自動的に切り取られてしまいます。

実際に表示されている箇所をキャプチャしてみました(クリックで拡大します)

プロフィールページ

BlogMapの個人ページ

購読中のブログ一覧ページ

ブログマップの購読中のブログ一覧ページ

マイページの購読ブログ設定

購読中のブログ設定(BlogMap)

クリックして拡大していただければ解かると思いますが、購読ブログ一覧のところは画像が切れてしまいます。

あさひ

こういうの気になってしまう性分です

そこで、画像サイズのあとに、どのように作ればキレイに表示されるのか?についても紹介します

まずは画像サイズから

私が考えた、基本設定のヘッダー画像サイズはこちらです

  • 1200px
  • 250px

このサイズにした理由は

公式サイトに表示されている画像をキャプチャしたところ、1024×217でした。

横幅は1200くらいあったら良いと聞きますし、横幅を1200とすると縦は250くらいが良いかな?と思ったわけです

画像が切れてしまう問題に対処する

自分のBlogMapページに表示される横長の画像が中央だけ表示されます。

つまり、切り取られた状態を想像して画像を作る必要があります。

そこで私はこんな画像を作りました

中央だけが表示されるので、中央にアイコンとブログ名を入れました。

あさひ

基本的にセンスはないので、その点はスルーしてください

横の長さをだいたい3分割して、中央に伝えたい文字やイラストを入れるようにしましょう。そうすれば切れて表示されても、きれいに表示されます。私が作ったこの画像でも中央部分は切れるので、もっと小さくしても良いかもしれません。

どのくらい切れてしまうのか気になると思うので、実際に表示されている画像を見ていきます

実際の表示内容を確認

自分を購読中にしてどのように表示されているか確認してみましょう(画像はクリックで拡大します)

パソコンでの表示

プロフィールページ

購読中のブログ一覧ページ

マイページの購読ブログ設定

なんとなく良い感じになったと思います。

フォロワーさんから、スマホからブログ情報のページを確認すると、切れてしまうと教えてもらったので、スマホからどのように見えるのかも確認してみました。

スマホでの表示

プロフィールページ

スマホで見たブログ情報の画像

購読中のブログ一覧ページ

マイページの購読ブログ設定

全て切れて表示されてますね。

この画像を見て、どのように画像を作っていけばいいのか?判断してもらえたらいいかなと思います

後でおまけとして、違うバージョンもいくつか作ってみたいと思ます

②ブログ設定のヘッダー画像

ブログ設定のヘッダー画像が表示されるのはプロフィールページだけです。

ただし、ランキングに入れば、そちらにも表示されます

それぞれ実際に表示されている画像はこんな感じです

PCでの表示内容

スマホでの表示内容

ぱっと見た感じアイキャッチと同じくらいのサイズ感です。

そこで、既にOGPに設定した画像でも大丈夫なんじゃないかな?と思って使ったのがこの画像です。

OGPの設定をしていない人もいると思うので、

これはいつも使っているアイキャッチの画像サイズや、OGPの画像サイズで問題ないような気がします。

OGPで設定した画像を使う

私はブログ用にOGPの画像を作っていたので、それをそのまま使いました

SWELLで設定するOGP画像サイズは1200×630pxです

SWELLを使っている方なら、SEO SIMPLE PACKで設定しているかと思います

詳しくはこちらへ

他のテーマの方は「テーマ名+OGP」と検索すると出てくると思います

OGPの設定サイズによっては上下左右が切れて表示されます

公式に表示されている画像サイズから考える

私が考えた、ブログ設定のヘッダー画像サイズはこちらです

  • 1200px
  • 820px

このサイズにした理由は

BlogMapに表示されている画像サイズをキャプチャしてみると、927×635となっていました。

比率を考えて横1200とすると縦820くらいになるかなという判断です

OGPで設定した画像サイズよりも少し縦が長くなっています。

画像は圧縮してアップロードしましょう

Blog運営している人なら解っているとは思いますが、念のため。

Canvaなどで作った画像は必ず圧縮してアップロードしましょう。

特に圧縮系のプラグインを入れている人は、他のサイトにアップロードする際、そのままアップロードしがちです。

圧縮してアップロードするのに便利なサイト

他の人の意見も探してみました

私はあくまでBlog Mapに表示されたサイズから導き出したので、他の人の意見も探してみました

Twitterで探してみた

見つけたのはひとつだけでした。

Blog設定のヘッダー画像
基本設定のヘッダー画像サイズ
  • 730×400px
  • 570×120px

Google先生からの回答はなし

ググってみましたが、検索結果に画像サイズについて書いている人は出てきませんでした。

恐らく、このブログ記事がそのうちに出てくるようになると思います。

基本設定のヘッダー画像の作成例

切れて表示されてしまう基本設定のヘッダー画像

どんなデザインがしっくりくるのか、いくつか参考程度に作ってみました。

作成例1

作成例2

作成例3

ポイントは、左右に花にもないほうがスッキリ表示されることです。③番のように、写真を背景にして中央に文字を入れるのもおすすめです。

まとめ

特に指定もないので、だいたいおさまる感じで作ったらいいと思います。いい加減ですみません。

本来なら、アップロードするところに「推奨サイズは〇〇です」など記載があればいいのになと思います。

ちなみに私のBlog Mapのページはこんな感じです

BlogMap(ブログマップ)の画像サイズはどうすればいい?

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次
閉じる