Navi/実践Wikiページ作成講座５

講座５　ファイル添付と画像の表示

　講座５では，ページにファイルを添付したり，画像を表示させたりしてみます。

 課題１　ページにファイルを添付する。

　実践で使用した自作コンテンツなどを添付しておくと，追試する人がダウンロードして利用することができます。（ホームページに添付して公開する場合は，著作権，プライバシーなどにご注意ください。）
　練習ページ５を作成して，ファイルを添付してみましょう。
　あらかじめ添付するファイル（あまりサイズが大きくない物）を用意しておいてください。

1. 「自分の名前/練習ページ５」というページ名で練習ページ５を作成する。
2. 「ファイルの添付と画像の表示」と入力し，大見出しに設定する。（行頭に半角で！！！）
3. ここで，一度保存する。（ファイル添付する前に必ず編集内容を一度保存しておきます。）
4. 保存後，もう一度編集画面にする。
5. 編集画面下の「添付ファイル」の欄の「参照」ボタンをクリックし，添付したいファイルを指定します。（複数ファイルを添付する場合はあらかじめ＋ボタンでファイル指定ボックスを増やしておいてから指定）
   
6. 「添付」ボタンをクリックして添付する。
7. ページの最後のフッター部分に，添付したファイル名がリンク付きで表示されていることを確認。

これでファイルが添付されました。
添付されたファイルをダウンロードする場合は，フッター部の添付ファイル名を右クリックして「ファイルに保存」します。
間違えて添付したとかで削除したい場合は，フッター部の添付ファイル名の後にある[削除]をクリックして削除できます。（ログイン時のみ）

 課題２　添付したファイルへのリンクをページ中に挿入する。

　添付したファイルへのリンクをフッター部だけはなく，ページ中に挿入したい場合は次のようにします。

1. 課題１でファイルを添付した練習ページ５を開いて，編集画面にします。
2. リンクを挿入したい場所にカーソルを移動する。
3. 編集ボックス上の「※プラグイン」挿入ドロップダウンリストから「添付ファイルへのリンク表示」をクリック。
   
4. カーソル位置に｛｛ref 添付ファイル名｝｝と挿入されていることを確認。
5. 挿入された書式の「添付ファイル名」の部分を先ほど添付したファイル名に変更する。（編集ボックス下の添付ファイル欄に添付ファイル名が表示されているのでコピー貼り付けすると確実です。）
6. 保存して，添付ファイルへのリンクができているか確認。

※うまくいっていない場合はもう一度ファイル名を確認し，やり直して見てください。

 課題３　表示用画像の添付

　ページに画像を表示させたい場合は，まず表示したい画像ファイルをページに添付します。
　

1. 課題１・２で作成した練習ページ５を開いて編集画面にする。
2. 編集画面下の「表示用の画像ファイル」の欄の「参照」ボタンをクリックし，添付したいファイルを指定します。（複数ファイルを添付する場合はあらかじめ＋ボタンでファイル指定ボックスを増やしておいてから指定）
   
3. 「画像添付」ボタンをクリックして添付する。
4. ページの最後のフッター部分に，添付したファイル名がリンク付きで表示されていることを確認。

※webページで表示させるための画像は，大きくても1024x768ピクセルもあれば十分です。できれば640x480ピクセル以下にリサイズしたものを添付して下さい。サーバ容量を圧迫しますので．．．。
　複数画像の一括リサイズにはフリーソフトの「縮小専用」をおすすめします。以下からダウンロードできます。
http://www.vector.co.jp/soft/win95/art/se153674.html

これで表示用の画像ファイルが添付されました。
添付されたファイルを表示する場合は，フッター部の添付ファイル名をクリックします。見たらブラウザの「戻る」ボタンで戻ります。
間違えて添付したとかで削除したい場合は，フッター部の添付ファイル名の後にある[削除]をクリックして削除できます。（ログイン時のみ）

とりあえず，クリックして見てもらえばいい場合は，これでOKです。
画像を表示させない分，ページの表示も軽くてすみます。
でも，本文中に画像も表示させたい場合は，もう一手間かけます。

 課題４　画像を表示させる

　課題３で画像添付した表示用画像ファイルをページ中に表示させます。

