Frequently Asked Questions

画像を表示させる

画像をWebサイトに貼る場合: 画像を貼りたい場所に下記のように記述します。; <img src="画像ファイル名" width="画像の横幅" height="画像の高さ" alt="画像の説明">; 例： <img src="pictures.gif" width="88" height="31" alt="サンプル Pictures">
別のディレクトリにある場合: 画像ファイルが別のディレクトリ（別のフォルダの中）にある場合は下記のように記述します。; <img src="フォルダ名/画像ファイル名" width="画像の横幅" height="画像の高さ" alt="画像の説明">; 例えば images という名前のフォルダの中にある pictures.gif という名前の画像ファイルを表示させるときは、下記のように記述します。; 例： <img src="images/pictures.gif" width="88" height="31" alt="サンプル Pictures">
画像が別のサイトにある場合: 画像ファイルが別のサイトに保存してある場合は、画像ファイル名の指定はフルパスで記述します。; 無料のジオシティーズご利用の方へ！ジオシティーズで、www.geocities.jp/～から始まるアドレスの場合、他所のサイトにてバナーが表示されないような仕組み「サーバー側で直リンク禁止」になっておりますので、ジオシティーズのアドレス（www.geocities.jp/～）より、別の Web サイトに画像の呼び出しが出来ません。

画像の使用でリンクしたい

記述方法: 画像を用いてリンクする場合は、下記のように記述します。; <a href="リンク先の指定"><img src="画像ファイル名" width="画像の横幅" height="画像の高さ" alt="画像の説明"></a>

画像のリンク枠を消したい場合　１: 初心者向けですが、 border="0" を追加すればリンク時の枠が無くなります。; <img src="画像ファイル名" width="画像の横幅" height="画像の高さ" alt="画像の説明" border="0">

画像のリンク枠を消したい場合　２: W3Cに準拠させる方法; 正確には・・・<IMG> の属性 BORDER はあまり薦められない属性です。; 例：<img src="gazou.gif" width="88" height="31" alt="サンプル" border="0"> この方法は薦められない記述です。; <IMG> の属性 BORDER は、スタイルシート (CSS1) (CSS2) での代替を薦められている属性です。（日本語訳）; 外部スタイルシートの内の記述; 下記の記述を外部スタイルシート内に記述すれば、画像のリンク枠が表示されなくなります。; すべての画像に適用する場合：（通常はこちら使用）　→ img { border-style:none; }; リンク部分のみに適用する場合：　→ a:link img,a:visited img,a:active img,a:hover img { border-style:none; }; 5.5.17 border-style

画像の大きさを変更したい

横幅指定や高さ指定を変更: <img src="画像ファイル名" width="画像の横幅指定" height="画像の高さ指定" alt="画像の説明">; 横幅指定や高さ指定を変更すれば、サイズが変わりますがおすすめしません。; この方法でサイズを変えると、画像が崩れて表示され綺麗に見えなくなってしまいます。画像作成時に指定したサイズのまま表示させたほうが良いです。

画像加工用ソフトの使用: 本格的な画像加工ソフトの使用や、ホームページ製作ソフトやデジタルカメラ等に付いてくる画像加工ソフトで、画像作成や画像タイプの変更（たとえば jpg から gif に変更）、画像の大きさなどを変えることが出来ます。; お薦め画像加工用ソフトは、こちらのＨＰ作成支援、便利ツール一覧というページの下の方にあります「イーファンビュー（画像ビューア）」というソフトがお薦めです。; 画像加工用ソフトは下記の Webサイトからもダウンロードできますので、探してみてください。フリーソフト（無料）や、シェアウェア（有料）もありますので、説明をよく読み、確認してからダウンロードを行いましょう。; Vector Softライブラリ - グラフィックス関係; Vector Softライブラリ - グラフィックエディタ; デザイン・グラフィック関連; ペイント・フォトレタッチ関連

画像加工用ソフト関連記事: ［CG・画像加工］All About Japan - デジカメ写真の加工からイラストを使った年賀状作成まで、CGに関する情報が満載です。; P＆A、画像作成＆加工ソフト『Paint Shop Pro 9』と入門者向け画像編集＆管理ソフト『Paint Shop Pro Studio』を発売

画像容量を小さくする方法: 画像容量のダイエット(スリム化ツール) - オンラインにて大きい画像ファイルを軽くするツール。; 大きい画像（デジカメ等の重い画像）ファイルの容量を軽くしたいときに使用します。画像ファイルをダイエット（スリム化）することで、WEBページのロード時間を短縮させます。

画像の URL （アドレス）が分からない

プロパティを見る方法: 画像の真上で右クリックで現れるメニューから → プロパティをクリックします。現れたプロパティの中にアドレス（URL）という部分があります。そのアドレス（URL）が画像のアドレスです。

プロパティとは？: プロパティとは、ウィンドウズでさまざまな設定を確認、変更する機能のことです。マウスの右クリックで現れるメニューから［プロパティ］を選択すれば、プロパティを見ることが出来ます。

ソースを見る方法: ここで言う「ソース」とは、Web サイトの HTML ファイルの記述（元テキスト）のことです。; Web サイトの HTML ファイルの記述「ソース」の中より、IMG の記述を探します。 <img src="画像ファイル名">; ソースチェッカー - ソースチェッカーのオンライン版、文字化けしてソースが読めないサイトも、ソースチェッカーを利用すればソースが見れるようになります。

