画像を表示する方法のソースを表示

== 画像を表示するための流れ ==
:画像を表示するには以下のステップで行います。
:1. 表示したい画像(jpgファイルなど)をアップロード
::左側メニューの「ファイルをアップロード」をクリックし、ファイルを選択して「アップロード」
::アップロードしたファイルは「八中・小山台デジタルアーカイブ」の中の「どこか」に保存されます。
<br>
:2. 画像を表示したいところに、そのファイルへのリンクを記載。
::「どこか」に入っているファイルは「ファイル名」を指定することで表示できます。
::<span style="color:red;">'''【注意】'''</span>ファイル名のみで指定されますので、ファイルの名前は「ユニーク(唯一無二)」となるようにしてください。
:::'''悪い名前の例'''：「合宿写真.jpg」「3E集合写真.jpg」どーして悪いのか分かりますか？
:::'''良い名前'''：「19850803_女子バレー_蓼科合宿001.jpg」「19871215_高30_3B_忘年会004.jpg」どこが良いか分かりますね。
:::ファイル名の「区切り文字」には「スペース(全角・半角)」や「-(ハイフン)」は避けましょう。区切り文字は「_(アンダースコア)」がベスト。
<br>
:3. 画像を表示するリンク記載方法
::<nowiki>[[ファイル:○○○.jpg]]</nowiki>
:これで画像が表示されます。
<br><br>

== 画像ファイルのアップロード ==
:画像を表示するには、まず、表示したい画像ファイルを以下の手順でアップロードします。
:1. 左側の「ツール」にある「ファイルをアップロード」をクリック
:　アップロードしたいファイルが、自分のパソコン等のどこに保管されているかを確認しておきます。
<br>
:2. 「ファイルをアップロード画面」が表示されます。
::　[[ファイル:FileUpLoad画面.jpg|none|border|900px]]
<br>
:3. 「アップロード元ファイル」の「ファイルを選択」ボタンをクリック
:　「開く」ダイアログが表示されます。
::　[[ファイル:開くダイアログ.jpg|none|border|700px]]
<br>
:4. アップロードしたい画像ファイルを選択し「開く」ボタンをクリック
:　「ファイルを選択」ボタンの右側にファイル名が表示され、画面右側に、選択した画像ファイルのサムネイルが表示されます。
::　[[ファイル:3 Thumbnail表示.jpg|none|border|900px]]
<br>
:5. 「ファイルの解説」欄の「概要」にファイルの説明が必要な場合は記入します。
:　このとき、そのすぐ上の「登録するファイル名」には、アップロードするファイル名が表示されています。
::　[[ファイル:4 FileUploadButton.JPG|none|border|600px]]
<br>
:6. 一番下の「ファイルをアップロード」をクリック
:　これでファイルがアップロードされ、「ファイル:アップロードしたファイル名」ページが表示されます。
::　[[ファイル:5 FilePage.JPG|none|border|600px]]
<br>
<br>

== 画像ファイルの表示 ==
:画像ファイルを表示するには、前項の「ファイル:アップロードしたファイル名」ページへのリンクを記載すればOKです。
:今回の例では、「ファイル:1923 8chuSouritumaeAroundGakkou.png」を記述します。
:実際には下図のように、ファイル名のページの「タイトル」をドラッグして選択 → 「Ctrl」＋[C] →「Ctrl」＋[V]で貼り付けましょう。
::　[[ファイル:6 DragPageName.JPG|none|border|500px]]
<br>
:以下の記述例では、「横幅」300pixelの「サムネイル」を表示しています。画像のサイズそのままで表示するには下の「|thumb|300px」を削除します。
<br>
:'''記述例'''
:　<nowiki>[[ファイル:1923 8chuSouritumaeAroundGakkou.png|thumb|300px|none|1923年(大正12年) 8中創立前の学校付近]]</nowiki>
:　上の画像は、1923(大正12)年 の八中創立前の学校付近のものである。○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
<br>
:'''表示例'''
:　[[ファイル:1923 8chuSouritumaeAroundGakkou.png|thumb|300px|none|1923年(大正12年) 8中創立前の学校付近]]
:　上の画像は、1923(大正12)年 の八中創立前の学校付近のものである。○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
<br>
<br>
<br>
=== 文字の回り込み ===
:画像の右に文字をまわりこませるときは「none」→「left」とする。
<br>
:'''記述例'''
:　<nowiki>[[ファイル:1923 8chuSouritumaeAroundGakkou.png|thumb|300px|left|1923年(大正12年) 8中創立前の学校付近]]</nowiki>
:　左の画像は、1923(大正12)年 の八中創立前の学校付近のものである。
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
<br>
:'''表示例'''
:　[[ファイル:1923 8chuSouritumaeAroundGakkou.png|thumb|300px|left|1923年(大正12年) 8中創立前の学校付近]]
:　左の画像は、1923(大正12)年 の八中創立前の学校付近のものである。
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
<br><br><br><br><br><br>
<br><br><br><br><br><br>

:画像を右に配置し、文字を左側に表示するには、「left」→「right」とする。
<br>
:'''記述例'''
:　<nowiki>[[ファイル:1923 8chuSouritumaeAroundGakkou.png|thumb|300px|right|1923年(大正12年) 8中創立前の学校付近]]</nowiki>
:　右の画像は、1923(大正12)年 の八中創立前の学校付近のものである。
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
<br>
:'''表示例'''
:　[[ファイル:1923 8chuSouritumaeAroundGakkou.png|thumb|300px|right|1923年(大正12年) 8中創立前の学校付近]]
:　右の画像は、1923(大正12)年 の八中創立前の学校付近のものである。
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
:　○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
<br><br><br><br><br><br>
<br><br><br><br>

