ブログに配置された画像の大きさを変更するには？

分かりやすくするために、ウェブページ「グーグル・ブロガー　先ずは投稿してみましょう」から「ブロガーへの投稿を作成する手順」のコーナー「2-2．画像（＝写真）を挿入します」を再掲します。

画像サイズを変更するためのアプリケーションソフトをお持ちでない方には、無料オンラインサービス NAVER（ネイバー）フォトエディターをオススメします。
当サイト「写真・画像をリサイズして簡単に小さくするオンラインサービス」をご覧ください。
写真・画像サイズを変更する（小さくする）方法を説明しています。

ブロガーへの投稿を作成する手順

画像（＝写真）を挿入します

本文・画像入力欄の上にある画像追加ボタン（写真のイラストのアイコン）を押すと、画像を追加するためのポップアップウィンドウ（下）が開きます。

□ 画像の挿入方法

比較的大きいサイズの写真（画像）を掲載する場合、「ファイルを選択」をクリックして、アップロードするパソコン内の画像を指定します。

画像のファイル名は予め英数半角にします。

（本来、ブログに掲載された画像には、その元画像へのリンクが自動的に生成されるのですが、「別の画像を追加」をクリックして、複数の画像を一気にアップロードすると、そのリンクがうまく生成されないことがあります。少し面倒でも、一枚一枚画像をアップすることをオススメします。）
レイアウト（＝写真の配置）は「なし」か「中央」を選択します。
（載せる写真が小さい場合のみ、「左」か「右」を選択し、本文の文章の一部を流れ込ませることができます。）
掲載する画像サイズは「大」を選びます。
「常にこのレイアウトを使用しますか？」にチェックを入れ、「画像をアップロード」します。
アップロードが完了した画像は、常に本文・画像入力欄の最上段に配置されることになります。
画像を配置する位置を変更するには、文字カーソルを写真にもっていき選択し、カットして、カーソルを配置したい場所に移動させ、ペーストします。

なお、画像をカットした際、本文・画像入力欄の先頭の行に一行の隙間ができてしまいます。その隙間は削除するようにしてください。

ブログに配置された画像の大きさを変更する方法

具体的に例を挙げて説明しましょう。

これから720×520ピクセルの大きめの画像（colon01.jpg）をブログに同じサイズ（＝等倍）で表示させるための手順を説明します。
一般にブログ投稿では、ブログのシステムにより自動変換されるケース（画像の大きさや画像ファイル名、タグのコード）がほとんどです。

先ずは、上述のやり方（画像の挿入方法）に沿って画像をアップロード（画像サイズ「大」）した際に、何が起こっているか見てみます。

アップロードされた画像が本文・画像入力欄に表示されます。
この時ブログに表示されるのは、元の画像720×520ピクセルの画像（colon01.jpg）そのものではなく、自動変換され、400×289ピクセルの画像（colon01-781729.jpg）になっています。

これは、ブログ投稿の際に画像サイズ「大」を選択すると、選択した元の画像サイズが400ピクセル以上の場合、画像の大きさが左右400ピクセル、または天地（＝上下）400ピクセルに合わせて自動縮小されてしまうからです。同時にファイル名も自動的に変更になります。
（なお、400ピクセルより小さい画像をアップロードしても、400ピクセルに拡大されて表示されることはありません。元が400ピクセルより小さい画像は小さいまま表示されます。）
公開された縮小画像には自動的に元画像へのリンクが生成されます。
ブログを投稿し、ホームページとして公開されたブログを覧ると分かるのですが、その400ピクセルに縮小された画像をクリックすると、元のサイズ720×520ピクセルの画像が表示されます。

ただし、ここで表示される画像のファイル名も自動的に変更されたファイル名（colon01-781773.jpg）になり、元のオリジナルのファイル名（colon01.jpg）とは若干異なります。

通常の作業はこれで終わりですが、場合によっては400ピクセル以上のサイズでブログに掲載したい場合があります。次にその方法の説明に移ります。

画像の配置完了後、本文・画像入力欄のタブを「作成」から「HTMLの編集」に切り替えます。

以下のようなHTMLソースのコードが表示されます。
通常ホームページは < > の記号ににはさまれたタグと呼ばれるコード（＝記述）に基づいて成り立っています。< から > まででひとつのタグと呼ばれるものになります。

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.designcross.co.jp/extra/uploaded_images/colon01-781773.jpg"><img style="cursor: pointer; width: 400px; height: 289px;" src="http://www.designcross.co.jp/extra/uploaded_images/colon01-781729.jpg" alt="" border="0" /></a>

このコードをよく見ると、３つのタグから成り立っていることが分かります。

（１）
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.designcross.co.jp/extra/uploaded_images/colon01-781773.jpg">

（２）
<img style="cursor: pointer; width: 400px; height: 289px;" src="http://www.designcross.co.jp/extra/uploaded_images/colon01-781729.jpg" alt="" border="0" />

（３）
</a>

（１）が元画像と同じサイズの画像へのリンクです。

（２）が400ピクセルに縮小されて、ブログ本文で表示される画像です。
width: 400px; height: 289pxというのが横（width）と縦（height）のサイズであることが分かります。
今回の作業の目的は、（１）の元画像と同じサイズの画像をブログ本文で表示させることですから、（２）の記述を次のように変えればいいということになります。

（２）（変更後）
<img style="cursor: pointer; width: 720px; height: 520px;" src="http://www.designcross.co.jp/extra/uploaded_images/colon01-781773.jpg" alt="" border="0" />

慣れないと難しそうですが、横と縦のサイズの数値の変更とファイル名の変更をするだけでＯＫです。焦らないでおこなってください。
それが終わったら、「すぐに保存」をクリックして、「HTMLの編集」から「作成」にタブを切り替えてください。
（「投稿を公開」して、再度投稿画面に移ってから、「作成」にタブに切り替えてもＯＫです。）

〈注意〉
例では画像の横幅を720pxに変更しましたが、ブログに掲載できる最大の横幅の値は各ブログによって異なります。くれぐれも最大の値よりも大きな値への変更はしないでください。ブログページのレイアウトが崩れてしまいます。

ブログ機能（＝CMS機能）ご利用のお客様には、弊社デザインクロスが各ブログの最大横幅についてご連絡しますので、必要な方はデザインクロスまでEメールでお問い合わせください。

「ブログに配置された画像の大きさを変更するには？」で分からないところがありましたら、デザインクロスまでお気軽にお尋ねください。（デザインクロスのお客様に限ります。）

特になし

見出し

本文

このページ「ブログに配置された画像の大きさを変更するには？」の更新履歴

直近の更新履歴

2010-03-23: 実際に画像サイズを変更するためのページ「写真・画像をリサイズして簡単に小さくするオンラインサービス」へのリンクを設定
2010-02-10: コーナー「グーグル・ブロガー先ずは投稿してみましょう」から分離し、単独ページとして公開

以前の更新履歴

2010-03-23: 実際に画像サイズを変更するためのページ「写真・画像をリサイズして簡単に小さくするオンラインサービス」へのリンクを設定
2010-02-10: コーナー「グーグル・ブロガー先ずは投稿してみましょう」から分離し、単独ページとして公開