〜マンガの為のHTML入門〜

Step7.2:コピーしたHTMLの意味を理解して使いこなそう！

前Stepでコピーして貼り付けたタグはいわゆる雛型です。
これを、実際に貴方のHPの1ページとして使うには
下の赤文字の部分を貴方のHP使用に替える事で
その役割をはたすことができる様になる訳です。

その為、最低限
赤文字部分がどういう意味を持っているのかだけは
知っておかなければ成らない訳です。

<html>
<head>
<title> ABC</title></head>
<body bgcolor= "#cccccc">

<center>
<font size="3">
<a href= "ABC-xxx-000.htm">戻る</a><BR>

<img src= "ABC-000-001.jpg"><BR> -1-<BR><BR>
<img src= "ABC-002-003.jpg"><BR> -2〜3-<BR><BR>
<img src= "ABC-004-005.jpg"><BR> -4〜5-<BR><BR>
<img src= "ABC-006-007.jpg"><BR> -6〜7-<BR><BR>
<img src= "ABC-008-009.jpg"><BR> -8〜9-<BR><BR>
<img src= "ABC-010-011.jpg"><BR> -10〜11-<BR><BR>
<img src= "ABC-012-013.jpg"><BR> -12〜13-<BR><BR>
<img src= "ABC-014-015.jpg"><BR> -14〜15-<BR><BR>
<img src= "ABC-016-xxx.jpg"><BR> -16-<BR><BR>

<font size="5">
<a href= "ABC-017-032.htm">次へ</a><BR>
</font><BR>
<a href="index.htm">TOPへ戻る</a>
</center>
</font>


ご存知の方も多いでしょうが、HTMLというのは
“タグ”と呼ばれる『<』と『>』というカッコの間に 書き込んだ、
決められた命令をPCが実行すると言う仕組みのブラウザのプログラムです。

例えば、“ABC”と言うタイトルのマンガのHPを作るとしましょう。
そこで貴方は“ABC”の文字をタイトルらしく目立たせたいと考えたとします。
*ここで言う｢タイトル｣は文字通りの題名です。ブラウザ上部のタイトルバー内の文字ではありません。

<html>
<head>
<title>？？？？<title>
<body>


</body>
</html> 		文字のサイズや色を替えるのには
幾つかの方法がありますが
もっとも一般的なのが、“font”
(“ﾌｫﾝﾄ”と読む。文字とか書式という意味)
というタグを使う方法です。

そこで、まず白紙のHTMLのファイルのソース
(左記の状態)を開きます。

<html>
<head>
<title>？？？？<title>
<body>
<font>

</font>
</body>
</html> 		そして“font”と言う文字を半角英数字で２つ打ち込み、
前(上)に書いた“font”は『<』と『>』で囲み、
後(下)に書いた“font”は『』で囲みます

前(上)に書いたのが
『ここから“font”の指定が始ります！』というタグ。
後(下)に書いたのが
『さっきの“font”の指定はここで終わり！』というタグです。

そして、その２つの“font”の間に
色やサイズを替えたい文字を書き込こみます。
いまは仮に作品のタイトルを“ABC”としておきましょう。
<html>
<head>
<title>？？？？<title>
<body>
<font>
ABC
</font>
</body>
</html> 		最初(上)の“font”の後ろ(カッコの中)に、
半角スペースを入れてから
色の場合は『color="〜〜"』
(〜〜には色を指定する英数字、もしくは規定の文字が入る)
サイズの場合は『size="…"』
(…には１〜７までの数字が入ります。１が最小。７が最大。)
と指定する訳です。

例えば文字色は地球にやさしい(？)“緑”！
サイズは最大の“７”！
とすると…
<html>
<head>
<title>？？？？<title>
<body>
<font color="green" size="7" >
ABC
</font>
</body>
</html> 		(左参)…で、これをブラウザ上で見ると
ABC
…となる訳です。
『なんか、今ひとつ味気ないなぁ〜』
そう見えたら文字を斜体(斜めに少し傾いた字体)に
するのも良いでしょう。
使うタグは<i>と</i>。
使い方は“font”と同じ。
斜体にしたい文字を<i>と</i>で
挟み込む形に打ち込めばOK。
つまり…
<html>
<head>
<title>？？？？<title>
<body>
<font color="green" size="7" >
<i> ABC </i>
</font>
</body>
</html>
(左参)…という様にね。

…でもって、これがブラウザ上では、

ABC
…となる訳です。

どうかな？すこぉ〜しは、HTMLの仕組みが理解できたかな？
ここで注意するべきなのが
『<』と『>』(つまりタグ記号)の間にある文字や記号は
一箇所でも違うと表示が上手くいかないということです。
「スペルを間違える」というの以外にも
「半角スペースが足りない」とか「間違って全角で入力してる」とかが
結構あるミスなんで注意してくださいね。


