画像ファイルの表示の方法

提供: 広島大学デジタル博物館
ナビゲーションに移動検索に移動

画像ファイルの表示の方法

デジタル博物館での画像ファイルの表示の方法について解説します.スマートフォンでの閲覧を考慮し,最近ではページの最初に表示する画像は2~3枚のサムネイル表示に留め,残りの画像はギャラリーに回すことが多くなりつつあります.

サムネイル表示する場合

  1. デジタル博物館にログインします.
  2. 画像を貼り付けたいページに移動し,「編集」タブをクリックします.


内部リンク[[]](半角大カッコ2つ)で画像ファイルを囲います.例えば,「20201027モミジバフウ紅葉02_東広島市鏡山_池田撮影_IMG_60615s.JPG」というファイルを幅200ピクセルでサムネイル表示するとします.


[[ファイル:20201027モミジバフウ紅葉02_東広島市鏡山_池田撮影_IMG_60615s.JPG|200px|thumb|right|工学部周辺のカエデ通りに植えられたモミジバフウは赤く紅葉する.(広島県東広島市鏡山; 撮影: 池田誠慈, Oct. 27, 2020)]]

と記述すると,以下のように画像ファイルが表示されます.

工学部周辺のカエデ通りに植えられたモミジバフウは赤く紅葉する.(広島県東広島市鏡山; 撮影: 池田誠慈, Oct. 27, 2020)


区切りの記号は「|(半角パイプ)」と呼ばれ,入力モードを半角にしてキーボードのShiftキーを押しながらと¥マークのキーを押すことで入力できます.


上記の例では,「200px」と指定することで幅を200ピクセルにしています.また,「thumb」と指定することでサムネイル表示にしています.大抵サムネイル表示に指定すれば問題ありません.「right」または「右」と指定することで画面右に画像を表示します.通常は「right」で問題ありません.


細かい表示のオプションについてはまたの機会に紹介します.

ギャラリー表示する場合

  1. デジタル博物館にログインします.
  2. 画像を貼り付けたいページに移動し,「編集」タブをクリックします.


幅最大250ピクセル,高さ最大250ピクセルに指定する場合,<gallery mode="nolines" widths="250" heights="250">と</gallery>で画像ファイルを囲います.

<gallery mode="nolines" widths="250" heights="250">
ファイル:20201027モミジバフウ紅葉02_東広島市鏡山_池田撮影_IMG_60615s.JPG|工学部周辺のカエデ通りに植えられたモミジバフウは赤く紅葉する.(広島県東広島市鏡山; 撮影: 池田誠慈, Oct. 27, 2020)
</gallery>

区切りの記号は「|(半角パイプ)」と呼ばれ,入力モードを半角にしてキーボードのShiftキーを押しながらと¥マークのキーを押すことで入力できます.以下のように表示されます.

ギャラリーでは複数のファイルを指定することが多いです.以下のように並べます.

<gallery mode="nolines" widths="250" heights="250">
ファイル:20201027モミジバフウ紅葉02_東広島市鏡山_池田撮影_IMG_60615s.JPG|工学部周辺のカエデ通りに植えられたモミジバフウは赤く紅葉する.(広島県東広島市鏡山; 撮影: 池田誠慈, Oct. 27, 2020)
ファイル:20201027モミジバフウ落ち葉_東広島市鏡山_池田撮影_IMG_60616s.JPG|モミジバフウの落ち葉(広島県東広島市鏡山; 撮影: 池田誠慈, Oct. 27, 2020)
</gallery>


ここで,サムネイル表示の際の表記を用いていても無視されます.写真の入れ替えで画面右上にサムネイル表示する可能性がある場合は表記を残しておいてもいいかもしれません.

<gallery mode="nolines" widths="250" heights="250">
ファイル:20201027モミジバフウ紅葉02_東広島市鏡山_池田撮影_IMG_60615s.JPG|200px|thumb|right|工学部周辺のカエデ通りに植えられたモミジバフウは赤く紅葉する.(広島県東広島市鏡山; 撮影: 池田誠慈, Oct. 27, 2020)
ファイル:20201027モミジバフウ落ち葉_東広島市鏡山_池田撮影_IMG_60616s.JPG|200px|thumb|right|モミジバフウの落ち葉(広島県東広島市鏡山; 撮影: 池田誠慈, Oct. 27, 2020)
</gallery>


備考

  • MediaWikiではファイルの拡張子が大文字の「JPG」と小文字の「jpg」が区別されます.上手く表示されない時,拡張子が違っていたということが時々あります.
  • 細かいテクニックですが,「<gallery mode="nolines" widths="250" heights="250">」や「</gallery>」は読みを「ぎゃらりー」として辞書登録しておくと編集が非常にスムーズにになります.