Blogger で画像の表示サイズを変更する方法 
（これが 2008 年最初の投稿です。今年もよろしくお願いします。）
Japan Blogger Users Group | Google Groups に、Blogger の画像表示サイズについての質問があったので、こちらで回答します。
コードをいじりますが、意外と簡単にできます。このとおり。
画像表示例
このブログではこれ以上の大きさの画像を載せられないんですが、
512px, 576px, 640px, 720px, 800px, 912px, 1024px, 1152px, 1280px, 1440px, 1600px
という「大」より大きいサイズも選択可能です。
表示サイズの指定方法
それでは、サイズ指定の仕方について。
Blogger の新規投稿画面もしくは投稿編集画面から画像投稿機能で画像をアップロードすると、本文入力用のテキストエリアにこのようなコードが表示されるはず。
このコードの中から赤字で示した箇所を見つけます。見つけ方は、img 要素（画像）の src 属性中「s なんとか」という部分。
ここが画像の表示サイズを指定している部分なので、ここを
サイズについて
指定するサイズの値は、表示される画像の縦横どちらか長い方のピクセル数になります。また、表示例で示したサイズ以外を指定すると、画像が出ないので注意してください。
アップロードした画像より小さいサイズが指定されている場合は、自動的に画像が縮小されます。実際の画像サイズよりも大きなサイズを指定した場合には、実際の画像のサイズで表示されます。
なので、特殊な場合ですが、ローカルで 300px にした画像をアップロードし
リンク先画像の表示サイズ指定
応用として、リンク先画像の表示サイズを変更することも可能です。 さきほどのコードでいうと
赤字で示した箇所。見つけ方は、a 要素（リンク）の href 属性中「s なんとか -h」という部分です。
ここで
ということで、Blogger ブログに掲載する画像のサイズ、色々と試してみてくださいね。
参考：
Japan Blogger Users Group | Google Groups に、Blogger の画像表示サイズについての質問があったので、こちらで回答します。
写真のアップロードについてなんですが、小、中、大という設定以外に掲載サイズを調整はできないのでしょうか？ どなたかご存知であれば教えて下さい。
コードをいじりますが、意外と簡単にできます。このとおり。
画像表示例
72px
144px
200px（小）
288px
320px（中）
400px（大）
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/
このコードの中から赤字で示した箇所を見つけます。見つけ方は、img 要素（画像）の src 属性中「s なんとか」という部分。
ここが画像の表示サイズを指定している部分なので、ここを
s72 や s1600 などに変更すれば、ブログでの画像の表示サイズ（サムネイルの大きさ）を変更できるというわけです。サイズについて
指定するサイズの値は、表示される画像の縦横どちらか長い方のピクセル数になります。また、表示例で示したサイズ以外を指定すると、画像が出ないので注意してください。
アップロードした画像より小さいサイズが指定されている場合は、自動的に画像が縮小されます。実際の画像サイズよりも大きなサイズを指定した場合には、実際の画像のサイズで表示されます。
なので、特殊な場合ですが、ローカルで 300px にした画像をアップロードし
s320 と指定すると、最初の 300px で表示することができます。この場合に s300 と指定してしまうとエラーになります。リンク先画像の表示サイズ指定
応用として、リンク先画像の表示サイズを変更することも可能です。 さきほどのコードでいうと
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_F65Wu45NASE/R38FkpUx62I/AAAAAAAAClA/
赤字で示した箇所。見つけ方は、a 要素（リンク）の href 属性中「s なんとか -h」という部分です。
ここで
s72-h や s1600-h など、掲載サイズのときと同じようにピクセル数を指定することができます。末尾の -h の部分ははずさずにそのまま。はずしてしまうとリンク先がブラウザで見られなくなるので要注意です。ということで、Blogger ブログに掲載する画像のサイズ、色々と試してみてくださいね。
参考：
クリボウさんはじめまして。
先月からbloggerをはじめ、カスタマイズしようと検索するたびこちらのブログがhitし、何度もお世話になりました。
今までの分まとめてお礼申し上げます。今後も期待しています！
By
AKIZO, at 11 March, 2008 18:58
はーい、ありがとうございます。
今後も気軽にコメントしてくださいね。
これからもよろしくお願いします。
By
Kuribo, at 11 March, 2008 21:47
Post a Comment