画像を記事に挿入する

広告

Blogger では記事に任意の数の画像を挿入することができます。ここでは記事に画像を挿入したり、挿入した画像のサイズを設定する方法について解説します。

記事に画像を挿入する

記事に画像を挿入するには、画像を挿入したい位置をクリックしてカーソルを合わせたあと、「画像を挿入」をクリックしてください。

記事に画像を挿入する(1)

挿入する画像を選択するウィンドウが表示されます。

記事に画像を挿入する(2)

Blogger ではファイル形式として「JPG」「GIF」「PNG」形式の画像ファイルを利用できます。「ファイルを選択」をクリックして挿入する画像ファイルを選択してください。

記事に画像を挿入する(3)

ファイルを選択するとファイルのアップロードが行われます。アップロードが完了すると先ほどの画面に画像が表示されます。

記事に画像を挿入する(4)

記事に挿入する画像をクリックして選択してください。その後で「選択した画像を追加」をクリックしてください。

記事に画像を挿入する(5)

カーソルがあった位置に画像が挿入されました。

記事に画像を挿入する(6)

Blogger でアップロードした画像ファイルは Google アルバムアーカイブに保存されます。 Google アルバムアーカイブの扱いについては別のページで解説します。

表示する画像のサイズを選択する

画像を挿入すると画像は元のサイズのままアップロードされますがブログで表示される時には「小」「中」「大」「特大」「元のサイズ」のいずれかに設定されて表示されます。(どのサイズが最初に選ばれるのかは元の画像のサイズによって決まります)。

現在どのサイズで表示されているのかを確認したり、サイズを変更する場合には挿入された画像を一度クリックして下さい。画像の下に次のように表示されます。

表示する画像のサイズを選択する(1)

記事の中で画像を表示するサイズは「小」「中」「大」「特大」「元のサイズ」のいずれかを選択します。現在は「中」が選択されています。それぞれのサイズを選択すると、画像の横幅が次の値に設定されます。(縦横の比率は一定なので画像の高さは横幅に合わせて調整されます)。

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

それでは「小」をクリックしてみます。すると画像は小さく表示されます。

表示する画像のサイズを選択する(2)

今度は「特大」をクリックしてみます。すると画像が大きく表示されます。

表示する画像のサイズを選択する(3)

なおアッロードした画像が元々小さい場合は注意が必要です。例えば横幅が 500px だった場合、表示するサイズとして「特大」を選択してしまうと 640px になるように拡大されて表示されます。その場合画像がぼやけて表示されてしまいます。

元のサイズを選択した場合の注意点

画像のサイズとして「元のサイズ」を選択した場合、元の画像のサイズのまま記事に挿入されます。(「HTML」モードで確認してみたところ、 width 属性と height 属性を指定せずに <img> タグが記述されていました)。

表示する画像のサイズを選択する(4)

元の画像のサイズが記事の本文の横幅よりも大きい場合、記事の作成画面上ではスクロールバーが表示されていますが、実際に記事を投稿すると画像はそのままのサイズで表示されるため記事のサイズからはみ出して表示されます。

実際にこのまま記事を投稿し、そのあとでブログで記事がどのように表示されるのかを確認してみると次のように記事の表示サイズから画像がはみ出して表示されます。

表示する画像のサイズを選択する(5)

表示する画像のサイズを選択する(6)

画像の右または左にテキストを回り込ませて表示する

画像を挿入するとデフォルトでは画像は中央に表示されますが、左側または右側に画像を配置し、反対側にテキストを回り込ませ表示することができます。

テキストを回り込ませて表示させるには、挿入した画像をクリックし表示されたメニューの中の「左」まては「右」をクリックしてください。

画像の右または左にテキストを回り込ませて表示する(1)

「左」をクリックすると画像が左に配置され、画像の右側にテキストが回り込んで表示されます。

画像の右または左にテキストを回り込ませて表示する(2)

「右」をクリックすると画像が右に配置され、画像の左側にテキストが回り込んで表示されます。

画像の右または左にテキストを回り込ませて表示する(3)

このように画像の左側または右側にテキストを回り込ませて表示することができます。単に画像を記事の左側または右側に寄せて配置したい場合は、このあとで解説する画像の配置を参照されてください。

画像を左寄せまたは右寄せで表示する

文に対するのと同じように画像に対しても配置を設定することができます(デフォルトは「中央揃え」となっています)。画像をクリックして選択したあと、「配置」をクリックしてください。その後で「左寄せ」または「右寄せ」をクリックしてください。今回は「左寄せ」をクリックしました。

画像を左寄せまたは右寄せで表示する(1)

画像が左寄せで配置されました。画像が左に配置されてもテキストが右側に回り込んで配置されることはありません。

画像を左寄せまたは右寄せで表示する(2)

今度は画像をクリックして選択したあと、「配置」をクリックしその後で「右寄せ」をクリックしました。

画像を左寄せまたは右寄せで表示する(3)

画像が右寄せで配置されました。画像が右に配置されてもテキストが左側に回り込んで配置されることはありません。

画像を左寄せまたは右寄せで表示する(4)

このように画像に「配置」を設定することで左寄せまたは右寄せで画像を表示することができます。

title属性とalt属性を設定する

追加した画像に対して title 属性と alt 属性の値をそれぞれ設定することができます。設定を行うには、画像を一度クリックし表示されたメニューの中の「プロパティ」をクリックしてください。

title属性とalt属性を設定する(1)

title 属性と alt 属性の値をそれぞれ設定するテキストボックスが表示されます。どちらか一つまたは両方に値を入力し、その後で「OK」をクリックしてください。

title属性とalt属性を設定する(2)

値が設定されました。どちらの値も設定したとしても見た目上は何も変わりはありません。 2 つの属性の使い方についてここでは詳しい解説は省略させて頂きます。

-- --

記事に画像を挿入したり、挿入した画像のサイズを設定する方法について解説しました。

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。