画像をURLに変換（http://××）したいのですが・・・

質問

マイピクチャーにある画像を加工してホームページのスタイルシート（CSS）に使いたいのです。
　 http://×××のようなURLに変換したいのです。過去ログなどを探してみましたが自分では理解できませんでした。
　お手数ですがご教授お願いします！
過去ログ→http://okwave.jp/kotaeru.php3?q=1739889

回答No.3

koma30007 · ベストアンサー

私の知る限りでは、「http://～」というURLに変換するツ
ールはないように思います。

CSSやHTMLなどで画像やファイルの場所を指定する場合
は、URL(http://～）でなくて、相対パスと呼ばれるもの
でも大丈夫です。
http://www.tohoho-web.com/css/reference.htm#background-image

background-image: url(http://www.yyy.zzz/image/back.gif);
background-image: url(image/back.gif);

この場合は、ご質問にある過去ログの回答のソフトで画像
の相対パスの自動入力が可能です。
HTMLタグだけでなく、CSSにも対応しています。

※ただし、編集または表示しているページから見て、呼び
出す画像やリンク先が違うサーバーにある場合は、アドレ
ス(http://～)で指定しなければなりません。
呼び出す(表示させたい)画像を編集中のファイルとは違う
サーバーに置く場合は、いったん相対パスで自動入力させ
てから、後で書き換えると楽かもしれません。

サーバー1(http://www1.example.ne.jp/~user1/)
トップページ(index.html)
+画像フォルダ(image1) ― 画像1(photo1.jpg)
　　　　　　　　　　　　 ― 画像2(icon1.gif)

サーバー2(http://cgi1.example.ne.jp/~user1/)
掲示板(bbs.cgi)

例えばHTMLと画像はサーバー1に置けるが、サーバー2は
CGI専用で画像を置けないという場合でなければ、相対
パスで大丈夫です。

相対パス
※トップページと画像フォルダは同じ位置にあります。
フォルダを開いてみた場合、トップページと画像フォル
ダは見えますが、中にある画像2つは画像フォルダを開か
ないと見えない状態です。
この状態でトップページ(index.html)に書かれる画像の
相対パスは、次のようになります。
画像1が「(./)image1/photo1.jpg」
画像2が「(./)image1/icon1.gif」
画像をフォルダに入れない場合、トップページと画像は同じ位置(階層)にあるので、相対パスは次のようになります。
画像1が「(./)photo1.jpg」
画像2が「(./)icon1.gif」
※()の中はつけてもつけなくてもどちらでも大丈夫です。
※()や「」は必要ありません。
※過去ログの回答にあるソフトで、この相対パスでの自動
入力が可能ですのでお試しください。

※別のサーバーに画像を置く場合、相対パスは使えません。

ここからは相対パスではだめな場合の対処方法です。

サーバー2にある掲示板(bbs.cgi)から、サーバー1にある
画像2を呼び出したい場合はアドレスを次のようにする必
要があります。
「http://www1.example.ne.jp/~user1/image1/icon1.gif」
ホームページ作成時になるべく実際のサーバーの状態と近
くなるように「サーバー1」「サーバー2」というフォルダ
を作成します。(実際は同じフォルダ内であれば、お好き
な名前でかまいません)

この状態でサーバー2のbbs.cgiを編集中にソフトの画像自
動挿入機能を使用して画像2を呼び出すと、画像2の相対
パスが「../サーバー1/image1/icon1.gif」として挿入
されます。

2つのサーバーのアドレスを記載したファイルを作り、ホー
ムページファイル編集時にこのファイルも一緒に開いて、
必要な時だけコピー＆ペーストして使用します。
「http://www1.example.ne.jp/~user1/」をコピーして、
編集中のファイルの「../サーバー1/image1/icon1.gif」
のいらない部分「../サーバー1/」を選択状態にしてから
貼り付けます。
そうすると必要な画像のアドレスになります。
「http://www1.example.ne.jp/~user1/image1/icon1.gif」

説明だけ見ると難しく感じるかもしれませんが、実際に操
作してみると簡単だと思いますので、まずは実際にお試し
ください。
※上はただの例ですから、ご自分のホームページのアドレ
スを記載してください。
※必ずご自分のホームページ領域に画像を転送(アップ)し
て利用するようにしてください。(大部分の素材屋さんは
直リンクを禁止していますので、素材屋さんにある画像の
アドレスをそのまま使用することはルール違反になりま
す。)

※直リンク＝自分のホームページに素材屋さんのサーバ
ーに置いてある画像を呼び出して使用すること

すでに知っていることまで書いたかもしれませんが、分
からなかったら補足して聞いてください。(^^;

お礼

大変丁寧かつわかりやすい説明ありがとうございます！実際にやってみたところ意外に簡単でした。解決することができました。ありがとうございました！

回答No.2

natatin

画像タグで検索すれば　出てくると思いますが

http://www.heo.jp/tag/href/

このへんから見たほうが　わかると思います
http://siriasu.s10.xrea.com/

お礼

お返事遅れまして申し訳ございません！参考になるサイトを紹介していただきありがとうございました！

回答No.1

SuperLe

現在マイピクチャーにある画像は、ホームページのどこに、アップロード(転送)するのですか？

例えば、image ディレクトリにアップロード(転送)するのであれば、http://あなたのホームページのURL/image/***.gif
というような感じにします。

勿論背景に使うのであれば、スタイルシートのbackground-image:http://上のURL;の指定は必要ですが、それは、大丈夫ですね?

お礼

お返事遅れてしまい申し訳ございません！image ディレクトリにアップロードするのはhttp://あなたのホームページのURL/image/***.gif
ですねー確認させていただけました。どこにアップロードするのかは自分の知識ではどう説明していいのかわかりません。ありがとうございました！