Bloggerで画像サイズを自由に変更する方法

たくさん画像を載せてます！ Ardor(@ArdorOnline)です。 今回はBloggerに画像を公開する際の画像サイズについてご紹介します。 ちょっとした工夫で、画像サイズを自由自在に操ることができますよ！

画像アップロード方法

画像サイズについてお話する前に、アップロード方法からご紹介します。 Bloggerに画像を公開する方法は、以下の方法があります。

• 記事投稿画面から直接アップロード
• 画像のURL指定

Bloggerから直接アップロードするとPicasaで保存されます。
画像管理はPicasaできますので、とても効率がよいです。

私は、写真を公開する際には、直接Picasaへアップロードして、URL指定でBloggerに公開しています。 どちらでも好みの方法で良いでしょう。

画像アップロード例

Blogger投稿画面から直接アップロードを行ってみます。
アップロードする画像は、1600px×1200pxの次の画像です。

投稿画面からアップロード

アップロードする際には投稿画面のメニューにある画像ボタンをクリックします。 するとダイアログが出てきますので、画像ファイル、大きさ、レイアウトを指定してアップロードします。
また、この画面でURL指定も行えます。

アップロードが完了するとダイアログに表示されて、記事中に以下のHTMLタグが挿入されます。(HTMLエディタ利用の場合)
作成エディタで利用している場合は、アップロードされた画像が表示されます。

挿入されたHTMLタグ

<div class="separator" style="clear: both; text-align: center;">
<a
href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiApEZAvUyX1nNeUbw68MBF_fYe81_IlaRFhhGlv1xDPhmvIIrbIc0gVaGCFY_EMncHa1LliieHrxFCaftN8yngHEVhKgVyn-Q9-QgcQgDgXxNaQwIxMtvHsdG6DMjOOK3EJFeH_S1eeo3k/s1600/20121130_001.jpg"
imageanchor="1"
style="margin-left: 1em; margin-right: 1em;"
>
<img
border="0"
height="300"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiApEZAvUyX1nNeUbw68MBF_fYe81_IlaRFhhGlv1xDPhmvIIrbIc0gVaGCFY_EMncHa1LliieHrxFCaftN8yngHEVhKgVyn-Q9-QgcQgDgXxNaQwIxMtvHsdG6DMjOOK3EJFeH_S1eeo3k/s400/20121130_001.jpg"
width="400"
/>
</a>
</div>

アップロード後のデフォルト画像は次の通りです。

通常ご利用の場合
画像サイズはそのまま利用されます。

カスタムドメインをご利用の場合
注意して頂きたいのは、1600px×1200pxの画像をアップロードしていますが、アップロード後のサイズは長辺が400pxの画像となります。

これはBloggerヘルプにも次の様に記載されています。

引用：Blogspot からカスタム ドメインへ

この場合、すべてのコンテンツは引き続き Blogger でホストされます。変更されるのはコンテンツのアドレスのみになります。アドレスが blogspot.com でなくなるため、上記のリファラーの制限が適用され、400 ピクセル以上の画像はページに表示されなくなります。ただし、ページにはサムネイルが表示され、フルサイズの画像に正しくリンクされます。

参照 Bloggerヘルプ：ブログを移動すると、画像はどうなりますか。

それでも解決方法があります。

画像サイズを自由に変更する

ヘルプには、画像が400pxになることが書かれていますが、「フルサイズの画像に正しくリンクされます。」とも書かれています。
これについてご説明すると、試しに先ほどの画像をクリックして頂くとわかります。
ご覧頂いてるモニタサイズにもよりますが、ビューアで元サイズの画像が表示されています。
これが「フルサイズの画像に正しくリンクされます。」ということです。

では、何が違うのでしょうか？

URLにご注目下さい。
リンクURLと画像URLは、次の様になっています。

リンクURL：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiApEZAvUyX1nNeUbw68MBF_fYe81_IlaRFhhGlv1xDPhmvIIrbIc0gVaGCFY_EMncHa1LliieHrxFCaftN8yngHEVhKgVyn-Q9-QgcQgDgXxNaQwIxMtvHsdG6DMjOOK3EJFeH_S1eeo3k/s1600/20121130_001.jpg

画像URL：https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiApEZAvUyX1nNeUbw68MBF_fYe81_IlaRFhhGlv1xDPhmvIIrbIc0gVaGCFY_EMncHa1LliieHrxFCaftN8yngHEVhKgVyn-Q9-QgcQgDgXxNaQwIxMtvHsdG6DMjOOK3EJFeH_S1eeo3k/s400/20121130_001.jpg

URLの違いは、赤字の箇所で、"s1600"と"s400"です。
これが画像の長辺サイズを示しています。

カスタムドメイン利用時でも、画像サイズの指定を変更すれば、大きな画像も表示可能です。
注意としては、大きい画像(例:s1600)としても、imgタグのサイズ指定で小さくなります。 大きな画像を表示したいときは、imgタグの指定も合わせて変更してください。
画像サイズ大を選択した場合では height="300" width="400" になっています。

画像サイズを変更した例

画像サイズを変更した例を載せておきます。
画像は先ほどアップロードしたものと同じで、サイズのみ変更しています。
また、モバイル端末で見た場合は、サイズが自動で縮小されます。

100px指定

300px指定

500px指定

最後に

Bloggerの画像についてコメント頂いたので、ご紹介してみました。
気になっている点は、解消されましたでしょうか？

さらにご不明点がありましたら、ご連絡頂ければと思います。
わかる範囲でお答えします。

Bloggerは、Googleのサービスになっただけのことはあって、容量を気にせず画像を使えます。
カスタムドメインを導入しても不便に感じたことは今の所ありません。
カスタムドメインを導入すればリダイレクトの問題が解消されるので、メリットの方が多いと思います。

最後までお読み頂きありがとうございます。