ホームページの作り方　その４　（24.3.19）（最終更新：28.5.28）

フロントページエクスプレスの使い方　�A

写真の挿入

下図のように、Frontpage　Expressの作業画面で、カーソルを文字から２行下まで下げます。

ここに画像を挿入します。

下図の、画面上中央にある　画像の挿入　ボタンをクリック。

下図の画面になるので、参照　をクリック。

下図の画面になるので、デスクトップにあるHP作成フォルダの中の、HP1フォルダを指定します。

下図の画面ではHP作成をクリックして開くをクリック。

下図の画面ではHP１フォルダをクリックして、開くをクリック。

下図の画面になるので、最初の写真のファイル名をクリックして、開くをクリック。

すると作業画面に写真が表示されます。

※もしフォルダ内に写真ファイルが表示されない場合、ファイルの種類の窓を確認。

写真ファイルは一般的に jpg　（ジェーペグ）という種類です。

　※ファイルの種類を表すjpg等の文字のことを拡張子（かくちょうし）と言います。

下図のように、ファイルの種類の欄が、ビットマップ（bmp）などGIF及びJPEG以外のものになっていたら、

右にある▼をクリックして、GIF及びJPEG　を選択すると写真が表示されます。

写真を挿入すると下図になります。

文字列と写真のセンタリング

写真をページ中央に一枚使う場合はセンタリングと改行で簡単にできます。

文字列と写真をマウスでなぞって（文字列の先頭で左クリックしたまま、写真の右側まで移動して手を離す）、選択状態にしてから、

センタリングボタンを押す。

続けて、写真の右側をクリックしてカーソルを点滅させて、エンターキーで改行、写真の下の行にコメントをいれた状態が下図。

ここでは練習用に、センタリングではなく、左寄せの状態で解説を続けます。

複数の写真を挿入する

残りの写真も同様の操作でページ内に表示させます。

写真と写真の間はスペースキーで空けることができますが、写真の下にコメントを入れるのが大変です。

また写真の大きさがバラバラなので統一感に欠けます。

表の挿入

写真を等間隔で配置するには、表が便利です。

下図のように、カーソルを１行上げて、文字行と、挿入した写真の間の行にして、表の挿入ボタンをクリック。

この例の場合、写真は５枚あるので、左右に２枚ずつ、３行の配置にするので、下図の赤枠の部分をクリック。

すると、カーソルのあった位置に、下図のように点線の四角（３行×２列の枠）が表示されます。

最初の写真を右クリックして切り取りをクリック。

点線枠の左上の枠の中で右クリック、貼り付けをクリック。

すると、枠の中に写真が表示されます。

残りの写真も同様の作業で枠の中に移動します。

５枚の写真を枠に入れた状態が下図（下部は省略）

写真の大きさの調整

下図の左側上の写真の幅と、下の写真の幅が違うので、上の写真の幅に合わせます。

左下の写真をクリックすると、下図のように写真の周囲に小さい■が表示されます。

左下の写真の右上の■を左クリックしたまま、中心に向けてマウスを移動させると、写真の縦横比がそのままに写真全体が縮小します。

適当な所で手を離すと、左上の写真と左下の写真の幅が同じになります。

同様に、残りの写真も幅を調整します。

下図は左側上の１枚目の写真の幅を基準にして、右側の写真の幅を見た目で調整した例です。

写真の順番を移動する

下図のように、�@の写真を右クリックして切り取り、空いている�E枠の中で右クリック、貼り付けをクリックします。

すると、�@枠が空くので、�Aの写真を�@枠へ移動。こうやって犬が小さい時からの順に並べ替えることができます。

写真の移動は表の枠内だけではなく、作業画面の文字を表示する行へも移動できます。

写真の下にコメントを入れる

写真の右端にカーソルを表示させます。

写真の右端をクリックしてカーソルを表示させることもできますが、この操作は微妙で繊細です。

