9 写真の表示
9-1 写真の選定
ウエブページに掲載される写真やイラストは、文章の補足をしたり内容の理解を深めさせてくれます。あなたがつくるウエブページ「日本史の謎」に写真を掲載します。他人が撮影した写真や他人が写っている写真は著作権や肖像権があるので、あなたが撮影した風景写真などを利用するのが最善です。
あなたのパソコンに保管されている風景などが写ったデジタル写真(拡張子が「.jpg」の写真)を7枚選択し、その写真のコピーを「home」の「shasin」フォルダーに保管します。写真の縮小方法と掲載方法を覚えるのが目的ですから、写真の選択に時間をかけるのはやめましょう。
適当な写真が見つからない場合は、はげちゃんが撮影した写真を使います。下のリンクボタンをクリックすると7枚の写真が表示されます。説明を読んでからディスクトップにダウンロードしてください。
デジタル写真がない方 ⇒ 講座で使用する写真4
トップへ戻る
9-2 写真を保管する
ダウンロードした写真に名前をつけます。写真をポイントして右クリックし、「名前の変更」を選択します。写真の名前は次のように半角英数で入力してください。
・ 樽前山 を 03_01.jpg に変更。
・ 駒ヶ岳 を 03_02.jpg に変更。
・ 石狩川 を 03_03.jpg に変更。
・ 泥炭地 を 03_04.jpg に変更。
・ 湿地 を 03_05.jpg に変更。
・ 水田 を 03_06.jpg に変更。
・ 北海道産米 を 03_07.jpg に変更。
写真を7枚ともディスクトップへダウンロードし終わったら、マイドキュメント内に作成された「home」フォルダーをダブルクリックで開き、「shasin」フォルダーをダブルクリックで開きます。
「Ctrl」キーを押しながら7枚の写真を次々にクリックしてから、「Ctrl」キーを放して「shasin」フォルダー内へドラッグ&ドロップ(引きずり落と)します。ダイアログがでたときは「移動」をクリックしてください。
「home」の「shasin」フォルダー内に、「03_01.jpg、03_02.jpg、03_03.jpg、03_04.jpg、03_05.jpg、03_06.jpg、03_07.jpg」と半角英数で名前が付けられた写真が6枚保管されました。
トップへ戻る
9-3 写真の縮小
9-3-1 すべての写真
タスクバー左端の「スタート」をクリックして「よく使うアプリのスクロールバー」を下ろして、「Windousアクセサリ」内にある「ペイント」ソフトを起動させます。
ペイントソフトの上段メニューバー左端の「ファイル」をクリックして「ファイルを開く」を選択し、「home」の「shasin」をクリックして開きます。「shasin」フォルダーから「03_01.jpg」写真をクリックして「開く」を選択すると写真が読み込まれます。
メニューの左から二番目のグループにある「サイズの変更」をクリックすると「サイズ変更と傾斜」のダイアログが表示されます。サイズ変更の単位で「ピクセル」をクリックすると、水平方向「500」垂直方向「375」と表示されます。
中央部分にある「縦横比を維持する」にチェックが入っているのを確認してから「水平方向」の窓の数字「500」を「300」に修正します。垂直方向は自動的に「375」から「225」に変更されました。
「OK」をクリックすると縮小された写真が表示されます。メニューバー左端の「ファイル」をクリックして「上書き保存」をクリックすると、「shasin」の「03_01.jpg」の写真は縮小された状態で上書きされます(入れ替わります)。
同様に「03_02.jpg」「03_03.jpg」「03_04.jpg」「03_05.jpg」「03_06.jpg」「03_07.jpg」の写真も、水平方向「300」垂直方向「225」に縮小して上書き保存します。
トップへ戻る
9-3-2 写真に名前を入れる
タスクバー左端の「スタート」をクリックして「よく使うアプリのスクロールバー」を下ろして、「Windousアクセサリ」内にある「ペイント」ソフトを起動させます。
次に、ペイントソフトの上段メニューバー左端の「ファイル」をクリックして「ファイルを開く」を選択し、「home」の「shasin」をクリックで開きます。「shasin」フォルダーから「03_01.jpg」写真をクリックして「開く」を選択すると写真が読み込まれます。
上段の「ツール」で「A」をクリックしてから、写真上にカーソルを移動させて写真の森の中をクリックすると「長方形の点線枠」が表示されます。