1. 課題３までに作成した練習ページ５を開き，編集画面にします。
2. 画像を表示させたいところにカーソルを移動し，書式挿入ボタンの一番右の(埋め込み画像)のボタンをクリックする。
   
3. カーソル位置に｛｛image 添付画像ファイル名,,size:240x180｝｝という文字列が挿入されたことを確認し，添付画像ファイル名　の部分を課題３で添付した画像ファイル名に置き換える。（編集ボックス下の「表示用の画像ファイル」欄に添付したファイル名が表示されているのでコピー貼り付けすると確実です。）
4. サイズを指定したい場合は　240x180　の部分を指定したいサイズ（幅x高さ　単位はピクセル）に適宜変更する。元画像のサイズで表示させる場合は　,,size:240x180　の部分を削除する。
5. プレビューで確認し保存する。

※うまくいっていない場合はもう一度ファイル名を確認し，やり直して見てください。
　,,size:240x180などの指定部分はすべて半角です。

※ファイル名の後の　,　と　,　の間にページ名を指定することで他のページに添付してある表示用の画像を表示させることもできます。

※複数画像を横にならべたい場合は，1行にならべて記入します。
｛｛image 添付画像ファイル１｝｝｛｛image 添付画像ファイル２｝｝

　縦に並べたい場合は，1行に1つずつ記入します。
｛｛image 添付画像ファイル１｝｝
｛｛image 添付画像ファイル２｝｝

※GoogleChromeの場合，山本の環境では，書式挿入ボタンがうまく働かない場合があることが確認されています。他にGoogleChromeを使っている方がいらっしゃったら動作確認報告をお願いします。

 番外編　他のページの画像を表示させる

　使用したい画像が他のページに既に添付されている場合は，改めて添付せずに，その画像を表示させることができます。同じ画像を二重にアップするというサーバー容量の無駄遣いも防げるのでご利用下さい。ただし，添付されているページが削除されたり，添付画像が削除されたりした場合は表示されなくなってしまうことにご注意下さい。

方法その１

　1番簡単な方法です。
　この方法は，同じWikiサイトでなく，外部のHPの画像に対しても有効です。
　ただし，サイズの指定や，右寄せ，左寄せなどの位置の指定ができません。アップされた元の写真サイズのまま表示されるので，アップしてあるサイズによっては画面をはみ出すほど大きくなる場合があります。

1. 必要な画像が表示されているページの画像の上で右クリック。
2. 「ショーカットのコピー」または「画像URLのコピー」で写真のURLをコピー。
3. 画像を表示させたいWikiページの編集画面で，表示させたい部分にURLを貼り付ける。
4. プレビューで確認し，保存する。

　表示画面では画像URLがその画像に置き換わって表示されます。

※imgプラグインを使うと，サイズの指定や，右寄せ，左寄せなどの位置の指定指定することもできます。詳しくは，Helpのimgプラグインの項を参照して下さい。
※imgプラグインで添付画像を表示する場合は，表示用画像ファイルとしてではなく，普通の添付ファイルとして添付して下さい。

方法その２

　同じWikiサイトのページ間で可能な方法です。
　サイズの指定や，右寄せ，左寄せなどの位置の指定もできます。

1. 必要な画像が表示されているページを開いてページ名と添付されている画像のファイル名を確認します。
   ページ名はページ上部に右寄せで表示されているもの，ファイル名はページ下部に「添付ファイル」として表示されているものです。
2. 画像を表示させたいページの編集画面で，下記のように画像が添付されているページ名とファイル名，サイズ，表示位置を指定し，表示させたい部分に記入する。（｛｛　｝｝は半角で）
   ｛｛image ファイル名,ページ名,size:240x180,float:right｝｝
3. プレビューで確認し，保存する。

※編集画面の「※プラグイン」のドロップダウンリストからも挿入できます。

ここまでできたらMLに
「講座５課題４までできました。」
と報告してください。

分からない点，うまくいかない点があれば，専用MLで具体的にどううまくいかないのかお知らせ下さい。
その際，課題番号とお使いのブラウザ（IE６，IE７，ＦｉｒｅＦｏｘ，GoogleChromeなど）も一緒にお知らせ下さい。