Bloggerの画像サイズの「小・中・大・特大」を任意のサイズに変更する裏技

・小：200px
・中：320px
・大：400px
・特大：640px

記事の横幅が580pxぐらいだと、この画像サイズだといろいろ不便なこともあります。
写真などを横並びで表示したい場合とかでも微妙に幅が足りませんし、また特大を表示するとはみ出ます。

そこでスタイルシートを設定して、この幅を任意の幅にかえてしまおうというのがこの記事の内容です。

.separator img[width="200"]{
  max-width: 185px;
  height:90%;
}
.separator img[width="320"]{
  max-width: 280px;
  height:87.5%;
}
.separator img[width="640"]{
  max-width: 540px;
  height:84.4%;
}

Bloggerのビジュアエディターの場合、「separator」というclass名がつくのと、「width」の値が必ず設定されることを利用しています。この仕様が変わらない限り有効な方法です。

上記のスタイルシートを適用すると
200　-＞　185
320　-＞　280
640　-＞　540
になります。

heightの％の計算方法は、　変更後の横幅/変更前の横幅*100です。

解決できそうな事

・「特大」の画像がはみ出ない
・画像をキレイに横並びにできる
・テンプレートの記事の横幅が、画像サイズに依存しない

最初によく考えずに、画像を貼り付けたブログを書いていて、その後、レイアウトなどを変更したいという時にも使えるテクニックだと思います。また、BloggerからWordpressなどに引っ越しした時でも、使えます。