Bloggerの画像の大きさを自由に変更する方法

・画像のURLを変更する方法
・CSSを用いる方法

画像のURLを変更する方法

しばらく前にPicasaからGoogleフォトに変わりましたが、Bloggerに貼り付けた画像URLは特に変化がないようで今までと同じ方式で変更できます。

https://3.bp.blogspot.com/-z6tcpujc084/UGiN4JhMg_I/AAAAAAAABl0/qpn09SGfF0g/s1600/sample-2000x2000.jpg

s1600という部分がサイズを決めています。これをs320とかにすると縮小された画像が自動で生成されて表示できます。

s150：　長辺が150pxにリサイズ
w150 :　横幅を150pxにリサイズ
h150 :　高さが150pxにリサイズ
s120-c　：120pxの正方形にする
s120-p ：120pxの正方形にする。写真に人物などが写ってる場合はそれが入るように調整される？

参考：
・Awesome Tips To Resize And Edit Images On Blogger & Picasa ‹ Blogger Widgets | Tips | Tricks | Templates : Way2Blogging
・Tip: Cropping (square) and resizing your Picasa/Blogger images : Blogger Xpertise
・Picasaウェブアルバムのサムネイルカスタマイズのまとめ｜mattintosh note (跡地)
・Picasa および Picasa ウェブ アルバムの現状 - Picasa と Picasa ウェブ アルバムのヘルプ

一覧表でまとめたサイトがあったのですが、見当たらないので記憶と検索で集めたものを書いておきます。

CSSを用いる方法

.separator img[width="320"]{
  max-width: 280px;
  height:auto!important;
}
.separator img[width="400"]{
  max-width: 350px;
  height:auto!important;
}
.separator img[width="640"]{
  max-width: 500x;
  height:auto!important;
}

・Bloggerで挿入される画像には「separator」というclass名が付く
・Bloggerで挿入される画像には「width」などのサイズの指定も明示的につく

上記のようなCSSを適用すると、特大・大・中の画像の表示サイズを変更することができます。値などは各自のサイトにあうように変更してくださいね。