やわらか図書館学

主に大学図書館のデザイン・広報に関するブログです。

はてブのサムネイルにあわせて画像を用意しておくというお話

f:id:Katharine_15:20130701001813p:plain

 

結論

はてなブックマークのホットエントリーのサムネイルの横縦比率が10:7なので、サムネイルに使われることを想定する画像は、横縦比率を10:7にしておくと、はてなブックマークできれいに表示されます。

 

f:id:Katharine_15:20130630234748p:plain

※ 上のサムネの画像はエントリー公開後に差し替えたので、実際のエントリーでは違う画像が使われています。

ふわっとした説明

  • サムネとして表示される画像が10:7なので、それ以外の横縦比率の画像がサムネに採用されると、画像が切れてしまうことがあります(長いほうにあわせて全部が入っていることもあります)。
  • カテゴリー毎のホットエントリーのサムネの画像サイズは「横270 × 縦189px」(トップのホットエントリーのサムネは「190 × 132px」)なので、そのサイズよりも小さい画像だと引き延ばされる(=ジャギる)ようです。
  • はてなブックマークでは、記事の中の画像の一つを「400 × 280px」に変換して、サムネ用に保存しているようですので、10:7がオススメと書きましたが、「400 × 280px」以上だとトリミングされる可能性はあります。(この変換アルゴリズムがよくわからないので、自分は「400 × 280px」をヘッダに使っています。)
  • 肝心のどの画像がサムネに使われるのかは、よくわかりません、すいません。。普通に考えると一番最初の画像なのかなと思うのですが、そうじゃないエントリーもあるのでよくわかりません。(はてなブログだと、ブログの編集オプションで「アイキャッチ画像」を設定できるので、多分これになるかと思います。)
  • 下記の記事で紹介されてる方法でホットエントリーのサムネの画像も選べるかもしれません。(自分はうまく画像の選択ができませんでした。) 

 http://blog.ruedap.com/entry/20110306/change_hatebu_page_thumbnail_image

まとめ

というわけで、内部的な仕組みがよくわからず、検証も充分じゃない状態で書いているので、肝心な部分がはっきりしない、モヤモヤした説明になってしまいましたが、何かの参考になれば幸いです。なお、あくまで表面上からわかる情報で記載しているので、間違っていることなどあれば、ご指摘いただければ幸いです。 

もちろん、はてなブックマークが全てではないので、それにあわせて画像サイズを整える必要もないといえばないのですが、自分のブログの場合ですとアクセス元として、はてなブックマークが結構多いですし、自分がホットエントリーを見るときも、やはりサムネイルが切れているものやジャギっているものより、サムネイルがきれいなもののほうが目にとまりますので、きれいに表示されるようにしておくにこしたことはないのかなと思います。

昨日、はてなブックマークランキングというエントリーを書いたので、はてブ繋がりの記事を書いてみました。

それではでは。

この記事と関係があるエントリー