さて、ここまでの基本を踏まえた上で
いよいよコピーしたマンガ用のHTMLファイル〔雛型〕を
貴方のHP用に書き換える作業です！


〜HTMLとブラウザ画面の相関関係図〜

〜HTML解説図〜

変更が必要な部分の大まかな解説図です。
上の相関図とあわせて見ると
HTMLファイルに書かれた物が
おおよそ何処をどう処理して
HPのああいう画面になっているかを
だいたいのイメージ(印象)としてつかんで下さい。

それが頭の中にあると、その下の“詳細説明”が
少しは理解しやすくなると思いますので…。


〜詳細説明〜

<html>
<head>
<title> ABC</title></head>
<body bgcolor= "#cccccc">

<center>
<font size="3">
<a href= "ABC-xxx-000.htm">戻る</a><BR>

<img src= "ABC-000-001.jpg"><BR> -1-<BR><BR>
<img src= "ABC-002-003.jpg"><BR> -2〜3-<BR><BR>
<img src= "ABC-004-005.jpg"><BR> -4〜5-<BR><BR>
<img src= "ABC-006-007.jpg"><BR> -6〜7-<BR><BR>
<img src= "ABC-008-009.jpg"><BR> -8〜9-<BR><BR>
<img src= "ABC-010-011.jpg"><BR> -10〜11-<BR><BR>
<img src= "ABC-012-013.jpg"><BR> -12〜13-<BR><BR>
<img src= "ABC-014-015.jpg"><BR> -14〜15-<BR><BR>
<img src= "ABC-016-xxx.jpg"><BR> -16-<BR><BR>

<font size="5">
<a href= "ABC-017-032.htm">次へ</a><BR>
</font><BR>
<a href="index.htm">TOPへ戻る</a>
</center>
</font>
ここではコピーしたHTMLタグについて
漫画のHP制作に最低限の説明だけをします。

左のタグの中の 赤い文字 になってる部分が、
ページによって書き換えなければならない部分です。
言い換えると、そこ以外は触る必要はありません。
*勿論、自分でオリジナルのページを改造する場合は別ですが…。
…で、まずは
上から3行目の <title> ･･････ </title>です。
これは前のStepでも説明した通り、
ブラウザ上部のタイトルバー内に表示される文字を
書き込む場所です。
ここでは取りあえず“ABC”とだけしか
書き込んでありませんが、
長編作品の場合は“ABC/001”とページ数を書くとか
“ABC/#01”と話数を書くとかしても良いでしょう。
次に上から8行目(空行含)の
<a href= "ABC-000.htm">
これは前のページに戻るリンク
(クリックしてページ移動する時のボタン部分)です。
このページの前後のページのファイル名を 拡張子の“.htm”まで含めて書き込んで下さい。
<img src= "ABC-000-001.jpg"><BR> -1-<BR><BR>
<img src= "ABC-002-003.jpg"><BR> -2〜3-<BR><BR>
<img src= "ABC-004-005.jpg"><BR> -4〜5-<BR><BR>
<img src= "ABC-006-007.jpg"><BR> -6〜7-<BR><BR>
<img src= "ABC-008-009.jpg"><BR> -8〜9-<BR><BR>
<img src= "ABC-010-011.jpg"><BR> -10〜11-<BR><BR>
<img src= "ABC-012-013.jpg"><BR> -12〜13-<BR><BR>
<img src= "ABC-014-015.jpg"><BR> -14〜15-<BR><BR>
<img src= "ABC-016-xxx.jpg"><BR> -16-<BR><BR>

ズラリと並んだこの部分は
<img src= "･･･.jpg">
というのが連続しています。
これがこのページのイメージファイル
(つまり“絵”“原稿”のデータファイル)
を指定する場所です。
ここはHP上の1ページに原稿数ページ分を載せる
というスタイルなので、
そのページ数分ファイル名がある訳です。
ちなみに
ここでは.jpg(“ジェイペグ”と読む)形式の拡張子
(ファイル名の最後の『.(ドット)』以下の
末尾の部分を拡張子と呼ぶ。
これによってPCが、そのファイルの種類を
確認・識別する重要な記号文字)
を使っているが、.gif(“ジフ”と読む)の形式の
ファイルを使う人は.jpgを.gifと
書き換えておくと良いでしょう。

イメージファイル名の右に付いている
-1-・ -2〜3-・ -4〜5-･･･… -14〜15-・ -16-
はノンブル(ページ数表記)です。


