スライドショーを作る

前回のブログエントリでは『ギャラリーを作る』でページに画像をフォトギャラリーのようにまとめて簡単に表示する方法を説明しました。

今回は閲覧者をもっと楽しませることができるスライドショーの作り方を説明します。見ているだけでもっと楽しくなる、画像をまとめて表示する<gallery>タグによる方法を紹介します。スライドショーの作り方は、ギャラリー表示に使う<gallery>タグにtype="slideshow"属性を加えるだけです。これでギャラリーをスライドショーに切り替えることができます。

<gallery type="slideshow">
自分のユーザーページへのリンク.png
URL入力欄.png
検索窓に入力する.png
サムネイル表示.png
</gallery>

と記述すると、次のように表示されます。

次のように、中央揃え (position="center")、表示幅 (width="348")、画像の一部をトリミングして拡大表示 (crop="true") の設定もできます。さらにキャプションやリンク、リンクテキストも加えることができます。リンクテキストを加えると、スライドショーのスライドにマウスをあわせたときに、その画像の左上に「(リンクテキスト名)へ」と表示されます。

<gallery type="slideshow" position="center" widths="348" crop="true" navigation="true">
ユーザーページから投稿記録へ.png|キャプションA|link=ウィキア|linktext=リンクテキスト
自分のユーザーページへのリンク.png
URL入力欄.png
</gallery>

これを記述すると、次のように表示されます。

キャプションA
ウィキアへ

非常にシンプルで便利な画像表示機能を解説しました。この機能を使うと、見ている人も楽しくなり、わくわくさせることができます。

次は、「スライダー」について解説します。

主にメインページで閲覧者を惹きつけるために使用されているものです。

スライダーを使うとさらに閲覧者を楽しませることができるかもしれません！

スライドショーを作る

関連[]