楽天ブログのトップページに画像と説明文を整列させる方法

１. 写真を編集して ブログページの幅に入るように縮小する。

上の例では 一枚の横幅が 250ピクセル

です。楽天にアップロードできる社員ファ

イルのサイズ制限もあります。50KB未満

に収まっているかどうかも 確認しましょ

う。

ブログのページ幅は レイアウトを若

干変更できるようになっているので 一

様ではありません。右図の４．メイン型の

レイアウトを選択すると 最も広く使えま

す。この場合 横幅は 640ピクセルくらい

です。

写真を表を使って並べた際に 横幅を大きすぎると ブログのページ幅が広がります。広

がると格好が悪くなります。画面をはみ出すほど広がると 閲覧しにくくなります。

ポイント：写真を並べる枚数を考えて 横幅のピクセル数を決定して 縮小して ハー

ドディスクの自らが決めたフォルダへ保存する。

２. 写真を楽天ブログのサーバへアップロードする。

ロード（Load）は荷物、ここでは 写真ファイルのことです。アップ（UP）は 揚げる

こと。荷造りができた写真を 荷揚げするわけです。

写真は インターネット上で 時間を問わず引用されます。インターネットから 常時アク

セスできる場所に設置する必要があります。その場所が楽天ブログのサーバです。

自分のパソコンは インターネットへ接続して 特定のサーバへアクセスできますが

インターネット側から見ると自分のパソコンは住所不定の旅人です。住所不定の旅人がホ

テルから電話をするようなもので 電話を切った後、電話を受けた方から旅人へは電話す

ることができません。電話番号も住所も分かりませんから。

楽天ブログのサーバ内、「画像オプション」へ写真ファイルを転送しましょう。

今回の例では ４つの写真をアップロードします。アップロードの際は 写真に名前を付

加しておきましょう。目の不自由な人が 音声読み上げで聞いて 「ここにこんな写真があ

るのだな」と分かるような名前です。検索エンジンで検索されやすい名前も場合によって

は意識しましょう。貴重な写真であれば 人類の共有財産です。ちょっと 大げさでしょう

か？

同時に３枚まで アップできます。操作を繰り返して ４枚アップしましょう。

３. ホームページビルダーを使って 表を編集します。

（１） ホームページビルダーを起動します。

起動時に 編集スタイルを質問されたら 「スタンダード」を選択してください。

（２） 新規白紙ページを作成します。

ビルダーには ページ作成時に 標準モードとどこでも配置モードがあります。どこでも

配置モードは通常使いません。標準モードを選択してください。

（３） 先ほど縮小した写真を保管している一時フォルダへページを保存します。

ページの編集にはいる前に ページの保管フォルダとファイル名を決定して一旦保存し

ます。あとは 途中で休憩するときや他の作業をする際に 時々 「上書保存」をしながら編

集を進めます。

（４） ４行２列の表を挿入します。

まず カーソル位置を確認します。といっても 今は 白紙ページを作ったばかりなので

左上隅にカーソルがあります。

「メニュー」バーの「表」を左クリックして「表の挿入」を左クリックします。

行数、列数を入力すると 表が作成されます。

表に関すること（行の追加や削除等）は 右クリックで出るショートカットメニュー

よりも 「メニュー」バーの「表」をいつも思い出してください。

表の行数や列数を変更したい場合は 表内にカーソルを置いて 「メニュー」バーの「表」

を左クリックして 表の弐冠するメニューを出せば 表の全ての操作を行うことができま

す。

（５） ４つの写真を表に挿入します。

左の「サイト/素材ビュー」で

「素材」＆「フォルダーを選択

して 写真の入っているホルダ

ーを表示させます。

写真をドラッグして 表内に

配置します。

写真の挿入は 「メニュー」

バーの「挿入」→「画像ファイ

ル」→「ファイルから」を利用

しても 可能です。

画像を挿入（貼り付け）した

後、画像の隅をドラッグすると

画像の大きさを変更することが

できますが それをしてしまう

と 画像の表示が汚くなってしまいます。画像サイズを変更しないように注意してくださ

い。

（６） 説明文を記入します。

（７） 保存します。上書き保存してください。

４. 写真の参照先を楽天ブログサーバの画像オプション内に変更します。

ここで ちょっと特別なことをします。

今作っているページは 楽天ブログのトップページの上部へ組み込もうとしています。

そのトップページへは ブログの日記を書くときと同様に 文章や写真を配置できるよう

になっています。写真の貼り付けは タグと呼ばれている 特別な記述が必要で 写真ファイ

ルの所在地と名前を記述する必要があります。写真は 楽天ブログのサーバ内に最初の手順

で準備済みです。

前頁で作成したページは パソコンの中にある写真を貼り付けています。写真は パソコ

ンの中の写真を表示しなさいという指示になっています。これを 楽天ブログのアップロー

ド済みのファイルを表示しなさいという指示に置き換えてやります。

そこで 「ページ編集」から「HTMLソース」の表示に変更します。

置き換える部分（タグ）は 上の赤枠の４箇所です。写真４枚に該当する部分です。

どんなタグに置き換えるのかは 楽天ブログの写真オプションのページに表示されます。

もう一度 楽天ブログのフォト管理の画面を表示してください。

使う予定の写真をクリックすると画面が変わります。

下のほうに HTML タグという欄があって <IMG ・・・・・> のような記述がありま

す。これが 画像データをどこから得て どんな風に表示しなさいという コンピュータへの

指示です。< から > までの文字列をコピーします。

ビルダーに戻って 該当する部分を差し替えます。

写真４枚分 繰り返します。

いったん 上書き保存。

５. HTMLの必要箇所をコピーして トップページの自由編集欄に貼り付けます。

必要箇所とは 下記の反転表示部分です。ドラッグして（範囲選択して）コピーしてくだ

さい。

これを楽天のトップページに貼り付けます。

まず、楽天ブログの管理画面を表示し、「トップ自由欄編集」を左クリックします。

画面が変わります。

次ページにあるように 「自動改行なし（<BR>タグで指定）」を必ず選択します。

空欄の記入欄内に 先ほどビルダー上でコピーした内容を 枠内を右クリック→貼り付け

を実施します。

記入欄したの「この HTMLを登録」を左クリックします。これによって 楽天ブログの

トップページの上部が変更になります。

正常に 登録できると 「登録が完了しました」 という画面表示に変わります。

「自分のページを確認する」を左クリックして 実際のページを閲覧してください。

６. 完成後

作業が完了すれば ビルダーで作成したファイルの存在は バックアップ的な意味だけに

なります。再編集＆登録の際に 利用できます。

７. 最後に

ブログの日記では 文章を書き込んで 写真も挿入できますが 自動改行が強制的に入

るため 今回の方法は使えません。タグの利用にも制限されます（表が使えないなど）。

自動改行されない トップ自由欄とフリーページは 今回のような通常のホームページ作

成の手段が利用できます。

今回の編集ボリュームくらいの場合 タグを知っていれば ビルダーを利用しないで

直接 トップ自由欄編集で全てを打ち込んでも 作成可能です。ちょっとした修正は 直接

編集したほうが簡単ですので 機会があれば タグの内容の方も観察して 慣れてください。