画像のページ


まずは画像ページを作る時の注意点などを少し。




画像ファイルの種類
 HPのアップ先はURLと呼びます。




 例えばここは
 http://jyusendo.com/ichigoichie/hp/hp3-page.html
 これをアドレスに打ち込んでやれば、ここがそのまま表示されます。


 http://jyusendo.com/
 これは「呪泉洞」のTOPアドレスです。


以下
 「ichigoichie」フォルダの中の「hp」フォルダの中にあるhp3-page.htmlファイル。
 アップ先の住所みたいなものですね。
 実は最初、この意味すら私にはわかっていませんでした。そのくらい「ど素人」だったのです(笑


 「htmlファイル」はHPの基礎部分です。文章などは、概ねこの形式で作っています。
 それに画像参照のタグを持ってくることで、画像を表示させます。
 基盤となる「htmlファイル」に画像ファイルが乗ってくるといった感じでしょうか。
(中には末尾が「htm」や「shtml」といったファイルを使用しているページもありますが。)


 各ファイルは作る時にそれぞれ「拡張子」と呼ばれる、末尾のファイルの形式を現す言葉がくっついてきます。
 各ファイルは「.html」「.jpg」「.gif」「.png」というふうに、拡張子の前に「.」(ドット)がついています。
 この拡張子を見ればだいたい何のファイルかわかるのです。
 投稿をいただくときは、この拡張子を見る作業はかなり有効になります。
 例えば、拡張子が「doc」や「exe」といったファイルにウイルスが潜んでいることが多いので、メールで乗ってきたら開かずに速攻削除するなど・・・。
(たまに画像ファイルに偽装して添付されてくる場合もあるので、ウイルススキャンは必要だと思いますが。)




  HPに掲載される代表的な画像のファイル形式は
 「JPG形式(拡張子がjpgの画像ファイル)」
 「GIF形式(拡張子がgifの画像ファイル)」
 「PNG形式(拡張子がpngの画像ファイル)」この三つでしょう。
 勿論、他にもありますが、だいたいこの三つの形式を使う場合が多いです。


 
画像ページの実際

 画像容量が大きくなるとどうしてもリロードに時間がかかります。
 八秒ルールというのがWEBには存在していると、昔聞いたことがあります。八秒までなら待てるが、それ以上は待てない。というのが、訪問者の心理なのだそうで。
 折角のイラストも重くなりすぎれば表示にイライラさせてしまい、閉じられてしまうかもしれません。
 扱う画像サイズはできるだけ容量が小さい方が理想的です。
 画像容量の落とし方は、ソフトを使って画像のサイズを縮小したり、解析度を下げたりといろいろあると思います。

 2010年代に入って、画期的に技術も発達して、昨今では昔ほど、重い…開かん…という現象はなくなりました(笑


 HPに掲載できる代表的な画像のファイル形式は「JPG形式(拡張子がjpgの画像ファイル)」、「GIF形式(拡張子がgifの画像ファイル)」、「PNG形式(拡張子がjpngの画像ファイル)」この三つでしょう。
 画像投稿の時にもできるだけ容量をさげたものをやり取りしてください。
 投稿を頂いて嬉しいのですが、大きすぎるとメールから取り込むのに物凄い時間がかかってしまいます。
 間違っても「BMP形式(拡張子がbmpの画像ファイル)を送りつけるなどという不失敬なまねはしないようにしてくださいませ。


 また使った画像にはaltタグで画像の説明文を入れておくのが親切だそうです。
 マウスを置くと出てくる「あれ」です。


同人誌で使った絵のラフスケッチ


 中には画像表示を切ってアクセスしている方がいらっしゃるそうなので、説明文があると良いのだそうです。
 まあ、最近はそんな方もいらっしゃらないでしょうが…。

画像のチェック
 
 画像ページを作る時の注意点は、しっかり画像が見えているかどうか。これにつきます。


 よくこんなのを見かけませんか?
 見えないよ(笑

 上の画像は見えないですね(笑
 画像のリンクタグが間違っているのでバッテンが付いて見えません。


 表示されない要因には二つ考えられると思います。


 ひとつは、サーバーに画像がサーバーにアップロードされていないことです。
 HTMLファイルは上がっているが、画像ファイルが上がっていない場合です。
 この場合は、FTPを立ち上げて、表示させたい画像ファイルがあるかどうか確認してくださいませ。
 画像があった場合、ちゃんと掲載予定の画像ファイル名とアップ先の画像ファイル名が一致しているかどうかも調べてください。まれに、画像ファイルに使っているファイル名が「全角英数字」が入っているとか、ファイル名が違っているなどで見えないこともありますので、そこまでチェックしてみてくださいね。


 もうひとつは、画像ファイルへのリンクミスです。

実は上の場合は
IMG src="image.jpg(画像ファイル名)"
 と書かなければならないタグをIMG src=”file:///C:/image.jpg(画像ファイル名)”
 と書いてしまっているのです。
 file:///C:/部分が余分、つまりこれはパソコン内のアドレスなわけで。自分で編集したテキストエディタでは画像が表示できるのに、WEBでは表示できないという現象の多くは、パソコン内のアドレスが張り付いた結果が多いです。
 最初の頃は私もこういう失敗が多かったです。
 画像がなんで表示されないの?どうして?・・・というような(笑


乱馬とあかね
 これが正しい表示のイラストです。


 サイトを作ってアップしてみたら、慣れるまでは、自分のパソコンだけではなく、お友達や外のパソコン、スマフォからチェックしてみるのもいいかもしれません。
 はがれている画像を良く見かけますが、頻繁だと不細工です。
 自分のパソコンでははっきり見えていても、お友達のパソコンからは見えない・・・ってことがあったら、パソコン内へのタグになっていることを疑ってみてくださいませ。




 画像ページを作る時のアドバイスですが、ファイル名をできるだけ、母体になる「HTMLファイル名」と同じにするように心がけておくとFTPで管理がしやすいです。
 また同一ページ内に同じファイル名で保存すると、前の画像へ上書きされるので要注意!
 これを逆手にとって、私はTOPページやメニューページに置く画像のファイル名を固定しています。
 例えば「top.jpg」というように。こうするとアップした時に自動的に古い画像へ上書きされるので、削除し忘れがないからです。画像ファイルは一つ一つの容量を食うので削除し忘れると、容量の無駄遣い、ちりも積もれば山となります(笑
 ただ、たまにはファイル名を変えておかれることもお勧めします。後でお話しますが「直リンク」されてしまう場合があるからです。


 また、必ず画像タグには縦横の大きさの表示(ピクセル数)を忘れずに。これがないと、大きさがはっきりせず、リロードにやたら時間がかかることがあるそうです。
 上の画像をソースで覗くと大きさの表示部分が見えると思います。width=横サイズでheight=縦サイズをあらわしています。
 特に同じファイル名に上書するときはファイルの大きさに合わせて書き換えておかないと、下手をすると前のファイルの大きさの中に表示されてしまいます。(HP作成ソフトを使えば、自動的に大きさも変換してくれますが、手打ちの方は忘れずに。)
 実例がこちら(笑・・・何か変。


 変なの(笑