ホーム / 画像 /

Bloggerブログ|オリジナル画像の縦横比を保ちながら画像の大きさを変える（リサイズする方法）

サイズ 画像

投稿2019年1月9日 更新

　エディターを使って画像を貼り付ける場合、小・中・大・特大・元のサイズの５つからサイズを選ぶことができますが、この方法では細かいサイズを指定できません。

　そこでこのページでは、デフォルトで用意されているこの５つのサイズ以外の大きさで画像を表示する方法について触れておきます。

　なお画像を貼り付ける前に、外部のジェネレーターを使ってリサイズしたものを貼り付けてしまった方が場合によっては早いので、オンラインで手軽に利用できるジェネレーターを後半で紹介します。




画像を貼り付けた後にサイズを変更する


　初めに簡単な手順とそれを一枚の画像にまとめたものを挙げておきます。

画像を貼り付けた後で・・・
  1. HTMLをクリック
  2. ctrl + F で検索窓を出す
  3. 検索窓の中にimgと入力
  4. imgタグがオレンジ色で強調される
  5. imgタグ内のwidth、heightの数値を変更
  6. imgタグ内のs○○をs1600に変更し、画像をクッキリさせる



手順１　画像を挿入してHTMLモードに切り替える



　Bloggerブログには作成モードとHTMLモードの２つのモードがありますが、どちらからでも画像は挿入できます。





手順２　ctrl + F で検索窓を出す



　imgタグの中の属性値を変更していくので、まずはimgタグを探します。
　記事が短ければ目的のimgタグを探すのは簡単ですが、長文になると目視でタグを探すのは大変なので、ここで検索機能を利用します。

手順３・４　検索窓の中に「img」と入力



　複数の画像を使用している場合は何度かクリックして、オレンジ色に変化したimgタグを頼りに該当する画像を探します。

手順５　imgタグ内のwidth、heightの数値を変更



　画像を貼り付ける際に「元のサイズ」以外のサイズを選択した場合は、imgタグ内に自動で「width・height」が設定されるので、その数値を変更します。
　例
<img border="0"
data-original-height="1067" data-original-width="1600"
height="213"
src="https://4.bp.blogspot.com/-REzl0-8/XC3QhI/AAAAAUk/PGMIvuWhHroT5t9tK2gCLcBGAs
/s320/cat-323262%2B%25281%2529.jpg" width="320" />

　コード内に「data-original-width=""」「 data-original-height=""」という記述が見つかると思いますが、変更するのはこちらではありません。

　 「元のサイズ」を選択した場合は「width・height」が設定されないので自分で記述するか、一度別のサイズで表示し直して「width・height」を自動で生成させます。

　注意するポイントとして、縦（height）と横（width）のうち、どちらか長い方の数値だけが有効な数値となり、短い方の数値をいくら変更しても画像の大きさは変わらない、ということがあります。

　たとえば横の幅が640ピクセル（width="640"）、縦の高さが426ピクセル（height="426"）のオリジナル画像があったとして、ここで短い方の（height="426"）を（height="800"）に変えたとしても表示サイズは変わらない、ということです。

　言い換えるとどちらか長い方の数値を変更すると、それに合わせて短い方の辺の長さも自動で決定される（リサイズされてしまう）ということです。

　これは次項で取り上げますがimgタグ内に「s○○」という記述があるためです。

手順６　imgタグ内のs○○をs1600に変更し、画像をクッキリさせる



　imgタグ内に/s200//s320//s400//s640/といった記述があるはずなので、ここをs1600にしておくと画像がクッキリします。

<img border="0"
data-original-height="1067" data-original-width="1600"
height="213"
src="https://4.bp.blogspot.com/-REzl0-8/XC3QhI/AAAAAUk/PGMIvuWhHroT5t9tK2gCLcBGAs
/s320/cat-323262%2B%25281%2529.jpg" width="320" />

　このs○○という記述は、他のブログサービスやHTMLでは見られないBloggerブログ独特なものなので少し戸惑うと思いますが、この「s」の意味は一つ前に書いた通り、画像の縦と横のうち、長い方のサイズに合わせてリサイズする、ということを表しています。

　つまり通常のHTML記法であれば、width・heightの値を変えることで画像の大きさを変化させることができますが、Bloggerブログの場合は、width・heightの数値を変えただけでは、その通りに表示されないということです。

　縦横比を崩して画像を貼り付ける場合は、このs○○をw200-h150などに変え、ここで縦横の長さを指定した上で、さらにwidth・heightの数値を変更します。

　参考 画像サイズについて書かれている海外のサイト

リサイズする際に便利なサイト



iLoveIMG



https://www.iloveimg.com/ja
リサイズ以外にも画像に関する色々なことができます。





PEKO-STEP



https://www.peko-step.com/tool/resize.html
手軽にリサイズしたいならPEKO-STEPがオススメ。




QooQ