ギャラリーを作る

前回のブログエントリでは『【画像】画像の表示方法をカスタマイズする』でページに画像をさまざまな形で表示する方法を説明しました。

今回は閲覧者も見ているだけでもっと楽しくなる、画像をまとめて表示する<gallery>タグによる方法を紹介します。

このタグを使って複数の画像を表示しようとすると、このようになります。

このギャラリーは次のように画像ファイル名を並べて<gallery>タグで囲うだけ表示できます。


<gallery>
ユーザーページから投稿記録へ.png
自分のユーザーページへのリンク.png
URL入力欄.png
検索窓に入力する.png
アップロード画面上のファイルアップロードボタン.png
ファイルのライセンス選択ドロップダウンメニュー.png
画像アップロードボタン.png
自動的に貼り付けられた画像ウィキマークアップ.png
</gallery>

ファイル名の先頭の「File:」や「ファイル:」を記述しても同じように表示されますが、追記する必要はありません。省略することができます。

また、編集画面の右側にあるメニューから「機能とメディアを追加」で「ギャラリー」を選択しても同じようなことができます。

次のように、これにパイプ ( | ) をつけてキャプションやリンクを加えることもできます。


<gallery navigation="true">
ユーザーページから投稿記録へ.png|キャプションA|link=ウィキア
自分のユーザーページへのリンク.png|キャプションB|link=w:c:community
URL入力欄.png|キャプションC
検索窓に入力する.png|link=http://www.wikia.com/
</gallery>

この結果は次のようになります。最初の3つ画像にリンクが貼られ、３つ目以外の画像にキャプションがついていることがわかります。 link=をつけていない画像をクリックすると、ただその画像のページに飛ぶだけとなります。

<gallery>タグを<gallery orientation="landscape" position="center" spacing="small">のように記述すると、ギャラリーが中央 (position="center")、画像間の余白が小さくなり (spacing="small")、画像の中央の部分がクローズアップ (orientation="landspace") されます。


<gallery orientation="landscape" position="center" spacing="small" navigation="true">
ユーザーページから投稿記録へ.png|キャプションA|link=ウィキア
自分のユーザーページへのリンク.png|キャプションB|link=w:c:community
URL入力欄.png|キャプションC
検索窓に入力する.png|link=http://www.wikia.com/
</gallery>

こちらの方が、[[File:]]による記述よりもシンプルで、フォトギャラリーのようにまとめて複数の画像を表示することができますね。

ギャラリーを作る

関連[]