Web 上で調べる方法: WebFX - The Web Graphics Tool という海外のサイトで画像の URL（アドレス）が調べられます。; 画像があるページの URL を記入し「Apply Effect」のボタンを押しますと、入力した URL 上にある画像とファイル名の一覧が表示されます。

上記のサイトで、うちの外部ファイルの二重化というページにある、隠し画像（女性の画像）は見つけられません。
かんたんなタネアカシすれば、隠し画像は外部ファイルを用いて、さらにサーバーサイドプログラムの使用で画像を表示させており、その画像は、PCのキャッシュ (Temporary Internet Files) に残らないのです。

画像の保存方法が分からない

画像の保存方法: まずは・・・各自のパソコンに画像の保存が出来ないと、話が進めません。; 自分のパソコンに保存する場合・・保存したい画像の真上で右クリックします。　現れるメニューから → 「名前を付けて画像を保存」又は「対象をファイルに保存」をクリックすれば、パソコンに保存されます。; 必ず画像の真上で右クリックすること！以前の質問で、「画像が保存出来ない」という方で、画像の真上でクリックしていなかった例がありました。

ドラッグ & ドロップ: 表示されている Web サイトの画像の真上で、ドラッグ & ドロップし、デスクトップまで移動させますと、パソコンのデスクトップに保存されます。ただし画像にリンクされている場合は、リンク先の HTML ファイルが保存されてしまいます。; 用語が分からない方は、アスキーデジタル用語辞典で調べて下さい。

ドラッグ & ドロップ - 関連記事: ウィンドウズ初心者支援サイト - ドラッグ & ドロップ - ドラッグ & ドロップを使っていないなら、ウィンドウズの機能の半分も使っていないと言っても過言ではありません。(引用); ドラッグ & ドロップで複数の画像ファイルをただちに形式変換できる「Gcon」; IEのドラッグ & ドロップ処理に深刻な脆弱性、XP SP2でも防げず; IEのドラッグ & ドロップの脆弱性を突くトロイの木馬「Akak」出現

画像が表示されない

多い失敗例

サーバーに画像のアップロードが出来ていなかった。
画像のファイル名の指定（拡張子など）が間違っていた。
画像の呼び出し方が間違っていた。
<img src="C:\My Documents\gazou.gif">
時々、このような記述で画像を呼び出す方を見受けますが、これは自分のパソコンに保存した画像のプロパティ（場所）を参照し、これがファイルの呼び出し用アドレス（フルパス）だと勘違いされている為です。
この記述の場合、自分のパソコンから閲覧しますと表示されていますが、他の方々には、ローカル（各個人）のパスの為に表示されていません。
画像のファイル名が別な名前だった。

対処方法

利用しているサーバーに、画像のアップロードが出来ていますか？
画像ファイルを、表示（機能）させるためには、自分の使用しているサーバー（倉庫）にアップロード（保存）しておかないといけません。
こちらの HP改造前の基礎知識編も参照して下さい。
指定しているファイル名の拡張子などを、確認してみましょう。
ファイル名のうち、ピリオドで区切られた右側の文字列部分の（後につく英字の記号）ことを「拡張子」といいます。
初心者の方は、サーバーに保存されている画像のフルパス指定で、画像を呼び出しすれば間違えないで済みます。
フルパスとは、目的の URL（ http:// から始まる URL ）を記入するコトです。フルパスとは、ファイルの住所と同じと考えれば解りやすいかな！？
画像のファイル名が別な名前では表示されませんよね。このケースはうっかりミスですが、結構多いミスなのです。ファイル名等、何度も確認するしかありません。

自作画像（絵）関連

自作イラストの作成: まずは・・・各自のパソコンにイラストの作成や保存が出来ないと、話が進めません。; 下記の Web サイトで勉強して下さい。; - お絵かき掲示板Art.netの初心者向け CGイラスト講座です。お絵かき掲示板以外でも共通する初心者向けの絵の描き方。; なるへそ～？？？

自作イラストの公開: パソコンに保存出来ているなら、まず最初にしておくことは、 Web 公開のために、イラストの拡張子を一般的によく利用される jpg, gif, png のどれかに変換しておく必要があります。; イラストの拡張子を変換するには、画像加工用ソフトを使用します。; イラストの拡張子に問題なければ、Webサイト（サーバー）にアップロードすれば、公開出来ます。; PC 用の Web サイトを持っていない方は、自分が作った画像や、デジカメ写真を公開する専用のＨＰがあります。そこでＨＰスペースをレンタルすると良いでしょう。フリーのとこもあるし。WEB BBS投稿 ( masatoro 氏 )

関連記事: | デザイン・グラフィック関連 | ペイント・フォトレタッチ関連 |; お絵描き掲示板で便利な無料ソフト; トップページはこちら → - お絵描き掲示板交流コミュニティー。; しぃペインター対応。CGイラストコンテストやお絵描き掲示板の使い方講座等も。; 当サイトのお絵描き掲示板です。管理人は絵が書けないので、いつも凍り付いていますが（汗）

その他

追記: 魔法のiらんどの HP だけの使用では限界があります。PC 用の無料 HP サービス等を借りておいたほうが良いと思います。; 但し、最近、画像等の外部からの呼び出し制限をしている無料 HP サービスが増えています。御利用になられる無料 HP サービスの規約等を確認してください。; また、ご利用になられているプロバイダーで、HP スペースを用意してある事も多いので、プロバイダーの HP で確認してみてください。