○画像の挿入について1
 
ここでは,画像と解説を横に並べる方法を説明します。
  ☆この作業に入る前に、やっておくこと:
    作業フォルダを指定していれば問題ありません。
    そうでない場合は ,画像を貼り付けたい
「ページを保存 」しておきます。

   それはなぜか?
    画像ファイルが作業フォルダにあれば問題ありません。
    ところが ,ホームページに載せるためには画像を別のフォルダ(たとえばデジカメや,素材集など)から
   作業フォルダにコピーする動作が発生するためです。そうしておけば,画像のリンク先が狂いません。

 @テーブルを作成する
 まず,メニューバーの「テーブル」→「テーブルの挿入」
 もしくは,ツールバーのテーブルアイコン,
 または,編集画面上を右クリックして、「テーブルの設定」を選択します。



ここで行数を「1」,列数を「2」とします。幅と高さはそのままで構いません。
テーブルを非表示にするため,ボーダーサイズを「0」とします。



このような枠が作成できたら,次へ進みます。

A画像を挿入する



画像を挿入したいセルの上にカーソルを移動させて,右クリックすると、
上の画面が開きますので,「画像の設定」を押します。※メニューの「挿入」からでも構いません
今回は ,左側に画像を挿入しますので,左側のセル上でマウスをクリックするとよいでしょう。
 



「ファイルを選択」するための画面が開きますので,画像ファイルを選択します。
 


※ ファイルを未保存で作業していると、このようなメッセージが出ます。



画像挿入のウィンドウが開きます。どのような画像が選択されたかを確認できますが,
ここでは画像サイズのほうを覚えておいてください。
 



このように画像がはり付きました。
 

>>コラム

◆画像が大きい場合
 画像の再設定を行うことで画像サイズを小さく見せることができます。
 この場合、ファイルサイズは変わりませんので、非常に大きい画像を小さく見せるのは
画像が現れるまでの時間がかかりますので、画像処理ソフトウェアなどで
画像サイズをリサイズしておくとよいでしょう。


ここでは,320×240の画像でしたので,240×180にリサイズしてみます。
「比率の固定」にチェックがあると,幅を入力するだけで自動計算してくれます。
 



一回り画像が小さく表示されました。


◆画像の上に隙間がある場合…


 せっかく画像が入っていても ,画像の上に黒く反転させた部分ができています。
 これはなぜでしょう?
 実は、AlphaEditでは,作られたテーブルには全角スペースが挿入されています。
何も文字のないセルだと ,ブラウザで見たときに枠が表示されないことがあるからです。
 これはオプション設定でも変更できますので,別欄をご覧ください。

 

Bセルの大きさを指定する
 せっかくですから,画像の大きさにセルの大きさを合わせましょう。
 このままでは文字を打つにも打ちにくいものです。
 画像のあるセルの上で右クリックするか,
 カーソルを対象セルに移動させて「テーブル」→「セルの設定」を押します。

セルの設定ウィンドウが開くので,幅を画像と同じ240に指定します。
正確にはその隣のセルも同じように設定しますが,これでも十分見られます。



このようにセルの広さが左右に現れたので,文字が打ちやすくなりました。
この後,画像の解説を入力すると完成間近です。


C大きさのバランスを考える

今回のようなパーセント表示のままのテーブルでは,
大きな表示画面を持つ閲覧者と,小さな表示画面を持つ閲覧者の間で
(例;17インチ1240×1024 や15インチ1024×768など)見え方に差が出てしまいます。
そこで,ピクセル数でテーブルを指定することにします。


                        ↑このような十字アイコンが現れた場所でクリックすると,
                         テーブルや画像など,文書上のアイテムを指定できます。
                         指定されると□のポイントが現れます。
                         この□はマウスでつかんで大きさを変えられますが,
                         今回は使いません。(理由は後述)
    指定ができたら,右クリック。
    するとメニューが現れますので,
    「テーブルの設定」をクリックします。



テーブルの再設定モードが開きます。
そこで,今回は幅480を指定しましょう。これは,今回表示する画像の倍の大きさです。
パーセントでは画像と説明が離れすぎないようにするためです。

Dブラウザで確認する外部ブラウザを起動



ブラウザ(インターネットエクスプローラー)で表示した画面です。
テーブルが見えないこと,画像と文字が適度に離れていることがわかりますね。
※ tempファイルでの表示となっている点に注意


戻る