クリボウの Blogger Tips

Google Blogger の使い方、カスタマイズ方法、各種ツールなど、
Blogger 関連の役立つ情報を紹介しています。

> | | > Blogger で画像の表示サイズを変更する方法

Blogger で画像の表示サイズを変更する方法

(これが 2008 年最初の投稿です。今年もよろしくお願いします。)

Japan Blogger Users Group | Google Groups に、Blogger の画像表示サイズについての質問があったので、こちらで回答します。

写真のアップロードについてなんですが、小、中、大という設定以外に掲載サイズを調整はできないのでしょうか? どなたかご存知であれば教えて下さい。

コードをいじりますが、意外と簡単にできます。このとおり。


画像表示例

72px


144px


200px(小)


288px


320px(中)


400px(大)

このブログではこれ以上の大きさの画像を載せられないんですが、
512px, 576px, 640px, 720px, 800px, 912px, 1024px, 1152px, 1280px, 1440px, 1600px
という「大」より大きいサイズも選択可能です。


表示サイズの指定方法

それでは、サイズ指定の仕方について。
Blogger の新規投稿画面もしくは投稿編集画面から画像投稿機能で画像をアップロードすると、本文入力用のテキストエリアにこのようなコードが表示されるはず。

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_F65Wu45NASE/R38FkpUx62I/AAAAAAAAClA/AaP702NideU/s1600-h/P1070151.JPG"><img style="cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_F65Wu45NASE/R38FkpUx62I/AAAAAAAAClA/AaP702NideU/s200/P1070151.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5151842625861577570" /></a>

このコードの中から赤字で示した箇所を見つけます。見つけ方は、img 要素(画像)の src 属性中「s なんとか」という部分。

ここが画像の表示サイズを指定している部分なので、ここを s72s1600 などに変更すれば、ブログでの画像の表示サイズ(サムネイルの大きさ)を変更できるというわけです。


サイズについて

指定するサイズの値は、表示される画像の縦横どちらか長い方のピクセル数になります。また、表示例で示したサイズ以外を指定すると、画像が出ないので注意してください。

アップロードした画像より小さいサイズが指定されている場合は、自動的に画像が縮小されます。実際の画像サイズよりも大きなサイズを指定した場合には、実際の画像のサイズで表示されます。

なので、特殊な場合ですが、ローカルで 300px にした画像をアップロードし s320 と指定すると、最初の 300px で表示することができます。この場合に s300 と指定してしまうとエラーになります。


リンク先画像の表示サイズ指定

応用として、リンク先画像の表示サイズを変更することも可能です。 さきほどのコードでいうと

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_F65Wu45NASE/R38FkpUx62I/AAAAAAAAClA/AaP702NideU/s1600-h/P1070151.JPG"><img style="cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_F65Wu45NASE/R38FkpUx62I/AAAAAAAAClA/AaP702NideU/s200/P1070151.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5151842625861577570" /></a>

赤字で示した箇所。見つけ方は、a 要素(リンク)の href 属性中「s なんとか -h」という部分です。

ここで s72-hs1600-h など、掲載サイズのときと同じようにピクセル数を指定することができます。末尾の -h の部分ははずさずにそのまま。はずしてしまうとリンク先がブラウザで見られなくなるので要注意です。


ということで、Blogger ブログに掲載する画像のサイズ、色々と試してみてくださいね。

参考:


スポンサードリンク:
お願い:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。 

Comments:13

  1. クリボウさんはじめまして。
    先月からbloggerをはじめ、カスタマイズしようと検索するたびこちらのブログがhitし、何度もお世話になりました。
    今までの分まとめてお礼申し上げます。今後も期待しています!

    ReplyDelete
  2. はーい、ありがとうございます。
    今後も気軽にコメントしてくださいね。
    これからもよろしくお願いします。

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. アップロード済み画像のサムネを
    テンプレ側で一括size変更は
    できないのでしょうか?・・・

    できると非常にたすかります

    ReplyDelete
  5. いつも勝手にお世話になっています。
    今ブログのカスタマイズ中で、参考になる記事が多く
    大変助かっております。
    これからもよろしくお願いします!

    ReplyDelete
  6. Promo Turn OVer di Agen Domino Qiu-Qiu Tambov Region Capital Situs www.pokerrusia.pw Melalui Bank Ekonomi Raharja Kode Bank 087.

    ReplyDelete
  7. pop over to these guys Dolabuy Chloe find out here Dolabuy Gucci click this link here now Valentino Dolabuy

    ReplyDelete
  8. have a peek here replica bags hermes find out here 7a replica bags browse around this web-site replica bags koh samui

    ReplyDelete
  9. more info here d0k16v4h51 replica louis vuitton replica bags online shopping m9u26r6j98 replica bags louis vuitton he has a good point z2g44t5k72 zeal replica bags reviews sites b4v10c4o54 replica louis vuitton bags 7a replica bags philippines v2f82h5c22

    ReplyDelete

Comments on Google+:

© 2005-2014 Kuribo. Powered by Blogger.