2010年4月10日土曜日

横長画像をサムネイルなしでbloggerにアップするテスト

2012年3月23日追記) このやり方では原寸表示はできなくなりました。今までの投稿どうしよ?

--------

今までテキストだけの投稿だったんですが、画像をアップロードしたくなったので投稿テストです。 普通に投稿しただけだとサムネイルの縮小画像が表示されてしまいます。 読む人がサムネイルをクリックすると元の画像が表示される仕組み。 サムネイル無しで原寸表示をしたかったのでやってみました。 他のblogger使用者の投稿を読んでみるとこんな感じでやればできるみたいです。

まずは普通に画像をアップロード。 html編集モードだと次のようなタグが挿入されます。

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZc-SDcw7vPeWz66g0tikmZ7edeWfJ4UgLNzQwc16t73NYnavpkM5nl5-zyuk27KqpVe97lcBKiqem5Tu1fTibxT0ry92CmoeuusZsa1ctoWdn5XO9jpySrFgae-xwoW9rGbLbULtEWI0/s1600/test_600x50.png"><img style="cursor:pointer; cursor:hand;width: 400px; height: 33px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZc-SDcw7vPeWz66g0tikmZ7edeWfJ4UgLNzQwc16t73NYnavpkM5nl5-zyuk27KqpVe97lcBKiqem5Tu1fTibxT0ry92CmoeuusZsa1ctoWdn5XO9jpySrFgae-xwoW9rGbLbULtEWI0/s400/test_600x50.png" border="0" alt=""id="BLOGGER_PHOTO_ID_5458522605208398738" /></a>

imgタグだけ取り出して、邪魔なスタイルを消します。 そしてsrc属性の中のファイル名の前にある「s400」を消せば元画像のアドレスになります。 (s400の部分はサイズによって違います。)

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZc-SDcw7vPeWz66g0tikmZ7edeWfJ4UgLNzQwc16t73NYnavpkM5nl5-zyuk27KqpVe97lcBKiqem5Tu1fTibxT0ry92CmoeuusZsa1ctoWdn5XO9jpySrFgae-xwoW9rGbLbULtEWI0/"/>

サンプル画像は幅が400、600、800、1000の4つを上げてみました。 今使っているテンプレートは横幅が固定されています。 どう表示されるかな?

どうでしょう?