Macでのwebsite作りー画像の挿入.jpg

質問

初めまして。このサイトで”Macでホームページを作る”というのをみて、ホームページ作りに挑んでおります。なんとかテキストは打ち込めるようになったのですが、どうしても画像(.jpg)がホームページ上に反映されません。使っているOSは、Mac10.4.11.テキストはTextEditやCotEditorでファイルを作り、それをSafariでプロバイダー上のホームページにアップロードしております。
タグなどはきちんといれているつもりです。アップロードした.jpgファイル画像は、ホームページ上では？マーク付きで表示され、画像が映りません。どなたか、ご教授頂ける方御指南頂ければ幸いです。

回答No.7

neorg

>サイトを開いた時にも正しく画像がみえるようになりました。
そのアドレスをsrc=""のところに入れてください
あと、a href=""　のところにもいれてください。
画像をクリックしたときa hrefのアドレスにジャンプします。

<a href="クリックしたときにジャンプしたいhttp://からabc.jpgまでのアドレス全部">
<img src="http://からabc.jpgなどの画像のアドレス全部" border="0">
</a>

(↑絶対アドレス)

http://masaboo.cside.com/new_html1/ht_67.htm
ここのが絶対・相対がわかりやすいとおもいます。

http://www.tagindex.com/html_tag/img/index.html
タグの説明が載ってます。

http://www.htmq.com/html/a.shtml

http://www.tagindex.com/html_tag/img/img.html

回答No.6

harawo

＞ 良い解決法というのは、.jpgの前に画像の名前を入れるだけでこの画像がウエブサイト上できちんと表示されるようになる事と理解してよい訳ですよね？

そうです。相対パスで記述したほうが、「賢い」方法だということを、いいたかったのです。

＞ 私、初めてのコンピューターからマックしか触った事がな＞く、"Directly"という概念にあまり通じておりません。

フォルダ＝ディレクトリ（Directory）です。むしろ難しく考えないで、シンプルに理解すべきところです。

＞ マックの場合よく有るのですが、マック版のイラストレーターで作った画像をjpg fileに納めてもウィンドウズ機でその画像を開く事ができないと

No.3で、FTPクライアントソフトで、アップロードしてはどうかとアドバイスしたのは、その点です。じゃまなものを含まずにアップロードするので、そういう心配がなくなります。

どうしても相対パスの記述で失敗するなら、ウェブサーバの管理者に問い合わせてください。セキュリティ上の、なんらかの制限があるのかもしれません。もっとも、そんな制限をしているサーバなら、さっさと解約して、ほかを探すべきですが。

お礼

最初からやり直してみました。そして妙な結果が出ました。実は、２つのサーバー（有料の物と無料の物）を借りて同時に似たようなサイトを作ってみています。そして、有料サーバーの方では、”画像の名前.jpg”のタグだけでサイト上に画像が正しく表示出来るようになりました。（http://oryza.chicappa.jp/）画像名の中の大文字と小文字を一部混同していたのが原因かも知れません。

ただ、無料サイトの方（http://oryzadesign.web.fc2.com/）ではどうしても画像の名前.jpgでは、正しく画像が出て来ません。絶対パスを使ったURLで同ファイルを指定した時のみ画像がサイト上に現れます。タグの編集ソフトがとても使いやすいサーバーなのですが、、、。

きちんとしたウェブサイトを立ち上げたいと思っていますので、引き続きこの点も含めてトライして行きます。初めてのサイト作りに入ってまだ、３日目なので、ちょっと頑張って勉強して行きます。

回答No.5

harawo

＞ この解決法で良いのでしょうか？

解決していますが、「いい」解決法ではありません。
HTMLにおけるファイルパス（ファイルの住所）の記述には、絶対パスと、相対パスという、2種類の方法があります。
絶対パスは、ボリューム（ディスク）先頭から、ディレクトリ（フォルダ）を順に並べていくもの。「/myhobby/fishing/herabuna.html」。このようにボリューム先頭（ルート）を「/」にして、スラッシュで、ディレクトリ名を区切って、記述します。絶対パスにドメインを付けたものが、いわゆるURLです。「http://www.homepage.com/myhobby/fishing/herabuna.html」。こうなります。絶対パスの利点は、記述したHTMLファイルを、どこに移動しても、かならず参照したファイルを指定できる点です。
相対パスは、記述するHTMLファイルの位置を、起点としたパスです。記述するHTMLファイル、hogehoge.htmlと、同じディレクトリにあるimage.jpgは、「image.jpg」と記述するだけで、パスとなります。ひとつ下のディレクトリ「images」に、image.jpgがあるなら、「images/image.jpg」となります。ひとつ上のディレクトリに、image.jpgがある場合、ピリオドを使って、「../image.jpg」と記述します。相対パスの利点は、相対的な位置関係が変わらなければ、どこに移動しても、パスを変更しなくてもいい点です。

以上、ファイルパスに関する、基本的な説明をしましたが、心当たりは見つかりませんでしたか？

お礼

harawo様
御提言有り難うございます。私、初めてのコンピューターからマックしか触った事がなく、"Directly"という概念にあまり通じておりません。今、アップしているサイトでも"Directly"の指示が会ったりするのですが、良く理解出来ないまま、取りあえず、マテリアルをサーバーにアップロードしてなんか、切り貼りをしている状態です。頂いた２つの返答をもう一度、最初からやり直してみます。