=== 画像に枠を付けて表示する ===
:枠を付けたい場合は以下のように記述します
::<nowiki>[[ファイル:FileUpLoad画面.jpg|none|frame|900px]]</nowiki>
::[[ファイル:FileUpLoad画面.jpg|none|frame|900px]]
<br>
::「border」→「frame」に変更すると枠が表示されます。
::このページ[[#画像ファイルのアップロード|一番上の画像]]と見比べてください。
<br><br>

=== 画像を横に並べる ===
:ギャラリー機能を使います。
:以下のように「<nowiki><gallery>……</gallery></nowiki>」タグで囲った中に、画像ファイル名(Example.jpg)を記述します。
:開始タグ(<nowiki><gallery</nowiki>>)内には、表示する画像の幅(widths)と高さ(heights)を指定する記述を行います。
<br>
:'''記述例'''
::<nowiki><gallery widths=260px  heights=360px ></nowiki><br>
::<nowiki>ファイル:Example.jpg|<div style="text-align:center; > 表 紙 </div></nowiki><br>
::<nowiki>ファイル:Example.jpg|<div style="text-align:center; > 巻頭言 </div></nowiki><br>
::<nowiki>ファイル:Example.jpg|<div style="text-align:center; > 目 次 1 </div></nowiki><br>
::<nowiki>ファイル:Example.jpg|<div style="text-align:center; > 目 次 2 </div></nowiki><br>
::<nowiki></gallery></nowiki>
<br><br>
::画像ファイル名の後ろの「|」の後にキャプション(画像下に表示される説明)を記述します。
::<nowiki><div>……</div></nowiki>タグでキャプションの表示位置を「センタリング」としています。
<br><br>
:'''表 示'''
<div style="margin:0 0 0 3em">
<gallery widths=260px  heights=360px >
ファイル: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>
<br><br><br>

=== 画像ファイルにリンクを張る ===
:画像ファイルを表示して、それをクリックすると、Wiki内の別のページに飛ぶようにするには以下の記述を行います。
<br>
:'''記述例'''
::<nowiki>[[File:example.jpg|link=メインページ|クリックするとメインページに移動します。]]</nowiki>
<br>
:'''表示'''
::[[File:example.jpg|link=メインページ|クリックするとメインページに移動します。]]
<br><br><br>
:画像ファイルを表示して、それをクリックするとDropboxに保管しているPDFファイルを表示するようなときは以下の記述を行います。
<div style="margin:8px 0 0 45px">
<nowiki>[[File:example.jpg|link=https://Dropbox.xxxxxxxxx|キャプション]]</nowiki>
</div>
<br>
<br>

=== 外部Webサイトの画像を埋め込む ===
:MediaWikiでは画像を表示するための手順が煩雑となります。
:まず、ファイルをアップロードして、そのファイルへのリンクを記述しなければなりません。
:しかしこのサイトでは、外部のWebサイトの画像を表示する場合は、画像ファイルのURLをそのまま記述すればOKです。
:例えばこんな感じ
::<nowiki>https://xxxxxx.xxx.jp/img/dummy.jpg</nowiki>
:これは便利ですね。
:外部サイトの画像を表示する場合は、当然ですが「著作権・肖像権」等への配慮が必要です。
<br>
:'''記述例'''
::<nowiki>https://image.jimcdn.com/app/cms/image/transf/dimension=740x1024:format=jpg/path/s6f03ff358ae85269/image/ieae309f03e3a89b0/version/1393241779/image.jpg</nowiki>
<br>
:'''表示例'''
::https://image.jimcdn.com/app/cms/image/transf/dimension=740x1024:format=jpg/path/s6f03ff358ae85269/image/ieae309f03e3a89b0/version/1393241779/image.jpg
<br>
:ただし、外部Webサイトの画像を埋め込むには、管理者による事前の設定が必要です (このサイトは既に設定済み)。
:設定方法の詳細は[[管理者用ヘルプ#10. 外部サイトの画像ファイルを直接埋め込む|「管理者用ヘルプ」の「10. 外部サイトの画像ファイルを直接埋め込む」]]を参照ください。

<br>
<br><br><br><br>
<br><br><br><br>
----

=== 質問・ご意見はこちら ===
:[mailto:wiki_admin@koyamadai100.jp お問い合わせ・ご意見のメールはこちら]
<br>
:上記リンクをクリックしてもメールソフトが起動しない場合は、以下のアドレスをコピーしてメールソフトの「宛先」に貼り付けてください。
:　【担当者メールアドレス】wiki_admin@koyamadai100.jp
<br><br>
----
:　[[【重要】ログアウトに注意！| ←「6. 【重要】ログアウトに注意！」]]　　[[リンク作成方法について| ←「7. リンク作成方法について」]]　　[[脚注を追加する。()等が不要で文章がスッキリする。 | →「9. 脚注を追加する。()等が不要で文章がスッキリする。」]]　　　[[表とタブ、そして段組方法について | →「10. 表とタブ、そして段組方法について」]]
:　[[#top| ↑ページトップへ]]　　　[[メインページ#編集者のためのヘルプ　ヘルプを表示／非表示| ↑↑「メインページ」の「編集者のためのヘルプ」に戻る]]　　　[[メインページ| ↑↑「メインページ」トップに戻る]]
----
脚注：　<references/>
<br>
･<br>
<div Align="right">
<span style="color:white;">
{{REVISIONYEAR}}年{{REVISIONMONTH1}}月{{REVISIONDAY}}日：直近編集者：{{REVISIONUSER}}<br>
TimeStamp：{{REVISIONTIMESTAMP}}
</span>
</div>