初めまして。このサイトで”Macでホームページを作る”というのをみて、ホームページ作りに挑んでおります。なんとかテキストは打ち込めるようになったのですが、どうしても画像(.jpg)がホームページ上に反映されません。使っているOSは、Mac10.4.11.テキストはTextEditやCotEditorでファイルを作り、それをSafariでプロバイダー上のホームページにアップロードしております。
タグなどはきちんといれているつもりです。アップロードした.jpgファイル画像は、ホームページ上では?マーク付きで表示され、画像が映りません。どなたか、ご教授頂ける方御指南頂ければ幸いです。
A 回答 (7件)
- 最新から表示
- 回答順に表示
No.7
- 回答日時:
>サイトを開いた時にも正しく画像がみえるようになりました。
そのアドレスを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
- 回答日時:
> 良い解決法というのは、.jpgの前に画像の名前を入れるだけでこの画像がウエブサイト上できちんと表示されるようになる事と理解してよい訳ですよね?
そうです。相対パスで記述したほうが、「賢い」方法だということを、いいたかったのです。
> 私、初めてのコンピューターからマックしか触った事がな>く、"Directly"という概念にあまり通じておりません。
フォルダ=ディレクトリ(Directory)です。むしろ難しく考えないで、シンプルに理解すべきところです。
> マックの場合よく有るのですが、マック版のイラストレーターで作った画像をjpg fileに納めてもウィンドウズ機でその画像を開く事ができないと
No.3で、FTPクライアントソフトで、アップロードしてはどうかとアドバイスしたのは、その点です。じゃまなものを含まずにアップロードするので、そういう心配がなくなります。
どうしても相対パスの記述で失敗するなら、ウェブサーバの管理者に問い合わせてください。セキュリティ上の、なんらかの制限があるのかもしれません。もっとも、そんな制限をしているサーバなら、さっさと解約して、ほかを探すべきですが。
最初からやり直してみました。そして妙な結果が出ました。実は、2つのサーバー(有料の物と無料の物)を借りて同時に似たようなサイトを作ってみています。そして、有料サーバーの方では、”画像の名前.jpg”のタグだけでサイト上に画像が正しく表示出来るようになりました。(http://oryza.chicappa.jp/)画像名の中の大文字と小文字を一部混同していたのが原因かも知れません。
ただ、無料サイトの方(http://oryzadesign.web.fc2.com/)ではどうしても画像の名前.jpgでは、正しく画像が出て来ません。絶対パスを使ったURLで同ファイルを指定した時のみ画像がサイト上に現れます。タグの編集ソフトがとても使いやすいサーバーなのですが、、、。
きちんとしたウェブサイトを立ち上げたいと思っていますので、引き続きこの点も含めてトライして行きます。初めてのサイト作りに入ってまだ、3日目なので、ちょっと頑張って勉強して行きます。
No.5
- 回答日時:
> この解決法で良いのでしょうか?
解決していますが、「いい」解決法ではありません。
HTMLにおけるファイルパス(ファイルの住所)の記述には、絶対パスと、相対パスという、2種類の方法があります。
絶対パスは、ボリューム(ディスク)先頭から、ディレクトリ(フォルダ)を順に並べていくもの。「/myhobby/fishing/herabuna.html」。このようにボリューム先頭(ルート)を「/」にして、スラッシュで、ディレクトリ名を区切って、記述します。絶対パスにドメインを付けたものが、いわゆるURLです。「http://www.homepage.com/myhobby/fishing/herabuna …」。こうなります。絶対パスの利点は、記述したHTMLファイルを、どこに移動しても、かならず参照したファイルを指定できる点です。
相対パスは、記述するHTMLファイルの位置を、起点としたパスです。記述するHTMLファイル、hogehoge.htmlと、同じディレクトリにあるimage.jpgは、「image.jpg」と記述するだけで、パスとなります。ひとつ下のディレクトリ「images」に、image.jpgがあるなら、「images/image.jpg」となります。ひとつ上のディレクトリに、image.jpgがある場合、ピリオドを使って、「../image.jpg」と記述します。相対パスの利点は、相対的な位置関係が変わらなければ、どこに移動しても、パスを変更しなくてもいい点です。
以上、ファイルパスに関する、基本的な説明をしましたが、心当たりは見つかりませんでしたか?
harawo様
御提言有り難うございます。私、初めてのコンピューターからマックしか触った事がなく、"Directly"という概念にあまり通じておりません。今、アップしているサイトでも"Directly"の指示が会ったりするのですが、良く理解出来ないまま、取りあえず、マテリアルをサーバーにアップロードしてなんか、切り貼りをしている状態です。頂いた2つの返答をもう一度、最初からやり直してみます。
良い解決法というのは、.jpgの前に画像の名前を入れるだけでこの画像がウエブサイト上できちんと表示されるようになる事と理解してよい訳ですよね?また。その為には、この画像がhtmlに置ける絶対パスの概念にし従って順を追って配置されていれば良いという事ですよね?ちなみにこの画像とは、マック版Adobe Illustratorで書いたデッサンをjpgフォーマットで保存した物です。マックの場合よく有るのですが、マック版のイラストレーターで作った画像をjpg fileに納めてもウィンドウズ機でその画像を開く事ができないと、、。当初はそんないつものトラブルなのかと思っていたのですが。
もう一度、やり直してみます。何処がいけないのか良くわからないのではあるのですが、、、。
No.4
- 回答日時:
画像タグは以下で
<img src="xx.jpg" width="204" height="43" border="0">
アップロードするファイル名は『xx.jpg』に成ります。
TextEditで作成している時は単純にサファリへドラックして確認してます。
No.3
- 回答日時:
直接の回答ではありませんが、じぶんでバグ(不具合)を発見するための、スピーディな方法を書きます。
いちいちサーバにアップロードせずにすむぶん、修正作業を時間短縮できます。ホームフォルダの「サイト(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様
御丁寧な回答有り難うございます。私、日本と7時間の時差のあるフランスに居りましてご返信が送れました事をまずお詫び申し上げます。
問題は、下記の方法で解決(?)した感じです。ただ、これが正しい方法なのかどうかわからず、更にアドバイスを頂ければ幸い存じます。
ー.htmlファイルでテキストをつくって、その中に画像挿入タグ<img src="画像ファイルの名前.jpg" border="0">をいれる。
ー画像(.jpgファイル)をサーバーにアップする
**これでは、サイトを開いた時画像は?のままで正しく見えませんでした**
そして、画像挿入タグの”画像ファイルの名前.jpg"を画像の置かれているサーバー上のURLを入れたとこと、サイトを開いた時にも正しく画像がみえるようになりました。
この解決法で良いのでしょうか?参考にしているホームページ作成の指南書では、”画像ファイルの名前”をいれるとなっているのです。
素人質問で本当に済みません。宜しくお願い致します。
No.2
- 回答日時:
サーバーにアップロードされたページにアクセスして、Safariのウインドウから「構成ファイル一覧」を開いてjpgファイルのアドレスを確認してimgsrcタグに入れて下さい。
Safariのキャッシュに残っている画像を追加する前のデータ=が表示されている可能性もありますので、メニューバーのSafariから「キャッシュを空にする」を実行して、(キャッシュからでなくサーバー直のデーターを)表示してみてください。
DAV様
御丁寧な回答有り難うございます。私、日本と7時間の時差のあるフランスに居りましてご返信が送れました事をまずお詫び申し上げます。
問題は、下記の方法で解決(?)した感じです。ただ、これが正しい方法なのかどうかわからず、更にアドバイスを頂ければ幸い存じます。
ー.htmlファイルでテキストをつくって、その中に画像挿入タグ<img src="画像ファイルの名前.jpg" border="0">をいれる。
ー画像(.jpgファイル)をサーバーにアップする
**これでは、サイトを開いた時画像は?のままで正しく見えませんでした**
そして、画像挿入タグの”画像ファイルの名前.jpg"を画像の置かれているサーバー上のURLを入れたとこと、サイトを開いた時にも正しく画像がみえるようになりました。
この解決法で良いのでしょうか?参考にしているホームページ作成の指南書では、”画像ファイルの名前”をいれるとなっているのです。
素人質問で本当に済みません。宜しくお願い致します。
No.1
- 回答日時:
neorg様
御丁寧な回答有り難うございます。私、日本と7時間の時差のあるフランスに居りましてご返信が送れました事をまずお詫び申し上げます。
問題は、下記の方法で解決(?)した感じです。ただ、これが正しい方法なのかどうかわからず、更にアドバイスを頂ければ幸い存じます。
ー.htmlファイルでテキストをつくって、その中に画像挿入タグ<img src="画像ファイルの名前.jpg" border="0">をいれる。
ー画像(.jpgファイル)をサーバーにアップする
**これでは、サイトを開いた時画像は?のままで正しく見えませんでした**
そして、画像挿入タグの”画像ファイルの名前.jpg"を画像の置かれているサーバー上のURLを入れたとこと、サイトを開いた時にも正しく画像がみえるようになりました。
この解決法で良いのでしょうか?参考にしているホームページ作成の指南書では、”画像ファイルの名前”をいれるとなっているのです。
素人質問で本当に済みません。宜しくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Chrome(クローム) 自作のホームページの画像でパソコンのChromeで見るとコナンの映像だけ写らなくて、マイクロソフトE 3 2022/06/09 18:00
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- WordPress(ワードプレス) ホームページの画像が入れ替わらない 3 2022/12/24 16:00
- PHP 画像ファイルの名前をそのままURLにする 3 2022/10/16 11:18
- PHP $filePath = './user_img/' . $file['name'];? 1 2022/12/10 07:29
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- Google Drive Googleドライブについて 3 2023/08/06 12:19
- ホームページ作成・プログラミング 保存したホームページのファイルは何をしている推測できますでしょうか。 1 2023/08/18 15:50
- HTML・CSS 角丸画像の背景色を透明にしたいです 1 2023/06/23 23:15
- PHP どうして送信されないのでしょうか? 1 2022/12/09 05:23
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
FTPに接続し、 あるフォルダ内...
-
Apache2.2.6にてBasic認証の設定
-
LinuxのFTPコマンドについて他
-
ファイルの作成・更新日時が200...
-
読み取り専用ファイルとして認...
-
FTPで見えるファイルと見えない...
-
PNGファイルでアップロードでき...
-
FTP受信直後に受け取ったファイ...
-
robocopyでファイルがあるのに...
-
ZIPファイルのアップロード方法...
-
EXCEL、上書き保存したは...
-
OneDriveに保存されているやつ...
-
サポートされてないファイル形...
-
SONY ICカードリーダー RC-S330...
-
Excelで勝手に保存画面に飛びま...
-
txt ファイル (テキストフ...
-
win10にインストールしたOpera...
-
拡張子datを解凍するにはどうし...
-
拡張子のないファイルの作成
-
現在のfallout4におけるMOD導入...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
FTPに接続し、 あるフォルダ内...
-
robocopyでファイルがあるのに...
-
ファイルの作成・更新日時が200...
-
FTPで見えるファイルと見えない...
-
私はマクロソフトのOneDrive(...
-
ApacheでSorryサーバを作りたい
-
index.html をブラウザで開...
-
FTP受信直後に受け取ったファイ...
-
バッチファイルでフォルダ内の...
-
シェルでftp接続によるファイル...
-
Apache2.2.6にてBasic認証の設定
-
読み取り専用ファイルとして認...
-
rsyncでバックアップしたLinux...
-
バッチファイルにてFTPで指定し...
-
FFFTP アップロードできない
-
win2008serverでaspxを表示させ...
-
FTPのmputで出るnetoutについて
-
FTP SJIS 能など(2バイト目5C)...
-
FFFTPで属性変更できない(Fedr...
-
cyberduckの使い方
おすすめ情報