さて既にお気付きかも知れませんが
この雛型は“ABC”というタイトルの作品の
1ページ目から16ページ目までを載せているページ
という設定です。
*これは週刊誌サイズの1話分を16ページとして考えての数字で深い意味はありません。
個々の作品や好みによって自由に変えてください。

従って、このページの イメージファイル名は
1ページ目分の “ABC-000-001.jpg”から
順に2＆3ページ目分の “ABC-002-003.jpg”
4＆5ページ目分の “ABC-004-005.jpg”
と続いて行き、
最後が16ページ目分の "ABC-016-xxx.jpg"となっています。
(HP上の)前のページのHTMLファイル名は “ABC-xxx-000.htm”
(HP上の)次のページのHTMLファイル名は "ABC-017-032.htm"
としています。

例えばこれを『桃太郎VS金太郎』という作品の第３話
33ページ目〜48ページ目の16ページ分にするとしましょう。
その場合、まず各ファイルを作るときにファイル名を
例えば“桃太郎“の頭文字『ｍ』と
“金太郎”の頭文字『ｋ』
それに“VS”の『ｖ』を入れて
“mvk-…”とし、各ページに応じた数字を
「…」部に書き込んでおきます。
作品全体のファイル名をそれで統一した上で
33＆34ページ目ならば
イメージファイル名は "mvk-033-034.jpg"
(*GIFの場合は "mvk-033-034.gif")

以下 35＆36ページ目ならば
イメージファイル名は "mvk-035-036.jpg"
(*GIFの場合は "mvk-035-036.gif")

37＆38ページ目ならば
イメージファイル名は "mvk-037-038.jpg"
(*GIFの場合は "mvk-037-038.gif")
･･･と数字部を対応した数にを変えてゆく訳です。

前ページのHTMLファイル名は
(HP上の前のページは第2話になるので『一話分＝16ページ』のページ数とすると17〜32ページとなるので)
"mvk-017-032.htm"
次ページのHTMLファイル名は
(HP上の前のページは第2話になるので『一話分＝16ページ』のページ数とすると46〜64ページとなるので)
"mvk-049-064.htm"
となる訳です。


*イメージファイルを使った背景指定

いまこの文字の背景はカラフルな縦じま模様になってると思います。 上に書いた『色指定』では、この文字の背景の様に一面単色にしかなりません。 この縞模様は右の様な小さな絵をイメージファイルにしておいて、それを背景としてタグ指定する事で表現されています。 　　　　

つまりこれがイメージファイルを使った背景ということです。
これを利用すると･･･
こういうことや…






こういうことも出来る様になる訳です！








やり方は下記の緑色の文字 “bgcolor”を “background” に変更し、
その後ろの「〜＝ "………"」の ………部分に貼り付けたい背景の
イメージファイル名を打ち込めばOK。


<html>
<head>
<title> ABC</title></head>
<body bgcolor= "#cccccc">

<center>
<font size="3">
<a href= "ABC-xxx-000.htm">戻る</a><BR>

<img src= "ABC-000-001.jpg"><BR> -1-<BR><BR>
<img src= "ABC-002-003.jpg"><BR> -2〜3-<BR><BR>
<img src= "ABC-004-005.jpg"><BR> -4〜5-<BR><BR>
<img src= "ABC-006-007.jpg"><BR> -6〜7-<BR><BR>
<img src= "ABC-008-009.jpg"><BR> -8〜9-<BR><BR>
<img src= "ABC-010-011.jpg"><BR> -10〜11-<BR><BR>
<img src= "ABC-012-013.jpg"><BR> -12〜13-<BR><BR>
<img src= "ABC-014-015.jpg"><BR> -14〜15-<BR><BR>
<img src= "ABC-016-xxx.jpg"><BR> -16-<BR><BR>

<font size="5">
<a href= "ABC-017-032.htm">次へ</a><BR>
</font><BR>
<a href="index.htm">TOPへ戻る</a>
</center>
</font>


(ただし当たり前ですけど
当然、同じフォルダー内に必要なイメージファイルを
入れておかないと駄目ですよ。詳しくはstep8以降で…)


*ただ、マンガのHPにおいては下図の様に
あまり背景が目立ってしまうのも考え物ですのです。
注意してくださいね！




Step8.0へ

なお各ステップにおいて解らない点がありましたら
ここをクリックして
“まんが浪人の掲示板”
に質問を書き込んで置いてください。

*回答はも“まんが浪人の掲示板”にて発表いたします。
ただし、解る範囲でしかお答えできませんので、
その点は理解していただき、ご容赦ください。
また回答には数日〜十数日以上かかる場合があります。

 Step0.1(INDEX)に戻る