Home / Index / Prev / Next

9.画像を貼り付ける

トップページがなんとなく物足りないので、画像を貼ってみます。
写真素材のサイトからいただいたものを加工しました。…※素材屋さんによっては加工禁止の ところもあるので注意しましょう。
スキー場のコブ斜面の写真←photo_ski.jpg
いい感じのコブ斜面です。「スキー大好きっ!」なんて言ってますけど、こんなコブ斜面を滑る実力はありません(^^;
この画像をタイトルの下に貼り付けます。
まず、貼り付けたい位置にカーソルを置くのですが、タイトル「スキー大好きっ!」と次の「Contents」の間は、見出しタグ<h1>を 使っているので画面上は1行空いているように見えますが、実際には空いていないためにカーソルを置くことはできません。
こんな時は、タイトル「スキー大好きっ!」の後ろにカーソルを置いて、改行キー(Enter)を押せば、<br>タグが挿入されて、カーソル を置くことができるようになります。
ソースに直接記入してカーソルを置くスペースを作る方法もあります。編集モードツールバーから [<HTML>ソース] を開いて、貼り付けたい 場所に、<br>と記入しま す。 もともと改行されている部分にさらに改行タグを記入すれば、1行空いてカーソルを置くスペースを作ることができます。
タイトルは見出しタグ<h1>を使っているので、タイトルの後ろに貼り付けたい場合は、見出しタグの終了タグ</h1>の後ろに <br>を記入します。
<h1 style="color: rgb(51, 102, 255); text-decoration: underline; font-style: italic; text-align: center;">スキー<span style="color: rgb(255, 0, 0);">大好きっ!</span></h1>
<br>
<div style="text-align: center;">
<h3 style="font-family: times new roman; color: rgb(51, 153, 153);">Contents</h3>
これで、[標準] モードを表示すれば、タイトルの後ろにカーソルを置けるようになります。
画像の位置にカーソルを置く
カーソルを置いたら、構成ツールバーの画像アイコンをクリックして [画像のプロパティ] ダイアログボッ クスを開きます。
画像のプロパティダイアログ
「エクスプローラ」から直接画像を貼り付けることもできます。
「エクスプローラ」の中の画像ファイルを選択して、「右クリック→コピー」して、貼り付けたい場所で「右クリック→貼り付け」で、画像を貼り付けてから、 画像をダブルクリックして [画像のプロパティ] ダイアログボックスを開きます。

■ 場所(URL)

[画像の場所(L)]
貼り付けたい画像ファイルの場所とファイル名(URL)を入力するか、[ファイルを選択(F)] ボタンをクリックして [画像ファイルを選択] ダイアロ グボックスを開き、画像ファイルを選択(クリック)します。
画像ファイルを選択
前に説明しましたが、自分のサイトの中でファイルを指定するときは相対パスが原則なので、自動的に、[URL をページの場所に相対的にする]にチェックが入りました。画像ファイルが、画像を貼り付ける HTML ファイルと同じフォルダにある場合の相対パスはファイル名だけになります。
画像の場所を指定
[ツールチップ(T)]
ツールチップ(tool tip)というのは、マウスをあてた時にマウスカーソルの下に表示される説明のことです。必須ではありませんが、画像ファイルの簡単な説明や名前を入れて おけば、わかりやすくて親切です。
なお、Composer の [標準] モードと [HTML タグ] モードでは、画像にマウスをあてた時のツールチップは画像の URL が表示され、[プレビュー] モードでは入力したツールチップが表示されます。

[代替テキスト]
画像が表示されない時、または表示される前(読み込み中)に、画面に表示したい文字列を入れます。ツールチップ同様、画像ファイルの簡単な説明や名前を入 れてお けば良いで す。[代替テキストを表示しない ] を選択すれば入力する必要がなくなりますが、HTML の規則では入力することになっているので、入れておきましょう。ただし、あまりページの内容に関係のない画像やリストマークとして画像を使う時など、入れ ないほうが良い場合もあります。
なお、[代替テキスト] を入れないで、[代替テキストを表示しない] も選択しないと、アラート(警告)が表示されて画像を挿入することができません。
代替テキストの警告

画像の場所、ツールチップ、および代替テキストを指定した時の HTML ソースはこのようになります。
<img alt="スキー場のコブ斜面の写真" title="スキー場のコブ斜面の写真" src="photo_ski.jpg">
画像を貼り付けるには、<img>タグ(image)を使います。<img>タグは囲む文字列がないので、終了タグがありませ ん。
alt プロパティの値には代替テキスト、title プロパティの値にはツールチップ、そして src プロパティの値には画像ファイルの URL が入ります。

■ 寸法

次に [寸法] タブをクリックします。
画像のプロパティで寸法タブを選択
デフォルトは [実際のサイズ] です。サイズを変えないで画像を貼り付ける場合は、このままで良いです。
[カスタムサイズ] を選択すると画像のサイズを変更することができます。加工禁止の素材屋さんから画像をいただいた場合は、変更してはいけません。
デフォルトで [強制] にチェックが入っていますが、[強制] にチェックを入れていると、幅(または高さ)を変えたときに画像の縦横の比率が変わらないよう に高さ(または幅)が自動的に変更されます。縦横比率が変わると画像が崩れてしまうので、チェックを入れておいたほうが良いです。素材屋さんによっては、 大きさは変えても良いけど、縦横比率は変えちゃダメというところがあります。
[幅(W)] と [高さ(G)] に任意の数値を入れて、単位(ピクセルまたは %)を選択します。
HTML でプロパティ値として数値を指定するプロパティの場合、数値を記入すればピクセル単位と認識します。ピクセルがピンとこない方は、使っているパソコンの画 面の大きさが 1024×768 ピクセルの場合、100 ピクセルで画面の10分の1くらいの長さと覚えておけば良いでしょう(画面の大きさは[コントロールパネル]→[画面]→[設定] でわかります)。
% は、ウィンドウに対する割合なので、ウィンドウの大きさを変えると、画像の大きさも変わります。% を選択すると縦横比率を固定する[強制]は解除されます。
<img alt="スキー場のコブ斜面の写真" title="スキー場のコブ斜面の写真" src="photo_ski.jpg" style="width: 300px; height: 165px;">

■ 表示

[表示] タブをクリックします。
画像のプロパティで表示を選択
[画像の周辺の空白]
画像の周りに文字列や他の画像がある場合には、[左右(L)] の空白(Horizontal Space)または [上下(T)] の空白(Vertical Space)をピクセル数で指定します。
[枠線(B)] は画像の周りに枠線 (Border)をつけたい時に、枠線の幅をピクセル数で指定します。枠線の色は、文字列の色になるので、このままでは 黒い枠線がついてしまい、ちょっとイメージが悪いです。枠線をつけた後に、画像を指定(クリック)してから、テキストの色を選択ボタンの上の方をクリック して文字列の色を変更すれば、枠線の色を変えることができます。

[画像の周辺の文字列の配置]
画像の周辺の文字列の配置を指定する画像の周りに文字列がある場合に、画像に対する文字列の配置方法をドロップ ダウンリストから選択することができます。
[上部] は、画像の上端に合わせて文字列が配置されます。上下の空白や枠線がある場合は、それも含めた上端になります。
[中央] は、画像の高さの真ん中に合わせて文字列が配置されます。
[下部] は、画像の下端に合わせて文字列が配置されます。上下の空白や枠線がある場合は、それも含めた下端になります。

[上部]・[中央]・[下部] とも、文字列の長さが2行にわたる場合には、2行目は画像の下に配置されてしまうので、1行で収まる長さの文字列(画像の名 前、簡単な説明など)の場合にだけ使ったほうが良いでしょう。2行目は画像の下に配置されるので、文字列を入力して改行キーを押すと文字を入力するための カーソルは画像の 下に移動します。

[左端で折り返す] は、画像の左側に文字列を配置し、2行目以降も画像の左側に文字列を続けたい場合に使います。文字列が画像の横にきたら折り返されて そのまま続き、画像の下端まできたら、画像の下に続きます。
[右端で折り返す] は、画像の右側に文字列を配置し、2行目以降も画像の右側に文字列を続けたい場合に使います。文字列が画面の端にきたら折り返されて そのまま続き、画像の下端まできたら、画像の下に続きます。

[左端で折り返す]・[右端で折り返す] は、改行キーを押しても改行されるだけで、引き続き画像の横に文字列が配置されます。画像の左または右に配置する 文 字列の入力が終わって、次の文字列を画像の下に配置したい時は、画像の下端まで改行キーを何度か押す(<br>タグを複数挿入する)か、 HTML ソースを開いて、画像の横の文字列の後ろに<br clear="all">と入力します。

いろいろ説明しましたが、[画像の周辺の空白] は左右 10 ピクセル、上下 10 ピクセル、[画像周辺の文字列の配置] は下部のままにしておきます。
<img alt="スキー場のコブ斜面の写真" title="スキー場のコブ斜面の写真" src="photo_ski.jpg"
style="width: 300px; height: 165px;" hspace="10" vspace="10">
画像の周辺に枠線を指定すれば、枠線の幅 10 ピクセルの場合、CSS の指定はこうなります。
style="border: 10px solid ; width: 300px; height: 165px;"
solid は直線です。HTML ソースを直接修正すれば、いろいろな種類の枠線を指定することができます。

solid double groove ridge inset outset dotted dashed


せっかくだから、枠線の種類と色を変えてみました。額縁に入ってるイメージなんですけど…。
スキー場のコブ斜面の写真
style="border: 10px ridge ; width: 300px; height: 165px; color: rgb(204, 0, 0);"

[画像の周辺の文字列の配置] を変えた場合は<img>要素の中に、次のプロパティとプロパティ値が入ります。
上部
align="top" 画像の位置は上
中央
align="middle" 画像の位置は真ん中
下部
なし(デフォルト)
指定なし
左端で折り返す align="right" 画像の位置は右(文字列は左)
右端で折り返す align="left" 画像の位置は左(文字列は右)

■ リンク

リンク(Link)とはページとページを繋ぎ合わせることで、画像を使ったリンクでは、画像をクリック して他のページあるいは同じページ内の指定した場所にジャンプすることができます。
「スキー大好きっ!」のトップページに貼り付ける画像では使いませんが、一応説明しておきます。

[リンク] タブをクリックします。
画像のプロパティでリンクを指定する
他のページにリンクを張るときは、入力フォームに Web ページかローカルファイルの場所(URL)を入力します。
Web ページというのは、既に Web サーバーにあるホームページ(ふつうは他の人のホームページ)のことで、絶対パス(http://~)で指定します。ローカルファイルは自分のパソコンの 中にある HTML ファイルのことで、相対パスで指定します。
ローカルファイルの場合は、[ファイルを選択(O)] をクリックすれば [HTML ファイルを開く] ダイアログボックスが開くので、リンクしたいファイルをクリックすれば指定することができます。上で説明した画像ファイルを選択するのと 同様です。自分のサイトの中でファイルを指定するときは相対パスが原則なので、自動的に、[URL をページの場所に相対的にする] にチェックが入ります。

同じページ内の指定した場所にリンクを張るときは、ポップアップリストから「名前付きアンカー」か「見出し」を選択します。
自分でリンクしたい場所に印(アンカー)と名前をつけておけば、そのアンカー名がポップアップリストに表示されます。また、段落の形式で見出しを使った文 字列もポップアップリストに表示されるので、同じページ内の見出しを使った文字列をリンクしたい場所に指定することができます。

名前付きアンカーを作り、このページの一番上に戻るリンクを張ってみます。
まず、一番上の行でカーソルを置いて、アンカーアイコンを クリックすると、[名前付きアンカーのプロパティ] が開くので、[アンカー名(N)] に好きな名前を入れて、[OK] をクリックします。
名前付きアンカーのプロパティ
名前付きアンカーを付けた場所には、アンカーアイコンが表示されます。アンカーを付けた場所には、次のソースが入ります。
<a name="PageTop"></a>
次に、画像アイコンをクリックして画像のプロパティを設定し、リンク画 像を貼り付けます。ページ内リンクを作るための画像のプロパティ
できあがり。
←クリックしてみて^^
<a href="9image.html#PageTop">
<img alt="" src="image/sky-top.jpg" style="border: 0px solid ; width: 80px; height: 75px;" align="middle" hspace="10" vspace="10">
</a>
<a>要素はリンクを張るときに使います。href プロパティにリンク先の URL を記入します。このページのファイル名(9image.html)とアンカー名(PageTop)が入り、その間に # が入ります。
ここでは、画像を使ってリンクを張っているので、<a>要素の内容は画像を貼り付けるための<img>要素になっています。ここ に文字列を入れると、文字列からのリンクになります。
画像のプロパティで、[代替テキストを表示しない] を選択しているので、alt プロパティの値は空白になっています。<img>要素に alt プロパティは必須なので、空白でも記載されます。
src プロパティの値である画像の URL は、画像ファイルを「image」というフォルダの中に入れているので、「image/sky-top.jpg」となっています。画像を使 うページと画像ファイルが、同じフォルダにある場合はファイル名だけ指定すれば良いのですが、違うフォルダにある場合は先にフォルダを指定する必要がある ので、「フォルダ名/ファイル名」となります。
画像を貼り付けてリンクを指定しない場合、[表示] タブで [枠線(B)] の値を入力しなければ、CSS の border プロパティは記載されないのですが、画像を使ったリンクを張る場合、[リンク] タブで [リンクされた画像の周りに枠線を表示する] にチェックを入れなけれ ば、border プロパティのプロパティ値として「0px solid」(0ピクセルの線、つまり表示しない)が記載されます。チェックを入れれば、自動的に [表示] タブの [枠線(B)] の値も追加されます。

■ 画像のプロパティの修正

画像のプロパティは、一度設定してダイアログボックスを閉じても、貼り付けた画像をダブルクリックするか、右クリックで表示されるメニューから [画像のプ ロパティ] を選択すればダイアログボックスが開くので、設定を変更することができます。
ただし、寸法と枠線は変更できないので、寸法や枠線を変えたい時な どは、画 像を削除してから再度貼り付けるか、直接 HTML ソースを修正する必要があります。画像の削除は、画像を選択(クリック)して、Delete キーを押します。寸法を変えたい時は、width プロパティ、または height プロパティ、枠線を変えたい時は border プロパティを変更します。
また、画像の位置を変えたい時は、画像をマウスでドラッグすれば移動させることができます。

トップページに貼り付けた画像をセンタリングするでセンタリングして、とりあえず完成です。
画像を貼り付けたトップページ

ツールチップと代替テキスト
ツールチップは<img>要素の title プロパティ、代替テキストは alt プロパティです。Internet Explorer では、画像にマウスをあてた時に、ツールチップとして alt プロパティが表示されるので title プロパティは不要です。Mozilla ブラウザでは title プロパティを省略すると、マウスをあてても何も表示されません。また、title プロパティは、画像だけではなく、文字列にも使うことができます。

マウスをあててみて → 犬も歩けば
<span title=" 棒にあたる">犬も歩けば</span>
マウスをあててみて → Prev
<a href="8text.html" title="前のページに戻ります。">Prev</a>
※CSS のプロパティは関係ないので省略しています。

Home / Index / Prev / PageTop / Next
© 超初心者のためのホームペー ジ作成講座