一度写真をクリックしてから　→　キーを押すと、確実にできます。

下図は左上の写真の右側にカーソルを合わせた所。カーソルを赤色表示にしてあります。

この状態でエンターキーを２回押して、カーソルを２行下に移動します。

↑　キーを１回押して、写真の下１行目にカーソルを表示させます。

ここに　生まれて間もなく　と文字を入力すると下図。

文字の下の行は、その下の写真との間隔を空けるための行。

カーソルが入力した文字の左側或いは右側にある状態で、（文字を選択状態にしても同様）

画面上の　中央に配置　ボタン（センタリング）をクリックすると、文字が中央に移動します。

他の写真の下にも同様に文字を入力し、センタリングします。

写真の左右にスペースを空ける

写真の右端にマウスを合わせてクリックして、カーソルを点滅させます。次に　←　キーを押すと、写真の左側にカーソルが移動して点滅します。

ここでスペースキーを押すと写真の左側にスペースが空きます。

→　キーを押してカーソルを写真の右側に点滅させてスペースキーを押す。すると、右側にもスペースが空きます。

　※写真の左側をクリックしてカーソルを点滅させるのは難しいためにこうします。

他の写真にも同様の操作をすると下図のようになります。

・・・・…・…・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

以下は参考資料として眺めてください。

表の作り方の色々

写真の左右にスペースを空けるには別の方法もあります。

スペースを列・行だと考えて下図のように４列×４行の表を作ります。

ここに写真を入れると、

こうなります。

コメント欄も枠に加えて配置することもできます。

表の作り方と大きさ

３行×２列の枠を作るのに、左上でクリックしたまま、右下に移動して、下図のようにしてもできます。

枠数をもっと多くしたい場合は、クリックしたままさらに右下移動します。

短い文字列や小さい写真画像などを等間隔で並べるにはこのように細かい枠の方が適しています。

列の追加

下図の２列の右側に１列追加するには、2列目の上にマウスを合わせると黒い矢印になります。図では分かりやすいように赤色。

矢印の状態でクリックすると、列全体が反転表示になって選択されます。次に、表をクリック、行または列の挿入　をクリック。

下図になるので、列、列数１　選択範囲の右側　を確認して、OKをクリック。

すると下図のように、列が３列になります。

行の追加

一番下の行（下図では３行目）の下に１行追加するには、行の左にマウスを合わせて、矢印になったらクリック、

選択状態にして、表をクリック、行または列の挿入　をクリック。下図の画面で、内容を確認してOKをクリック。

すると下図のように、行が１行追加されます。

行・列の削除

削除するには、選択状態にして、Backspaceキー、或いは、Deleteキーを押す。

または、選択状態の上で右クリック、切り取り。

表の全体の選択

列を１列選択状態にしてクリックしたまま右方向へ、

或いは、行を１行選択状態にしてクリックしたまま下方向へ、移動すると、表全体が選択状態になります。

この状態では、表全体を対象に作業ができます。表の中の文字や画像の位置をセンタリング（中央に配置）する。

文字の書体や大きさ、色などを一度に設定できます。

表全体を削除する時は、表全体が選択状態の時にBackspaceキー、或いは、Deleteキーを押す。

または、選択状態の上で右クリック、切り取り。

表のセンタリング（中央に配置）

表の中をクリックしてカーソルを点滅させてから右クリック。

下図の画面になります。レイアウトの下の配置が（標準）になっているので、▼をクリックして、中央を選択して、

適用をクリック、OKをクリック。

すると、下図のように表がセンタリングされます。

表の枠線を表示する

表内で右クリックして、下図の画面で、外枠のサイズの欄が0になっています。

右にある小さい▲をクリックして、数字を１に変更して、適用をクリック、OKをクリック。

すると下図のように枠線が表示されます。

下図は、上下２枠の中に写真とコメントを入れた例。

表の作成に関する詳細はまた後で説明します。

・・・・…・…・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

次へ