かなで「たるまえ」と入力し、表示されるダイアログで「樽前山」をクリックします。ペイントソフトの上段にある「色」で「白色」をクリックしてから、「色2」の上の四角をクリックすると文字が白色になります。
「長方形の点線枠」上にカーソルを重ねて上下左右移動カーソルを表示させ、左クリックをしながら右下へ配置します。「ファイル」をクリックして開き、上書き保存を選択してペイントソフトを終了します。
再び、タスクバー左端の「スタート」をクリックして「よく使うアプリのスクロールバー」を下ろして、「Windousアクセサリ」内にある「ペイント」ソフトを起動させます。
先ほどと同様に、ペイントソフトの上段メニューバー左端の「ファイル」をクリックして「ファイルを開く」を選択し、「home」の「shasin」をクリックで開きます。「shasin」フォルダーから「03_02.jpg」写
真をクリックして「開く」を選択すると写真が読み込まれます。
上段の「ツール」で「A」をクリックしてから、写真上にカーソルを移動させて写真の森の中をクリックすると「長方形の点線枠」が表示されます。「駒ヶ岳」と入力し、ペイントソフトの上段にある「色」で「白色」をクリックしてから、「色2」の上の四角をクリックすると文字が白色になります。
「長方形の点線枠」上にカーソルを重ねて上下左右移動カーソルを表示させ、左クリックをしながら右下へ配置します。「ファイル」をクリックして開き、上書き保存を選択してペイントソフトを終了します。ペイントソフトで思うよな結果にならないときは、再起動させて何度も繰り返し操作してください。
トップへ戻る
9-4 写真の配置
9-4-1 文字入りの写真
文章の行間に写真を表示させます。「北海道の誕生」の3段目の最終部分、「北海道駒ケ岳は、1640年に噴出物総量4立方キロメートルの巨大規模噴火を起こし山頂が吹き飛ばされました。」の「</p>」の右側にカーソルを入れて、「Enter」キーを1回押します。
「img」タグに「9-3-2 写真に名前を入れる」のデータを入力すると次のようになります。データを入力したイメージタグを左クリックで選択してコピーします。写真と写真の間に全角のスペースを入れます。二行に見えますが一行です。
<p><img src="shasin/03_01.jpg" width="300" height="224"> <img src="shasin/03_02.jpg" width="300" height="224"></p>

エディタの「ソース」で先ほどカーソルを表示させた位置をもう一度クリックしてペーストし、「Enter」キーを1回押します。すると、行間に写真が2枚挿入されます。

メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。
トップへ戻る
9-4-2 文字なし写真2枚
文章の行間に写真を表示させます。「石狩平野の湿地帯」の1行目の最終部分、「川の蛇行が大きくなるとあふれ出た水は蛇行部分に近道をつくり、取り残された旧流路は三日月状の河跡湖となって残りました。」の「</p>」の右側にカーソルを入れて、「Enter」キーを押します。
「img」タグに「9-3-2 写真に名前を入れる」のデータを入力すると次のようになります。データを入力したイメージタグを左クリックで選択してコピーします。写真と写真の間に全角のスペースを入れます。二行に見えますが一行です。
<p><img src="shasin/03_03.jpg" width="300" height="225"> <img src="shasin/03_04.jpg" width="300" height="225"></p>

エディタの「ソース」で先ほどカーソルを表示させた位置をもう一度クリックしてペーストし、「Enter」キーを1回押します。すると、行間に写真が2枚挿入されます。

メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。
トップへ戻る
9-4-3 文字なしの写真
文章の行間に写真を表示させます。「泥炭層の誕生」の2段目の冒頭、「寒冷地の北海道では、湿地帯の植物などが枯れても酸素不足の状態で微生物などの活動が抑制されます。」の「<p>」の右側にカーソルを入れて、「Enter」キーを押します。
「img」タグに「9-3-2 写真に名前を入れる」のデータを入力すると次のようになります。データを入力したイメージタグを左クリックで選択してコピーします。
<img src="shasin/03_05.jpg" width="300" height="224" class="right">
2段目の冒頭、カーソルの「位置にペーストします。


写真を読み込むときは「img」タグを使います。「img」タグに、「写真の保管してある場所、写真の名前、写真の横幅、写真の縦幅、写真を表示しない設定者のために写真の簡単な説明、写真の表示する位置」などのデータを入力します。
メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。
トップへ戻る
9-4-4 写真文字なし2枚
文章の行間に写真を表示させます。「酒米には「吟風(ぎんぷう)」「彗星(すいせい)」「きたしずく」などがあり、全国的な日本酒コンクールでも続々受賞しています。」の「</p>」の右側にカーソルを入れて、「Enter」キーを2回押します。
「img」タグに「9-3-2 写真に名前を入れる」のデータを入力すると次のようになります。データを入力したイメージタグを左クリックで選択してコピーします。写真と写真の間に全角のスペースを入れます。
<p><img src="shasin/03_06.jpg" width="300" height="225"></p> <p><img src="shasin/03_07.jpg" width="300" height="225"></p>


エディタの「ソース」で先ほどカーソルを表示させた位置をもう一度クリックしてペーストし、「Enter」キーを1回押します。すると、行間に写真が2枚挿入されます。
メニューバーの「ファイル」から「上書き保存」を選択します。これを忘れると入力した内容は消えてしまいます。
トップへ戻る