Top
about ORCA
Users
download
FAQ
TOP ＞ Users ＞ ORCA教育用教材 ＞ 3-2.画像の挿入
3級 HTMLとORCA
画像の挿入
| no. | 学習内容 | 説明 |
|---|---|---|
| 3-2 | 設問文や選択肢に画像を挿入する | １）画像の挿入の準備（素材登録） |
| ２）設問文に画像を挿入する | ||
| ３）選択肢に画像を挿入する | ||
| ４）ストリーミングサーバなどに保存された画像を直接リンクで表示する |
１）画像挿入の準備
画像を追加するためには「素材」として登録する必要があります。準備としてこの調査で使う画像を追加しましょう。- メニューウィンドウの「ウィンドウ」メニューから「素材」を選択します。
- 素材を登録するウィンドウが表示されます。グレーの部分で右クリックをするとメニューが表示されます。
[追加]を選択します。
- ファイル参照のウィンドウが開きます。追加したい画像を選択して [開く] を押します。
- 素材ウィンドウに画像が追加されました。
- 複数ある場合は複数選択した状態で [開く] を押します。
- まとめて追加することができます。
２）設問文への画像挿入
- 画像を表示したい設問を開きます。ここでは1100.Qを開きます。
- [設問設定] > [文面設定] まで進みます。
- 画像を入れたいところで右クリックし、[HTMLタグの挿入] > [画像の挿入] を選択します。
- 素材として登録した画像の一覧が表示されます。表示したい画像を選択して、[OK] を押します。
- 設問文に画像のHTMLタグが追加されます。
- プレビューで確認すると、画像が表示されていることがわかります。
- 画像をもう少し小さくしたい場合は、横幅のサイズを指定します。
この例では横幅を200ピクセルに指定します。width=”200px”を追加します。
- プレビューで確認すると、画像が小さく表示されていることがわかります。
- 画像を設問文の中央に表示したい場合は、centerというHTMLタグで、画像を囲みます。
- プレビューで見ると画像が中央に表示されていることがわかります。
３）選択肢への画像挿入
- 画像を表示したい設問を開きます。ここでは1100.Qを開きます。
- [設問設定] > [文面設定] > [選択肢設定] まで進みます。
- 画像を入れたいところで右クリックし、[HTMLタグの挿入] > [画像の挿入] を選択します。
- 素材として登録した画像の一覧が表示されます。表示したい画像を選択して、[OK] を押します。
- 選択肢に画像のHTMLタグが追加されます。
- プレビューで確認すると、画像が表示されていることがわかります。
- 同様にそれぞれの選択肢に画像をいれてみましょう。
- 各社のロゴが表示されるようになりました。
 |
「画像の大きさを変えたい」「画像をクリックしたら大きいサイズの画像を表示したい」「文字のフォントを変えたい」「文字に背景をつけたい」などなど、これらはORCAではなくHTMLの技術です。 やりたいこと＋「HTML」で検索すると、やりたいことの説明ページがヒットするかもしれません。 分からない場合は、是非検索してみてください。 |
４）ストリーミングサーバなどに保存された画像の表示
素材に登録せずに別サーバの画像を表示する（直接リンク）設定をします。- 画像を挿入したい場所に、直接imgタグを入力します。
< img src=”ストリーミングサーバなどに保存された画像のURL” >
- このように素材に登録していなくても画像が表示されます。
 |
ストリーミングサーバなどの画像置き場から画像が削除された場合、サーバ契約が切れた場合など、リンク先が存在しなくなると画像は表示されなくなります。ご注意ください。 尚、他社サイトや他社の所有する画像に無許可でリンクを貼ることは先方のサーバに思わぬ負荷をかけ、不具合が起こりえるため、好ましくありません。 |
3-1へ