2016/03/22

Bloggerで画像サイズを任意の大きさに変更してみる

更新日：2016年09月23日(金)
グーグルロゴ小
Bloggerの画像の表示サイズは、通常「小、中、大、特大」の中から選択することになるのですが、HTML編集モードで画像のHTMLタグをいじれば好きなサイズに変更できるんだそうです。
やり方はとっても簡単。
<a href="https://4.bp.blogspot.com/-OIaQTFr2u6o/VatazbGOVwI/
AAAAAAAABdk/5ZhKQ9FJ5H4tk4ldnwI1QaAce-nh2X9qQ/s1600/
google-485613_640.jpg" imageanchor="1" style="margin-left: 1em;
margin-right: 1em;">
<img border="0" height="226" src="https://4.bp.blogspot.com/
-OIaQTFr2u6o/VatazbGOVwI/AAAAAAAABdk/5ZhKQ9FJ5H4tk4ldnwI1QaAce-
nh2X9qQ/s320/google-485613_640.jpg" width="320" /></a>
img要素の「S」が付いた赤字の部分を見つけて、 「s200」など好きなサイズに変更するだけです。
これで1ピクセルから 1600 ピクセルまでの間で任意にサイズが指定できます。

ところが！「メモ取り！」はテンプレートが一部壊れているからか（多分）、この方法ではサイズ指定ができません。
新規の投稿ならアップロード時にサイズを指定すれば簡単ですが、過去記事の画像サイズを変更したい場合は非常に不便です。

そこで、別の方法を試してみました。
<a href="https://4.bp.blogspot.com/-OIaQTFr2u6o/VatazbGOVwI/
AAAAAAAABdk/5ZhKQ9FJ5H4tk4ldnwI1QaAce-nh2X9qQ/s1600/
google-485613_640.jpg" imageanchor="1" style="margin-left: 1em;
margin-right: 1em;">
<img border="0" height="226" src="https://4.bp.blogspot.com/
-OIaQTFr2u6o/VatazbGOVwI/AAAAAAAABdk/5ZhKQ9FJ5H4tk4ldnwI1QaAce-
nh2X9qQ/s320/google-485613_640.jpg" width="320" /></a>
いじるのは赤字部分のwidth="320"とheight="226"の画像の縦と横の値です。
今回は横長の画像なのでレイアウトを横幅に合わせ、320を400にサイズ変更します。

例）横幅を320から400に変更する場合

１．「レイアウト÷原稿」で横の割合を求めます。
400÷320＝1.25
２．次に縦の割合を求めます。
226×1.25＝282.5＝282
小数点以下を入れてしまうと、モバイル表示で画像がうまく表示されないので切り捨てか四捨五入してください。
<a href="https://4.bp.blogspot.com/-OIaQTFr2u6o/VatazbGOVwI/
AAAAAAAABdk/5ZhKQ9FJ5H4tk4ldnwI1QaAce-nh2X9qQ/s1600/
google-485613_640.jpg" imageanchor="1" style="margin-left: 1em;
margin-right: 1em;">
<img border="0" height="282" src="https://4.bp.blogspot.com/
-OIaQTFr2u6o/VatazbGOVwI/AAAAAAAABdk/5ZhKQ9FJ5H4tk4ldnwI1QaAce-
nh2X9qQ/s320/google-485613_640.jpg" width="400" /></a>
３．HTMLタグをwidth="400"とheight="282"に値を変更すれば、縦横比を崩すことなく画像サイズを変更できます。
グーグルロゴ大

計算がちょっと面倒ですが、これで縦横比を保ちながら画像サイズを自由に指定できます。
img要素で画像のサイズ変更ができない場合はお試しください。
ラベル: , ,