良い解決法というのは、.jpgの前に画像の名前を入れるだけでこの画像がウエブサイト上できちんと表示されるようになる事と理解してよい訳ですよね？また。その為には、この画像がhtmlに置ける絶対パスの概念にし従って順を追って配置されていれば良いという事ですよね？ちなみにこの画像とは、マック版Adobe Illustratorで書いたデッサンをjpgフォーマットで保存した物です。マックの場合よく有るのですが、マック版のイラストレーターで作った画像をjpg fileに納めてもウィンドウズ機でその画像を開く事ができないと、、。当初はそんないつものトラブルなのかと思っていたのですが。

もう一度、やり直してみます。何処がいけないのか良くわからないのではあるのですが、、、。

回答No.4

noname#242220

画像タグは以下で
<img src="xx.jpg" width="204" height="43" border="0">
アップロードするファイル名は『xx.jpg』に成ります。
TextEditで作成している時は単純にサファリへドラックして確認してます。

回答No.3

harawo

直接の回答ではありませんが、じぶんでバグ（不具合）を発見するための、スピーディな方法を書きます。いちいちサーバにアップロードせずにすむぶん、修正作業を時間短縮できます。

ホームフォルダの「サイト（Sites）」フォルダを開きます。すでにファイルが存在しますが、すべて削除します。あなたが作成したウェブコンテンツをそこに移動します。
システム環境設定＞共有で、「Web 共有」にチェックを入れて、開始します。
Safariなどのウェブブラウザを起動し、「http://127.0.0.1/~(user name)/」と入力し、続けて開きたいHTML書類のファイル名を入力してリターンキーを押します。（http://localhost/~……でも可）

＞ それをSafariでプロバイダー上のホームページにアップロードしております。

お使いのプロバイダが、FTPによるアップロードを許可しているなら、ウェブブラウザではなく、FTPクライアントソフトを使って、アップロードしてみてください。
Cyberduck（http://mac.egoism.jp/nu/item/760）
定番のFTPクライアントソフトです。

基本中の基本ですが、ファイル名、フォルダ名には、かならず半角英数字のみ使用してください。（ハイフン（-）、アンダーバー（_）は使用可）

お礼

harawo様

御丁寧な回答有り難うございます。私、日本と７時間の時差のあるフランスに居りましてご返信が送れました事をまずお詫び申し上げます。

問題は、下記の方法で解決（？）した感じです。ただ、これが正しい方法なのかどうかわからず、更にアドバイスを頂ければ幸い存じます。

ー.htmlファイルでテキストをつくって、その中に画像挿入タグ<img src="画像ファイルの名前.jpg" border="0">をいれる。
ー画像(.jpgファイル）をサーバーにアップする
＊＊これでは、サイトを開いた時画像は？のままで正しく見えませんでした＊＊
そして、画像挿入タグの”画像ファイルの名前.jpg"を画像の置かれているサーバー上のURLを入れたとこと、サイトを開いた時にも正しく画像がみえるようになりました。

この解決法で良いのでしょうか？参考にしているホームページ作成の指南書では、”画像ファイルの名前”をいれるとなっているのです。

素人質問で本当に済みません。宜しくお願い致します。

回答No.2

DAV

サーバーにアップロードされたページにアクセスして、Safariのウインドウから「構成ファイル一覧」を開いてjpgファイルのアドレスを確認してimgsrcタグに入れて下さい。

Safariのキャッシュに残っている画像を追加する前のデータ＝が表示されている可能性もありますので、メニューバーのSafariから「キャッシュを空にする」を実行して、（キャッシュからでなくサーバー直のデーターを）表示してみてください。

お礼

DAV様

御丁寧な回答有り難うございます。私、日本と７時間の時差のあるフランスに居りましてご返信が送れました事をまずお詫び申し上げます。

問題は、下記の方法で解決（？）した感じです。ただ、これが正しい方法なのかどうかわからず、更にアドバイスを頂ければ幸い存じます。

ー.htmlファイルでテキストをつくって、その中に画像挿入タグ<img src="画像ファイルの名前.jpg" border="0">をいれる。
ー画像(.jpgファイル）をサーバーにアップする
＊＊これでは、サイトを開いた時画像は？のままで正しく見えませんでした＊＊
そして、画像挿入タグの”画像ファイルの名前.jpg"を画像の置かれているサーバー上のURLを入れたとこと、サイトを開いた時にも正しく画像がみえるようになりました。

この解決法で良いのでしょうか？参考にしているホームページ作成の指南書では、”画像ファイルの名前”をいれるとなっているのです。

素人質問で本当に済みません。宜しくお願い致します。

回答No.1

neorg

jpgファイル画像のみは、表示されますか?

表示されるのなら
http://okwave.jp/qa2034053.html
を参考にアドレスをコピーして
img src="ここにいれる"

お礼

neorg様

御丁寧な回答有り難うございます。私、日本と７時間の時差のあるフランスに居りましてご返信が送れました事をまずお詫び申し上げます。

問題は、下記の方法で解決（？）した感じです。ただ、これが正しい方法なのかどうかわからず、更にアドバイスを頂ければ幸い存じます。

ー.htmlファイルでテキストをつくって、その中に画像挿入タグ<img src="画像ファイルの名前.jpg" border="0">をいれる。
ー画像(.jpgファイル）をサーバーにアップする
＊＊これでは、サイトを開いた時画像は？のままで正しく見えませんでした＊＊
そして、画像挿入タグの”画像ファイルの名前.jpg"を画像の置かれているサーバー上のURLを入れたとこと、サイトを開いた時にも正しく画像がみえるようになりました。

この解決法で良いのでしょうか？参考にしているホームページ作成の指南書では、”画像ファイルの名前”をいれるとなっているのです。

素人質問で本当に済みません。宜しくお願い致します。