> カスタマイズ | 画像 | 資料 >
Blogger で画像の表示サイズを変更する方法
コードをいじりますが、意外と簡単にできます。このとおり。
画像表示例
このブログではこれ以上の大きさの画像を載せられないんですが、
512px, 576px, 640px, 720px, 800px, 912px, 1024px, 1152px, 1280px, 1440px, 1600px
という「大」より大きいサイズも選択可能です。
表示サイズの指定方法
それでは、サイズ指定の仕方について。
Blogger の新規投稿画面もしくは投稿編集画面から画像投稿機能で画像をアップロードすると、本文入力用のテキストエリアにこのようなコードが表示されるはず。
このコードの中から赤字で示した箇所を見つけます。見つけ方は、img 要素(画像)の src 属性中「s なんとか」という部分。
ここが画像の表示サイズを指定している部分なので、ここを
サイズについて
指定するサイズの値は、表示される画像の縦横どちらか長い方のピクセル数になります。また、表示例で示したサイズ以外を指定すると、画像が出ないので注意してください。
アップロードした画像より小さいサイズが指定されている場合は、自動的に画像が縮小されます。実際の画像サイズよりも大きなサイズを指定した場合には、実際の画像のサイズで表示されます。
なので、特殊な場合ですが、ローカルで 300px にした画像をアップロードし
リンク先画像の表示サイズ指定
応用として、リンク先画像の表示サイズを変更することも可能です。 さきほどのコードでいうと
赤字で示した箇所。見つけ方は、a 要素(リンク)の href 属性中「s なんとか -h」という部分です。
ここで
ということで、Blogger ブログに掲載する画像のサイズ、色々と試してみてくださいね。
参考:
スポンサードリンク:
お願い:
(これが 2008 年最初の投稿です。今年もよろしくお願いします。)
Japan Blogger Users Group | Google Groups に、Blogger の画像表示サイズについての質問があったので、こちらで回答します。
写真のアップロードについてなんですが、小、中、大という設定以外に掲載サイズを調整はできないのでしょうか? どなたかご存知であれば教えて下さい。
コードをいじりますが、意外と簡単にできます。このとおり。
画像表示例
このブログではこれ以上の大きさの画像を載せられないんですが、
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 なんとか」という部分。
ここが画像の表示サイズを指定している部分なので、ここを
s72
や s1600
などに変更すれば、ブログでの画像の表示サイズ(サムネイルの大きさ)を変更できるというわけです。サイズについて
指定するサイズの値は、表示される画像の縦横どちらか長い方のピクセル数になります。また、表示例で示したサイズ以外を指定すると、画像が出ないので注意してください。
アップロードした画像より小さいサイズが指定されている場合は、自動的に画像が縮小されます。実際の画像サイズよりも大きなサイズを指定した場合には、実際の画像のサイズで表示されます。
なので、特殊な場合ですが、ローカルで 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-h
や s1600-h
など、掲載サイズのときと同じようにピクセル数を指定することができます。末尾の -h
の部分ははずさずにそのまま。はずしてしまうとリンク先がブラウザで見られなくなるので要注意です。ということで、Blogger ブログに掲載する画像のサイズ、色々と試してみてくださいね。
参考:
スポンサードリンク:
「この記事役に立った!」と思ったら、ぜひフィード登録をお願いします。
クリボウさんはじめまして。
ReplyDelete先月からbloggerをはじめ、カスタマイズしようと検索するたびこちらのブログがhitし、何度もお世話になりました。
今までの分まとめてお礼申し上げます。今後も期待しています!
はーい、ありがとうございます。
ReplyDelete今後も気軽にコメントしてくださいね。
これからもよろしくお願いします。
This comment has been removed by the author.
ReplyDeleteアップロード済み画像のサムネを
ReplyDeleteテンプレ側で一括size変更は
できないのでしょうか?・・・
できると非常にたすかります
いつも勝手にお世話になっています。
ReplyDelete今ブログのカスタマイズ中で、参考になる記事が多く
大変助かっております。
これからもよろしくお願いします!
Promo Turn OVer di Agen Domino Qiu-Qiu Tambov Region Capital Situs www.pokerrusia.pw Melalui Bank Ekonomi Raharja Kode Bank 087.
ReplyDeleteoff white
ReplyDeletesupreme
jordan shoes
stephen curry shoes
jordan shoes
supreme new york
air jordan
kobe shoes
bape hoodie
golden goose sneakers
Kolkata Call girls |
ReplyDeleteCall girls in Kolkata |
Call girls in Kolkata |
escorts |
escorts |
Call girls in Kolkata |
escorts in kolkata |
http://gg.gg/v5eov |
https://cutt.ly/hjmTXaa |
https://www.escortkolkata.com/Kolkata-hotel-escorts.html
rapport complet répliques de sacs à main ysl voir ici maintenant jetez un œil ici excellent site dolabuy.su
ReplyDeletepop over to these guys Dolabuy Chloe find out here Dolabuy Gucci click this link here now Valentino Dolabuy
ReplyDeletehave a peek here replica bags hermes find out here 7a replica bags browse around this web-site replica bags koh samui
ReplyDeletemore 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
ReplyDeleteo6s07p4w39 c5p96x6u52 n7h71c0t54 b8h27n9t42 k5a02c5w22 u1t63f7m18
ReplyDelete