その４ 画像を加えて仕上げる（１）
仲 晃生
青空文庫のファイルを素材に、「T-Time」で読めるシンプルな
オリジナル電子本を作る基本テクニックを紹介します。
今回はベーシック講座の仕上げ編の前半。
| 紙の本の場合、どんな紙を使うかで印象は大きく変わります。 電子本もまた然り。背景画像を工夫することで、ひと味もふた味も違った仕上がりが楽しめます。しかも、すべてがデジタルな作業なので、あれこれ贅沢に試してみても、予算も手間も、紙の本とは天と地ほどに大違い！ カラフルな背景や自作の挿し絵をふんだんに使えるのが、電子ルリユールの醍醐味でもあるのです。 今回と次回は２回に渡って、画像の活用法を説明します。 まずは初級編として、最もシンプルな使い方から始めましょう。 ４−１．背景画像を使ってみよう 最初に、画像を作ります。JPEG形式で仕上げてください。 あるいは、著作権フリーの画像を使っても良いでしょう。 ここでは、「haikei.jpg」という画像を使います。 これを、制作中のファイル「bocchan.txt」と同じ階層に入れておきます。 次に、冒頭の </HEAD> 直後のタグを書き換え、背景画像を指定してみましょう。 -------------------------- </HEAD> <BODY> -------------------------- の <BODY> に、次のように書き足します。 -------------------------- </HEAD> <BODY BACKGROUND="haikei.jpg"> -------------------------- さらに、末尾の、 -------------------------- </BODY> </HTML> -------------------------- を -------------------------- </BODY BACKGROUND> </HTML> -------------------------- とします。 これで、背景がすべて変更されました。（＊gazo-21.jpg、gazo-22.jpg 参照） ４−２．挿し絵を使ってみよう ここでは、「madonna1.jpg」と「madonna2.jpg」いう２つの挿し絵画像を使ってみます。 これら使う画像はやはり、制作中のファイル「bocchan.txt」と同じ階層に入れておきます。 次に、タグを書き換え、挿し絵を挿入してみます。 画像指定の基本タグは <t-img src="..."> で、この "..." の部分に、表示したい画像の名前を入れます。 第１章第２段落の、「切り<t-R>込（こ）んだ。」と「<t-R>幸（さいわい）ナイフが」の間に、次のようにタグを書き込んでみます。 -------------------------- 親類のものから西洋製のナイフを<t-R>貰（もら）って<t-R>奇麗（き<!>れい）な<t-R>刃（は）を日に<t-R>翳（かざ）して、<t-R>友達（とも<!>だち）に見せていたら、一人が光る事は光るが切れそうもないと云った。切れぬ事があるか、何でも切ってみせると受け合った。そんなら君の指を切ってみろと注文したから、何だ指ぐらいこの通りだと右の手の親指の<t-R>甲（こう）をはすに切り<t-R>込（こ）んだ。<t-img src="madonna1.jpg"><t-R>幸（さいわい）ナイフが小さいのと、親指の骨が<t-R>堅（かた）かったので、今だに親指は手に付いている。しかし<t-R>創痕（きず<!>あと）は死ぬまで消えぬ。<BR> -------------------------- （＊gazo-23.jpg、gazo-24.jpg 参照） これだとちょっとかっこ悪いので、画像指定のタグを次のように書き換えてみましょう。 -------------------------- <t-img src="madonna1.jpg" width=300 height=256 hspace=10 vspace=20 x=20 y=25 a=1 o=1> -------------------------- （＊gazo-25.jpg 参照） タグがあるページの、タグで指定した位置に画像が表示されました。 １）t-img src="..." の "..." の部分に、表示したい画像の名前を書きます。 ２）height=... は、画像の高さをピクセル数で表したものです。ページの高さを基準に比率で表す時は、height=40% のように書きます。 画像の幅を指示する場合は、width=n% または width=n とします（n は任意の数字）。 ３）hspace=10 は、画像と文字間に水平方向の余白を 10ピクセル開けるという意味です。vspace=20 は、画像と文字間の垂直方向の余白が 20ピクセルという意味です。 ４）x=20 y=25 a=1 は、ページの中の画像の位置を指定しています。 a= で示される原点（＊ichi.jpg 参照）から、右方向に m ピクセル、下方向に n ピクセル離れた位置に表示したい場合、x=m y=n と指定します（マイナス数値の指定もできます）。 a= の後には 0 から 8 までの数字が入り、それぞれ次の位置を示します。 a=0：ページのド真ん中 a=1：ページの左肩。指定がないときはココ a=2：ページの上中央 a=3：ページの右肩 a=4：ページの右中央 a=5：ページの右下 a=6：ページの下中央 a=7：ページの左下 a=8：ページの左中央 ５）o=1 の「o」はアルファベットのオーです。o=1 と指定しないと、画像の上に本文テキストが上書きされてしまいます。これはつまり、背景画像として使う場合はこの指定をしなければ良いということでもあります。 |
目次へ