転生したらスライムだった件Wiki

「テンプレート:外部画像ギャラリー」の版間の差分

テンプレート 議論

テンプレート:外部画像ギャラリー (編集)

2026年9月2日 (水) 09:13時点における版

13,176 バイト追加 、 昨日 09:13
編集の要約なし
編集の要約なし
編集の要約なし
 
1行目: 1行目:
<div class="ts-gallery"><div class="ts-gallery__track">{{#if:{{{画像1|}}}|<div class="ts-gallery__item"><div class="ts-gallery__imagebox"><img src="{{{画像1}}}" alt="{{{alt1|}}}" loading="lazy" decoding="async"></div><div class="ts-gallery__caption">{{{説明1|}}}{{#if:{{{出典1|}}}|<br><span class="ts-gallery__source">出典:{{{出典1}}}</span>}}</div></div>}}{{#if:{{{画像2|}}}|<div class="ts-gallery__item"><div class="ts-gallery__imagebox"><img src="{{{画像2}}}" alt="{{{alt2|}}}" loading="lazy" decoding="async"></div><div class="ts-gallery__caption">{{{説明2|}}}{{#if:{{{出典2|}}}|<br><span class="ts-gallery__source">出典:{{{出典2}}}</span>}}</div></div>}}{{#if:{{{画像3|}}}|<div class="ts-gallery__item"><div class="ts-gallery__imagebox"><img src="{{{画像3}}}" alt="{{{alt3|}}}" loading="lazy" decoding="async"></div><div class="ts-gallery__caption">{{{説明3|}}}{{#if:{{{出典3|}}}|<br><span class="ts-gallery__source">出典:{{{出典3}}}</span>}}</div></div>}}{{#if:{{{画像4|}}}|<div class="ts-gallery__item"><div class="ts-gallery__imagebox"><img src="{{{画像4}}}" alt="{{{alt4|}}}" loading="lazy" decoding="async"></div><div class="ts-gallery__caption">{{{説明4|}}}{{#if:{{{出典4|}}}|<br><span class="ts-gallery__source">出典:{{{出典4}}}</span>}}</div></div>}}</div></div>
<includeonly><div class="ts-gallery"><div class="ts-gallery__track">{{#if:{{{画像1|}}}|<div class="ts-gallery__item"><div class="ts-gallery__imagebox"><img src="{{{画像1}}}" alt="{{{alt1|}}}" loading="lazy" decoding="async"></div><div class="ts-gallery__caption">{{{説明1|}}}{{#if:{{{出典1|}}}|<br><span class="ts-gallery__source">出典:{{{出典1}}}</span>}}</div></div>}}{{#if:{{{画像2|}}}|<div class="ts-gallery__item"><div class="ts-gallery__imagebox"><img src="{{{画像2}}}" alt="{{{alt2|}}}" loading="lazy" decoding="async"></div><div class="ts-gallery__caption">{{{説明2|}}}{{#if:{{{出典2|}}}|<br><span class="ts-gallery__source">出典:{{{出典2}}}</span>}}</div></div>}}{{#if:{{{画像3|}}}|<div class="ts-gallery__item"><div class="ts-gallery__imagebox"><img src="{{{画像3}}}" alt="{{{alt3|}}}" loading="lazy" decoding="async"></div><div class="ts-gallery__caption">{{{説明3|}}}{{#if:{{{出典3|}}}|<br><span class="ts-gallery__source">出典:{{{出典3}}}</span>}}</div></div>}}{{#if:{{{画像4|}}}|<div class="ts-gallery__item"><div class="ts-gallery__imagebox"><img src="{{{画像4}}}" alt="{{{alt4|}}}" loading="lazy" decoding="async"></div><div class="ts-gallery__caption">{{{説明4|}}}{{#if:{{{出典4|}}}|<br><span class="ts-gallery__source">出典:{{{出典4}}}</span>}}</div></div>}}</div></div></includeonly><noinclude>
{{Documentation subpage}}
 
'''外部画像ギャラリー'''は、公式サイトなどで公開されている外部画像を、生の画像URLを利用して横スライド式のギャラリーとして表示するためのテンプレートです。
 
画像ファイルをWikiへアップロードせず、外部サイト上の画像を直接表示します。
 
パソコンでは複数の画像を横方向に並べて表示し、画像数が多い場合は横にスクロールできます。スマートフォンでは横方向にスワイプして閲覧できます。
 
現在、1つのギャラリーにつき'''最大4枚'''の画像を指定できます。
 
== 使用方法 ==
 
以下を記事にコピーし、必要な項目を入力してください。
 
<pre>
{{外部画像ギャラリー
|画像1=
|alt1=
|説明1=
|出典1=
 
|画像2=
|alt2=
|説明2=
|出典2=
 
|画像3=
|alt3=
|説明3=
|出典3=
 
|画像4=
|alt4=
|説明4=
|出典4=
}}
</pre>
 
すべての画像を指定する必要はありません。
 
例えば2枚だけ掲載する場合は、画像1と画像2のみを入力し、画像3・画像4は削除するか空欄のままにしてください。
 
== 引数 ==
 
{| class="wikitable"
! 引数
! 必須
! 説明
|-
| <code>画像1</code> ～ <code>画像4</code>
| 画像1のみ必須
| 表示する画像の'''生URL'''を入力します。画像そのものを直接開いた際のURLを指定してください。
|-
| <code>alt1</code> ～ <code>alt4</code>
| 推奨
| 画像が表示できない場合や、スクリーンリーダーを利用する場合に使用される画像の説明です。「レインの画像」ではなく、「小説『転生したらスライムだった件』に登場するレイン」のように、画像の内容が分かる文章を記述してください。
|-
| <code>説明1</code> ～ <code>説明4</code>
| 推奨
| 画像下に表示する説明文です。イラストレーター、媒体、場面など、その画像が何を示しているのかを簡潔に記載します。内部リンクも使用できます。
|-
| <code>出典1</code> ～ <code>出典4</code>
| 強く推奨
| 画像が掲載されているページ、著作権表記、閲覧日などを記載します。画像URLそのものではなく、'''その画像が掲載されている公式ページ'''へリンクしてください。
|}
 
== 基本的な使用例 ==
 
<pre>
{{外部画像ギャラリー
|画像1=https://example.com/image1.jpg
|alt1=小説『転生したらスライムだった件』に登場するレイン
|説明1=[[みっつばー]]によるレイン。
|出典1=[https://example.com/ 公式サイト]<br>©権利者名<br>2026年9月2日閲覧。
 
|画像2=https://example.com/image2.jpg
|alt2=アニメ『転生したらスライムだった件』に登場するレイン
|説明2=TVアニメ版のレイン。
|出典2=[https://example.com/ TVアニメ公式サイト]<br>©川上泰樹・伏瀬・講談社／転スラ製作委員会<br>2026年9月2日閲覧。
}}
</pre>
 
== 実際の使用例 ==
 
[[レイン]]の記事で使用する場合の例。
 
<pre>
{{外部画像ギャラリー
|画像1=https://cs1.animestore.docomo.ne.jp/anime_kv/html/CJ/img/tensuraX_inte_img11_202312.png
|alt1=小説『転生したらスライムだった件』に登場するレイン
|説明1=[[みっつばー]]によるレイン。
|出典1=[https://animestore.docomo.ne.jp/animestore/book/CJ/CJ00000015 「転スラ」の10年がわかる10周年記念書籍「転スラX」特集]<br>(c)2023 Fuse (c)MICRO MAGAZINE 2023 Printed in Japan<br>(c)伏瀬・みっつばー／マイクロマガジン社<br>©伏瀬・川上泰樹／講談社<br>(c)川上泰樹・伏瀬・講談社／転スラ製作委員会<br>2025年2月25日閲覧。
}}
</pre>
 
== 画像URLの取得方法 ==
 
このテンプレートの「画像」には、画像が掲載されているページのURLではなく、'''画像そのもののURL'''を入力します。
 
例えば、
 
<pre>
https://example.com/news/12345
</pre>
 
ではなく、
 
<pre>
https://example.com/images/rain.jpg
</pre>
 
のようなURLを指定します。
 
画像URLの取得方法については、[[ヘルプ:記事の書き方#外部サイトの画像|記事の書き方「外部サイトの画像」]]も参照してください。
 
== 使用する画像について ==
 
外部画像であれば、どの画像でも使用してよいわけではありません。
 
原則として、以下のような'''公式または権利者に近い一次情報'''から画像を選んでください。
 
* 『転生したらスライムだった件』公式サイト
* アニメ公式サイト
* 出版社公式サイト
* 作者・イラストレーター等の公式サイト・公式SNS
* 公式ゲームサイト・公式ゲームSNS
* 商品を発売する企業の公式サイト
* コラボ先の企業・ゲーム等の公式サイト
* その他、画像の権利者または関係企業が公開しているページ
 
次のような画像は原則として使用しないでください。
 
* 違法アップロードされた画像
* 無断転載サイトの画像
* 出典が確認できない画像
* 個人ブログ等に転載されている公式画像
* 出所不明のSNS投稿
* 公式画像を第三者が加工・再配布したもの
 
公式サイトに同じ画像が存在する場合は、まとめサイトや通販サイト等ではなく、'''できる限り公式サイト側の画像を使用してください'''。
 
== 出典の書き方 ==
 
画像を掲載する場合は、画像そのものだけでなく、その画像が'''どこで公開されているものなのか'''が分かるようにしてください。
 
基本的には、
 
<pre>
|出典1=[掲載ページURL ページ名]<br>
著作権表記<br>
2026年9月2日閲覧。
</pre>
 
のように記載します。
 
=== 例 ===
 
<pre>
|出典1=[https://example.com/news/1234 キャラクター紹介]<br>
©伏瀬・川上泰樹／講談社／転スラ製作委員会<br>
2026年9月2日閲覧。
</pre>
 
画像URLそのものを出典としてリンクするのではなく、可能な限り'''画像が掲載されている元ページ'''を出典にしてください。
 
== 説明文について ==
 
「説明」には、その画像を見ただけでは分からない情報を簡潔に記載します。
 
例えば、
 
<pre>
|説明1=[[みっつばー]]によるレイン。
</pre>
 
<pre>
|説明2=TVアニメ第3期に登場したレイン。
</pre>
 
のように記載します。
 
出典と同じ情報を何度も繰り返す必要はありません。
 
== altについて ==
 
<code>alt</code> は、画像を見ることができない利用者にも内容が伝わるようにするための説明です。
 
悪い例：
 
<pre>
|alt1=画像
</pre>
 
<pre>
|alt1=レイン
</pre>
 
推奨例：
 
<pre>
|alt1=小説『転生したらスライムだった件』に登場するレイン
</pre>
 
画像内で何が描かれているのかが簡潔に分かる文章にしてください。
 
== 表示について ==
 
画像は、縦長・横長など元画像の縦横比が異なっていても、ギャラリー内の一定の表示領域に収まるように調整されます。
 
元画像の縦横比は維持され、画像全体を表示することを前提としています。そのため、画像によっては上下または左右に余白が表示されます。
 
パソコンでは複数の画像が横方向に並び、必要に応じて左右へ移動できます。
 
スマートフォンでは、横方向へスワイプすることで次の画像へ移動できます。
 
そのため、従来のように
 
<pre>
<nomobile>
...
</nomobile>
 
<mobileonly>
...
</mobileonly>
</pre>
 
を使って、パソコン用とスマートフォン用の画像表示を別々に作成する必要はありません。
 
== 注意事項 ==
 
=== 外部画像は表示されなくなる場合があります ===
 
本テンプレートは外部サイトの画像URLを直接読み込んでいます。
 
そのため、外部サイト側でURLが変更・削除された場合、Wiki側では画像が表示されなくなることがあります。
 
画像が表示されなくなっているのを見つけた場合は、元の公式ページを確認し、新しい画像URLへ修正してください。
 
=== 生URLを使用してください ===
 
次のようなWebページのURLを「画像」に入力しても表示できません。
 
<pre>
https://example.com/character/rain/
</pre>
 
画像そのものを開いた、
 
<pre>
https://example.com/images/rain.jpg
</pre>
 
のようなURLを使用してください。
 
=== URLに特殊なパラメータが付いている場合 ===
 
サイトによっては、
 
<pre>
https://example.com/image?id=123&size=large
</pre>
 
のようなURLが使われている場合があります。
 
このようなURLを無理に書き換えると画像が表示されなくなることがあります。画像を直接開いた状態で正常に表示されるURLを使用してください。
 
=== 同じ画像を重複して掲載しない ===
 
同じイラストや場面を、サイズ違い・掲載サイト違いというだけで複数枚掲載する必要はありません。
 
キャラクターの姿や媒体ごとの違いが分かる画像など、記事を理解するうえで意味のある画像を選んでください。
 
== 画像を追加する場合 ==
 
現在は最大4枚まで使用できます。
 
例えば3枚目を追加する場合は、
 
<pre>
|画像3=https://example.com/image3.jpg
|alt3=3枚目の画像の説明
|説明3=3枚目のキャプション。
|出典3=[https://example.com/ 公式サイト]<br>著作権表記<br>2026年9月2日閲覧。
</pre>
 
を追加します。
 
画像番号と、<code>alt</code>・<code>説明</code>・<code>出典</code>の番号は必ず揃えてください。
 
例えば、
 
<pre>
|画像2=
|alt3=
</pre>
 
のように番号がずれると、意図した画像に説明が表示されません。
 
== 関連項目 ==
 
* [[ヘルプ:記事の書き方#画像や動画を貼る|ヘルプ:記事の書き方 - 画像や動画を貼る]]
* [[ヘルプ:記事の書き方#外部サイトの画像|ヘルプ:記事の書き方 - 外部サイトの画像]]
 
<templatedata>
{
"params": {
"画像1": {
"label": "画像1",
"description": "1枚目に表示する外部画像の生URL。",
"type": "url",
"required": true
},
"alt1": {
"label": "画像1の代替テキスト",
"description": "1枚目の画像内容を説明する代替テキスト。",
"type": "string",
"suggested": true
},
"説明1": {
"label": "画像1の説明",
"description": "1枚目の画像下に表示する説明文。",
"type": "content",
"suggested": true
},
"出典1": {
"label": "画像1の出典",
"description": "1枚目の画像の掲載ページ、著作権表記、閲覧日など。",
"type": "content",
"suggested": true
},
"画像2": {
"label": "画像2",
"description": "2枚目に表示する外部画像の生URL。",
"type": "url"
},
"alt2": {
"label": "画像2の代替テキスト",
"description": "2枚目の画像内容を説明する代替テキスト。",
"type": "string"
},
"説明2": {
"label": "画像2の説明",
"description": "2枚目の画像下に表示する説明文。",
"type": "content"
},
"出典2": {
"label": "画像2の出典",
"description": "2枚目の画像の掲載ページ、著作権表記、閲覧日など。",
"type": "content"
},
"画像3": {
"label": "画像3",
"description": "3枚目に表示する外部画像の生URL。",
"type": "url"
},
"alt3": {
"label": "画像3の代替テキスト",
"description": "3枚目の画像内容を説明する代替テキスト。",
"type": "string"
},
"説明3": {
"label": "画像3の説明",
"description": "3枚目の画像下に表示する説明文。",
"type": "content"
},
"出典3": {
"label": "画像3の出典",
"description": "3枚目の画像の掲載ページ、著作権表記、閲覧日など。",
"type": "content"
},
"画像4": {
"label": "画像4",
"description": "4枚目に表示する外部画像の生URL。",
"type": "url"
},
"alt4": {
"label": "画像4の代替テキスト",
"description": "4枚目の画像内容を説明する代替テキスト。",
"type": "string"
},
"説明4": {
"label": "画像4の説明",
"description": "4枚目の画像下に表示する説明文。",
"type": "content"
},
"出典4": {
"label": "画像4の出典",
"description": "4枚目の画像の掲載ページ、著作権表記、閲覧日など。",
"type": "content"
}
},
"description": "外部サイトで公開されている画像を、生URLから横スライド式のギャラリーとして表示するテンプレートです。"
}
</templatedata>
 
[[カテゴリ:画像関連テンプレート]]
</noinclude>
「https://tensura-wiki.info/wiki/特別:携帯機器差分/4269」から取得