Pages

2010-10-10

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

Picasa ウェブアルバムの仕様変更

Blogger に投稿した写真の表示サイズを、後から変更するための記事を発見。

以前、Blogger のテンプレートをつくった際に、画像の大きさについて参考にしたのが、
  ・クリボウの Blogger Tips「Blogger で画像の表示サイズを変更する方法(2008/01/05)
他の画像サイズを使いたかったので、FireBug を使って調べたことがあります。結果、他のサイズも使えるようなので、その画像サイズのまとめを紹介します。記事が 2008 年と少し古いので、その後サイズが追加されたのかもしれません。

ここで紹介していただいているように、このブログでも画像のサイズ変更について、一度解説をしたことがあります。

これは、画像アップロード時の「大」「中」「小」以外で指定できる写真のサイズを列挙した記事だったんですが、Picasa ウェブアルバムの仕様が変更されて、現在では随分状況が変わってきているので、再度記事にしておこうと思ったわけです。

その仕様変更というのは、

記事が 2008 年と少し古いので、その後サイズが追加されたのかもしれません。

と書かれているような固定サイズ(32px、48px、64px、72px…)の追加ではなくて、画像サイズを 1 ピクセルから 1600 ピクセルまでの任意の長さで、自由に指定できるようになったということ。

論より証拠というわけで、下に Blogger へアップロードした画像を掲載してみました。入力部に 1 ~ 1600 を指定して「変更」ボタンを押すと、ちゃんとそのサイズに変更される…はず。

長い方の辺の長さ:
URL:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAekCrm2oVON4aQ5ilcGQ7QTHI0Hdz-9XqexRqKfktJPhFbHsSF5i6c6N7s4C4eBoo5EbQjO9SOWa3vePslEmIx3Sg1U9USd59XNO3eX3VDmHRX3A9cAV8gbLArflloQw_Orcp/s400/DSC_5864.JPG



画像サイズの変更方法

では早速画像サイズの変更方法を紹介します。「新しいエディタ」で、画像をアップロードすると、表示されるのがこちらの HTML コード。

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAekCrm2oVON4aQ5ilcGQ7QTHI0Hdz-9XqexRqKfktJPhFbHsSF5i6c6N7s4C4eBoo5EbQjO9SOWa3vePslEmIx3Sg1U9USd59XNO3eX3VDmHRX3A9cAV8gbLArflloQw_Orcp/s1600/DSC_5864.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAekCrm2oVON4aQ5ilcGQ7QTHI0Hdz-9XqexRqKfktJPhFbHsSF5i6c6N7s4C4eBoo5EbQjO9SOWa3vePslEmIx3Sg1U9USd59XNO3eX3VDmHRX3A9cAV8gbLArflloQw_Orcp/s320/DSC_5864.JPG" width="320" /></a></div>

ブログ上に実際に表示される画像のサイズが赤字部分、リンク先の画像のサイズが青字部分で指定されています。前述したとおり、この src 属性や href 属性の URL 中の値、「sなんとか」という文字列の「なんとか」部分の値で、画像の長い方の辺の長さ(横長画像なら横の長さ、縦長画像なら縦の長さ)を指定することができます。この値の範囲は 1 ~ 1600。たとえばこの画像で「s500」で指定すると、幅が 500 ピクセルとなるように自動的にリサイズされた状態で、Picasa のサーバーが画像を送ってくれるというわけです。

コード中、width(幅)、height(高さ)の属性は、送られてきた画像を、パソコンのブラウザで最終的にどのようなサイズに拡大縮小して表示するのかを指定しているもの。なのでこれらの数値は、送られてくる画像の縦横の長さに一致させる必要があります。「sなんとか」の部分を調節した URL を直接ブラウザで表示して見て、タイトルバーに表示されるサイズを確認したり(Chrome、Firefox)、右クリックから「プロパティ」で確認したり(IE)するのが1番楽だと思います。が、調べるのが面倒だという場合は、width="***"height="***" の文字列をごっそり削除してしまっても OK です。これらの属性が省略されている場合、ブラウザは送られてきたままのサイズで画像を表示してくれます。

(補足:じゃあ、原寸で表示する場合は width、height を指定する意味はないのかといえば、そうではありません。width や height の指定がないと画像読み込みまで文書全体のレイアウトが確定しませんが、指定しておくことで画像読み込みの速度に関わらず最初からレイアウトが確定させることができます。ので、指定する・しないで意見が分かれるのかもしれませんが、クリボウ的にはできるだけ width、height を指定するようにしています。)

ということで、自分のブログにあった画像サイズ、一度ゆっくり探してみてはいかがでしょうか。

4 comments:

  1. いつも勉強に拝見させて頂いています。

    画像の表示方法について上手く調整ができず困っております。もしご存知でしたらご教示頂けないでしょうか。

    画像を表示する際に横幅一杯(750)に表示させたいと考えています。
    こちらのブログに記述通り、s○○○の部分に750を入力すると、横長画像の場合はぴったりと幅に収まるため問題ないのですが、縦長の画像の場合縦が750に補正されるため、横幅が750以下となってしまいます。

    可能であれば、常に横幅を750に調整するようにしたいと考えています。

    下記がイメージに近いサイトになります。
    http://songofstyle.blogspot.jp/

    お忙しい所恐縮ですが、何卒宜しくお願い致します。

    ReplyDelete
  2. 横幅だけを指定したい場合には、
    s750
    の代わりに
    w750
    を使うといいんじゃないでしょうか。

    ReplyDelete
  3. ああっ!
    できました。ありがとうございます!!

    初心者で大変恐縮ですが、関連してもう一つお伺いしても宜しいでしょうか。

    ブログの新規投稿時または投稿編集時にW750にすることで、画像のリサイズができる事は理解しましたが、1投稿ずつその都度変更する以外に方法はないのでしょうか。

    全ての投稿画像がデフォルトでw750にリサイズされる方法があればご教示下さいませ。。

    宜しくお願い致します。

    ReplyDelete