画像を表示する方法

画像ファイルのアップロード

画像を表示するには、まず、表示したい画像ファイルを以下の手順でアップロードします。

1. 左側の「ツール」にある「ファイルをアップロード」をクリック

　アップロードしたいファイルが、自分のパソコン等のどこに保管されているかを確認しておきます。

2. 「ファイルをアップロード画面」が表示されます。

3. 「アップロード元ファイル」の「ファイルを選択」ボタンをクリック

　「開く」ダイアログが表示されます。

4. アップロードしたい画像ファイルを選択し「開く」ボタンをクリック

　「ファイルを選択」ボタンの右側にファイル名が表示され、画面右側に、選択した画像ファイルのサムネイルが表示されます。

5. 「ファイルの解説」欄の「概要」にファイルの説明が必要な場合は記入します。

　このとき、そのすぐ上の「登録するファイル名」には、アップロードするファイル名が表示されています。

ファイル:4 FileUploadButton.JPG

6. 一番下の「ファイルをアップロード」をクリック

　これでファイルがアップロードされ、「ファイル:アップロードしたファイル名」ページが表示されます。

ファイル:5 FilePage.JPG

画像ファイルの表示

画像ファイルを表示するには、前項の「ファイル:アップロードしたファイル名」ページへのリンクを記載すればOKです。

今回の例では、「ファイル:1923 8chuSouritumaeAroundGakkou.png」を記述します。

実際には下図のように、ファイル名のページの「タイトル」をドラッグして選択 → 「Ctrl」＋[C] →「Ctrl」＋[V]で貼り付けましょう。

ファイル:6 DragPageName.JPG

以下の記述例では、「横幅」300pixelの「サムネイル」を表示しています。画像のサイズそのままで表示するには下の「|thumb|300px」を削除します。

記述例

　[[ファイル:1923 8chuSouritumaeAroundGakkou.png|thumb|300px|none|1923年(大正12年) 8中創立前の学校付近]]

　上の画像は、1923(大正12)年の八中創立前の学校付近のものである。○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

表示例

1923年(大正12年) 8中創立前の学校付近

　上の画像は、1923(大正12)年の八中創立前の学校付近のものである。○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

文字の回り込み

画像の右に文字をまわりこませるときは「none」→「left」とする。

記述例

　[[ファイル:1923 8chuSouritumaeAroundGakkou.png|thumb|300px|left|1923年(大正12年) 8中創立前の学校付近]]

　左の画像は、1923(大正12)年の八中創立前の学校付近のものである。

　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

表示例

1923年(大正12年) 8中創立前の学校付近

　左の画像は、1923(大正12)年の八中創立前の学校付近のものである。

　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

画像を右に配置し、文字を左側に表示するには、「left」→「right」とする。

記述例

　[[ファイル:1923 8chuSouritumaeAroundGakkou.png|thumb|300px|right|1923年(大正12年) 8中創立前の学校付近]]

　右の画像は、1923(大正12)年の八中創立前の学校付近のものである。

　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

表示例

1923年(大正12年) 8中創立前の学校付近

　右の画像は、1923(大正12)年の八中創立前の学校付近のものである。

　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

画像に枠を付けて表示する

枠を付けたい場合は以下のように記述します

[[ファイル:FileUpLoad画面.jpg|none|frame|900px]]

「border」→「frame」に変更すると枠が表示されます。

このページ一番上の画像と見比べてください。

画像を横に並べる

ギャラリー機能を使います。

以下のように「<gallery>……</gallery>」タグで囲った中に、画像ファイル名(Example.jpg)を記述します。

開始タグ(<gallery>)内には、表示する画像の幅(widths)と高さ(heights)を指定する記述を行います。

記述例

ファイル:Example.jpg|<div style="text-align:center; > 表紙 </div>

ファイル:Example.jpg|<div style="text-align:center; > 巻頭言 </div>

ファイル:Example.jpg|<div style="text-align:center; > 目次 1 </div>

ファイル:Example.jpg|<div style="text-align:center; > 目次 2 </div>

</gallery>

画像ファイル名の後ろの「|」の後にキャプション(画像下に表示される説明)を記述します。

<div>……</div>タグでキャプションの表示位置を「センタリング」としています。

表示

表紙
巻頭言
目次 1
目次 2

画像ファイルにリンクを張る

画像ファイルを表示して、それをクリックすると、Wiki内の別のページに飛ぶようにするには以下の記述を行います。

記述例

[[File:example.jpg|link=メインページ|クリックするとメインページに移動します。]]

表示

画像ファイルを表示して、それをクリックするとDropboxに保管しているPDFファイルを表示するようなときは以下の記述を行います。

[[File:example.jpg|link=https://Dropbox.xxxxxxxxx|キャプション]]

外部Webサイトの画像を埋め込む

MediaWikiでは画像を表示するための手順が煩雑となります。

まず、ファイルをアップロードして、そのファイルへのリンクを記述しなければなりません。

しかしこのサイトでは、外部のWebサイトの画像を表示する場合は、画像ファイルのURLをそのまま記述すればOKです。

例えばこんな感じ

https://xxxxxx.xxx.jp/img/dummy.jpg

これは便利ですね。

外部サイトの画像を表示する場合は、当然ですが「著作権・肖像権」等への配慮が必要です。

記述例

https://image.jimcdn.com/app/cms/image/transf/dimension=740x1024:format=jpg/path/s6f03ff358ae85269/image/ieae309f03e3a89b0/version/1393241779/image.jpg

表示例