「写真を載せる」(2007/09/17 (月) 18:58:06) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
**@Wikiに写真を載せる
HPは、概ねテキスト(文字)と画像で構成されています。写真好きな方は、HPに自前のデジカメ画像などを張り付け、多くの人に見て欲しいと思われることでしょう。
また、当サイトのような解説サイトでは、スクリーンショット画像も多用しますし、案内地図や、記念写真など、画像なくしては、要を得ないケースも少なくありません。
このような場合には、&color(blue){画像ファイルをアップロード}し、それをWikiに&color(blue){読み込ませるよう記述}する必要があります。
----
***画像ファイルについて
まず、HPの世界で標準的に扱える画像ファイルのタイプを把握する必要があります。HPの世界では、よくデジカメなどで作成される&color(blue){JPEG画像（拡張子は.jpgまたは.jpeg)}、案内図・イラストなど色数の少ない画像に用いられる&color(blue){GIF画像(.gif)}、GIFの代替として開発された&color(blue){PNG画像(.png)}の3種類です。
もしファイル・タイプがこれらのものでない場合は、GIMPなどの画像編集ツールを利用して、加工する必要があります。また、画像のサイズを揃えるなどの下準備もこのGIMPで行うことが出来ます。
GIMPは無償で利用できますが、少々慣れが必要です。ネット上に多くの情報が提供されていますので、御興味のある方は、検索エンジンなどで調べてみてください。
もちろん、デジカメにバンドルされてくるようなソフトでも結構ですし、プロ仕様のPhotoShopなどをお持ちの方は、それらでも同じことが出来ます。
----
**画像のアップロード
＠Wikiでは、画像のアップロード法を2通り用意してくれています。一つめは、FTPツールを用いないで行う方法。二つ目が、FTPツールを用いる方法です。
***FTPツールを用いない方法
まずは、簡易に行うことのできる「&color(blue){FTPツールを用いない方法}」を御紹介します。こちらは、1ファイルずつしかアップロードできないという欠点があるのですが、非常に気軽に行うことが出来ます。
操作としては、「&color(blue){ログイン}」して、「&color(blue){＠Wikiメニュー}」の中の「&color(blue){編集}」ー「&color(blue){このページにファイルをアップロード}」を選択すると表示される画面から、「&color(blue){参照}」をクリックして、御自分のPCの中に保存されている画像ファイルを指定します。
#image(sum-upload.png,center,http://www39.atwiki.jp/ibaraki-it/pub/upload.png,title=拡大画像)
アップロードする画像ファイルが指定できましたら、「&color(blue){アップロード}」をクリックして、作業は完了です。この方法は、とても気軽にアップロードを行うことが出来ます。
#image(sum-upload2.png,center,http://www39.atwiki.jp/ibaraki-it/pub/upload2.png,title=拡大画像)
***FTPツールを用いる場合
こちらの方法は、少々面倒な準備が必要ですが、複数のファイルを一括してアップロードできるという利点があります。HP上で画像を多用したいような場合には、こちらの方法の方が、作業効率の上で有利です。
多くの方はWinodowsマシンを御利用になっていることと思います。WindowsのFTPツールとしては、よく利用される「[[FFFTP>http://www2.biglobe.ne.jp/~sota/ffftp.html]]」や、無償のWebブラウザとして有名な、Firefoxのプラグインとして利用できる「[[FireFTP>http://norahmodel.exblog.jp/1405872/]]」などが、定番ツールとしてお薦めです。
詳細は各サイトを御覧頂くとして、&color(blue){FTPアカウントの設定}を御紹介します。私の利用しているFireFTPの場合は、下図のように設定しています。
#image(http://www39.atwiki.jp/ibaraki-it/pub/ftp-accounts.png,center,title=FireFTPでのアカウント設定)
「&color(blue){Account Name}」には、何でもよいのですが、&color(red){分かり易い日本語}を入力し、この＠WikiのFTPアカウントであることが分かるような名前をつければよいでしょう。
「&color(blue){Host}」には&color(red){URLの中のホスト+ドメイン部(http://を除いた「www.○○.jp」など）}、「&color(blue){Login}」には&color(red){＠Wikiのユーザー名}、「&color(blue){Password}」には&color(red){＠Wikiのログインパスワード}を設定し、「OK」をクリックします。
----
***アップロード後の画像ファイル
一つめの「このページにファイルをアップロード」の方法でアップロードした場合は、その時に表示していたページと同じディレクトリに内に、画像ファイルは格納されたように扱われます(詳細には触れません)。
これに対して、２つ目の「FTPツールを用いて画像ファイルをアップロード」すると、「自分WikiのURL/pub」の中に，画像ファイルは格納されます。
よって、アップロード方によって、記述する画像へのパスは異なりますので、注意が必要です。詳しくは後述します。
なお、いずれの方法であれ、HPで利用するファイルは、全て「半角英数文字」のファイル名で保存し、アップロードするように注意してください。ひらがなや漢字をはじめ、「半角カタカナ」を含む、あらゆる「2バイト文字」は御法度ですので、&color(red){IMEを終了させて「名前を付けて保存」}されるよう、お薦めします。
----
***いよいよ画像の張りつけ
以上で準備は整いましたので、画像を張り付けるための記述を追加します。書式は、
-「FTPツールを用いない場合」&html(<div style="color:white;background:#c66;padding:3px;">#image（画像ファイル名）</div>)
#image(sum-image-edit2.png,title=拡大画像,center,http://www39.atwiki.jp/ibaraki-it/pub/image-edit2.png)
-「FTPツールを用る場合」&html(<div style="color:white;background:#c66;padding:3px;">#image（（http：//から始まる）自分WikiのURL/pub/画像ファイル名）</div>)
#image(http://www39.atwiki.jp/ibaraki-it/pub/sum-image-edit.png,http://www39.atwiki.jp/ibaraki-it/pub/image-edit.png,title=拡大画像,center)
ちなみに、この場合の、当Wikiの画像パスは、「&html(<span style="color:blue">http://www39.atwiki.jp/ibaraki-it/pub/画像ファイル名</span>)」となっています。
更にこの画像にリンクを設定したい場合には、「画像ファイル名」の後に「,(カンマ)」をいれて、リンク先のURLを列記します。
&html(<div style="color:white;background:#c66;padding:3px;">#image（（パスつき）画像ファイル名,リンク先URL）)
とします。更に、この画像のレイアウトの指定、マウスが乗ったときに表示するツールチップなどをオプションで指定できます。詳しくは、[[こちら>http://www1.atwiki.jp/guide/pages/265.html#id_1a6e334f]]をご参照下さい。
----
**@Wikiに写真を載せる
HPは、概ねテキスト(文字)と画像で構成されています。写真好きな方は、HPに自前のデジカメ画像などを張り付け、多くの人に見て欲しいと思われることでしょう。
また、当サイトのような解説サイトでは、スクリーンショット画像も多用しますし、案内地図や、記念写真など、画像なくしては、要を得ないケースも少なくありません。
このような場合には、&color(blue){画像ファイルをアップロード}し、それをWikiに&color(blue){読み込ませるよう記述}する必要があります。
----
***画像ファイルについて
まず、HPの世界で標準的に扱える画像ファイルのタイプを把握する必要があります。HPの世界では、よくデジカメなどで作成される&color(blue){JPEG画像（拡張子は.jpgまたは.jpeg)}、案内図・イラストなど色数の少ない画像に用いられる&color(blue){GIF画像(.gif)}、GIFの代替として開発された&color(blue){PNG画像(.png)}の3種類です。
もしファイル・タイプがこれらのものでない場合は、GIMPなどの画像編集ツールを利用して、加工する必要があります。また、画像のサイズを揃えるなどの下準備もこのGIMPで行うことが出来ます。
GIMPは無償で利用できますが、少々慣れが必要です。ネット上に多くの情報が提供されていますので、御興味のある方は、検索エンジンなどで調べてみてください。
もちろん、デジカメにバンドルされてくるようなソフトでも結構ですし、プロ仕様のPhotoShopなどをお持ちの方は、それらでも同じことが出来ます。
----
**画像のアップロード
＠Wikiでは、画像のアップロード法を2通り用意してくれています。一つめは、FTPツールを用いないで行う方法。二つ目が、FTPツールを用いる方法です。
***FTPツールを用いない方法
まずは、簡易に行うことのできる「&color(blue){FTPツールを用いない方法}」を御紹介します。こちらは、1ファイルずつしかアップロードできないという欠点があるのですが、非常に気軽に行うことが出来ます。
操作としては、「&color(blue){ログイン}」して、「&color(blue){＠Wikiメニュー}」の中の「&color(blue){編集}」ー「&color(blue){このページにファイルをアップロード}」を選択すると表示される画面から、「&color(blue){参照}」をクリックして、御自分のPCの中に保存されている画像ファイルを指定します。
#image(sum-upload.png,center,http://www39.atwiki.jp/ibaraki-it/pub/upload.png,title=拡大画像)
アップロードする画像ファイルが指定できましたら、「&color(blue){アップロード}」をクリックして、作業は完了です。この方法は、とても気軽にアップロードを行うことが出来ます。
#image(sum-upload2.png,center,http://www39.atwiki.jp/ibaraki-it/pub/upload2.png,title=拡大画像)
***FTPツールを用いる場合
こちらの方法は、少々面倒な準備が必要ですが、複数のファイルを一括してアップロードできるという利点があります。HP上で画像を多用したいような場合には、こちらの方法の方が、作業効率の上で有利です。
多くの方はWinodowsマシンを御利用になっていることと思います。WindowsのFTPツールとしては、よく利用される「[[FFFTP>http://www2.biglobe.ne.jp/~sota/ffftp.html]]」や、無償のWebブラウザとして有名な、Firefoxのプラグインとして利用できる「[[FireFTP>http://norahmodel.exblog.jp/1405872/]]」などが、定番ツールとしてお薦めです。
詳細は各サイトを御覧頂くとして、&color(blue){FTPアカウントの設定}を御紹介します。私の利用しているFireFTPの場合は、下図のように設定しています。
#image(http://www39.atwiki.jp/ibaraki-it/pub/ftp-accounts.png,center,title=FireFTPでのアカウント設定)
「&color(blue){Account Name}」には、何でもよいのですが、&color(red){分かり易い日本語}を入力し、この＠WikiのFTPアカウントであることが分かるような名前をつければよいでしょう。
「&color(blue){Host}」には&color(red){URLの中のホスト+ドメイン部(http://を除いた「www.○○.jp」など）}、「&color(blue){Login}」には&color(red){＠Wikiのユーザー名}、「&color(blue){Password}」には&color(red){＠Wikiのログインパスワード}を設定し、「OK」をクリックします。
----
***アップロード後の画像ファイル
一つめの「このページにファイルをアップロード」の方法でアップロードした場合は、その時に表示していたページと同じディレクトリ内に、画像ファイルは格納されたように扱われます(詳細には触れません)。
これに対して、２つ目の「FTPツールを用いて画像ファイルをアップロード」すると、「自分WikiのURL/pub」の中に，画像ファイルは格納されます。
よって、アップロード法によって、記述する画像へのパスは異なりますので、注意が必要です。詳しくは後述します。
なお、いずれの方法であれ、HPで利用するファイルは、全て「半角英数文字」のファイル名で保存し、アップロードするように注意してください。ひらがなや漢字をはじめ、「半角カタカナ」を含む、あらゆる「2バイト文字」および「空白文字」は御法度ですので、&color(red){IMEを終了させて「名前を付けて保存」}されるよう、お薦めします。
----
***いよいよ画像の張りつけ
以上で準備は整いましたので、画像を張り付けるための記述を追加します。書式は、
-「FTPツールを用いない場合」&html(<div style="color:white;background:#c66;padding:3px;">#image（画像ファイル名）</div>)
#image(sum-image-edit2.png,title=拡大画像,center,http://www39.atwiki.jp/ibaraki-it/pub/image-edit2.png)
-「FTPツールを用る場合」&html(<div style="color:white;background:#c66;padding:3px;">#image（（http：//から始まる）自分WikiのURL/pub/画像ファイル名）</div>)
#image(http://www39.atwiki.jp/ibaraki-it/pub/sum-image-edit.png,http://www39.atwiki.jp/ibaraki-it/pub/image-edit.png,title=拡大画像,center)
ちなみに、この場合の、当Wikiの画像パスは、「&html(<span style="color:blue">http://www39.atwiki.jp/ibaraki-it/pub/画像ファイル名</span>)」となっています。
更にこの画像にリンクを設定したい場合には、「画像ファイル名」の後に「,(カンマ)」をいれて、リンク先のURLを列記します。
&html(<div style="color:white;background:#c66;padding:3px;">#image（（パスつき）画像ファイル名,リンク先URL）)
とします。更に、この画像のレイアウトの指定、マウスが乗ったときに表示するツールチップなどをオプションで指定できます。詳しくは、[[こちら>http://www1.atwiki.jp/guide/pages/265.html#id_1a6e334f]]をご参照下さい。
----
表示オプション
横に並べて表示：
変化行の前後のみ表示：
