前回のブログエントリでは『ギャラリーを作る』に続き『スライドショーを作る』でページに画像をスライドショーとしてまとめて簡単に表示する方法を説明しました。
今回は閲覧者をさらにもっと楽しませることができるスライダーの作り方を説明します。スライダーの作り方は、ギャラリー表示に使う<gallery>タグにtype="slider"属性を加えるだけで、ギャラリーをスライダーとして表示することができます。 これは、編集画面右にあるメニューの「スライダ」を選択しても同様にして簡単に作ることができます。
このように記述します。
<gallery type="slider"> 履歴をファイルに絞り込んだ結果.png|キャプションA|link=ウィキア|linktext=画像またはリンク先記事の解説 名前空間をファイルに絞り込んで履歴閲覧.png|ここに画像かリンク先記事名等を記述|link=w:c:community|linktext=ここに画像またはリンク先記事の解説を書く アップロード記録.png 最近の更新画面.png </gallery>
すると次のように表示されます。数秒おきに画像が自動的にスライドします。下には自動的にサムネイルが表示されます。 リンクをちゃんと指定していれば、画像を直接クリックするか、「さらに読む」をクリックすればリンク先にジャンプします。
この方法で記事を紹介するときは「キャプション」にその記事名、linkに記事へのリンク、linktextにその記事の簡単な解説と紹介を書いてみるといいでしょう。
次のように<gallery>タグに orientation="right" 属性を追記すれば、スライダーの下部に表示される画像または記事の説明とサムネイルを表示する位置を右側に縦表示で移動させることもできます。
<gallery type="slider" orientation="right"> ユーザーページから投稿記録へ.png|キャプションA|link=ウィキア|linktext=ここに簡潔な解説や概要を記述 自分のユーザーページへのリンク.png|キャプション|link=w:c:community|linktext=ここに簡潔な概要や説明などを記述 URL入力欄.png 検索窓に入力する.png </gallery>
するとこのように表示されます。
動画を追加すると？[]
このスライダーでは動画を追加することもできます。動画は画像などのファイルと同じように扱われるので、ファイルまったく同じように記述します。たとえば、下記の例では動画File:Welcome to Wikia's Youtube!を先頭のスライダーに追加しています。スライダーに表示された動画をクリックすれば、その動画を再生することができます。ただし、動画をクリックしても "link=" で指定したリンク先記事にジャンプすることはできません。かわりに、「さらに読む」ボタンを指定すればリンク先記事にジャンプできます。
<gallery type="slider"> Welcome to Wikia's Youtube!|メインページ|link=メインページ|linktext=クリックするとメインページにジャンプします 最近の更新画面.png|キャプションB|link=ウィキア|linktext=「ウィキア」へジャンプ アップロード記録.png|キャプションC|link=ウィキア|linktext=「ウィキア」へジャンプ </gallery>
おわりに[]
スライダーを使ってページを際立たせて面白くする方法を紹介しました。
このスライダーは、各ウィキアのメインページで使用すると、 閲覧者をわくわくさせ人目を引くことができるので、ぜひとも活用してみましょう！
関連[]
- 同じ<gallery>タグを使って次のようなものも作ることができます。
- User blog:Gurgate/ギャラリーを作る - ギャラリーの簡単な例とソース
- User blog:Gurgate/スライドショーを作る - スライドショーの簡単な例とソース
- w:c:Help:Galleries, Slideshows, and Sliders - ギャラリー、スライダー、スライドショーについての解説 (英語)