MB-Support

パソコン初心者のサポートページ

3.ホームページにフルスクリーンスライドショーを設置する方法

 無料で使える PicLens Publisher は、ウィザード形式でスライドショーが作成できるツールです。 このページでは、PicLens Publisher で作成された サムネイルを一覧表示する gallery.html と、画像のアドレスが入力された photos.rss の関係を紹介します。


前回 PicLens Publisher でスライドショーに必要なファイルを作成して、サーバーに転送しました。 今回は使い方をご紹介します。PicLens Publisher で生成した初期状態が右です。 まずはこのファイルにブラウザでアクセスします。アドレスは、初期状態で「gallery.html」です。サーバーに転送した「gallery.html」にアクセスしましょう。 以下は管理人が作成したページです。ファイル名だけ変更してあります。

サンプルページ1



gallery.html のソースは以下

HTMLソース(メモ帳)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<!-- Step 1: Add a Photos RSS feed to this webpage. //-->
<link rel="alternate" href="photos.rss" type="application/rss+xml"
 title="" id="gallery" />
<!-- Step 2: Include the PiclensLite JavaScript. //-->
<script type="text/javascript"
 src="http://lite.piclens.com/current/piclens.js"></script>
<style type="text/css">
a { color: #00f; }
#pl_main { width: 700px; margin: 20px auto; font-family: Arial;
 font-size: 14px; line-height: 18px; color: #333; }
table.gallery { padding: 5px; width: 100%; }
table.gallery td { text-align: center; }
table.gallery img { padding: 5px; margin: 2px; border: 1px solid #ccc;
 max-width: 120px; max-height: 120px; }
.mbf-item { display: none; }
</style>
</head>
<body>
	<div id="pl_main">
	<h1></h1>
	<hr size="1" style="color:#ccc" />
		<table class="gallery">
		<tr>
		<td><a href="pl_images/hamaki001.jpg">
			<img src="pl_thumbs/hamaki001_thumb.jpg">
			<span class="mbf-item">
			#gallery a2a847c0-ddc0-4298-9494-6c73a04c2b9c
			</span>
		</a></td>

		---------------省略-----------------------------------

		<td><a href="pl_images/hamaki022.jpg">
		<img src="pl_thumbs/hamaki022_thumb.jpg">
		<span class="mbf-item">
		#gallery bffbbae5-b0f9-4363-9f0a-ca3d7ac3a863
		</span>
		</a></td>
		</tr>
		</table>
	<hr size="1" style="color:#ccc">
		<div>
		<a href="javascript:PicLensLite.start();">
		Start Slide Show <img src="
		http://lite.piclens.com/images/PicLensButton.png"
		 alt="PicLens" width="16" height="12"
		 border="0" align="absmiddle"></a>
		</div>
	</div>
</body>
</html>

<title></title>

タイトルが入力されていません。<title></title> の間にページタイトルを入力します。 これはスライドショーとは関係なく、ホームページを作成する基本です。タイトルが入力されていない場合、アドレスがブラウザにそのまま表示されます。

例:<title>マイホームページのスライドショー</title>



RSSへのリンク

<link rel="alternate" href="photos.rss" type="application/rss+xml"
 title="" id="gallery" />

<head> と </head> の間に RSS へのリンクが入力されています。これは、PicLens Publisher で作成したファイルをフォルダごと転送した場合、変更する必要はありません。gallery.html と photos.rss は同一ディレクトリに存在します。この記述が無いと、スライドショーを実行できません。 もし、rss ファイルの名前を変更するのであれば、このリンクに埋め込まれた「photos.rss」も変更する必要がります。 また、フォルダを移動した場合は、「photos.rss」に入力された各画像へのアドレスも正しく変更する必要があります。 特に事情が無い限り変更する必要は無いでしょう。



このファイルは、RSS なので、RSS リーダー、もしくは、フィードリーダーを搭載したブラウザであれば登録する事ができます。 右は、Internet Explorer 7 でアクセスした状態です。リンクは各画像のオリジナルサイズに指定されています。 RSS リーダーを搭載していないブラウザでは、XML のデフォルトスタイルで表示されます。



外部 JavaScript へのリンク

<script type="text/javascript" src="
http://lite.piclens.com/current/piclens.js"></script>

これは、スライドショーを実行するための JavaScript です。絶対パスで外部にリンクされているので、自分がスライドショーを公開するサーバーに置く必要はありません。 どこから JavaScript を読み込むか?それは、PicLens や、 PicLens Publisher を提供するサイトです。



スタイルシート

<style type="text/css">
a { color: #00f; }
----------省略---------------------------
.mbf-item { display: none; }
</style>

スタイルシートも記入されています。「gallery.html」のレイアウトは、<div>〜</div> の中にテーブルを配置してサムネイルを表示しています。スタイルシートはリンク a に関するフォントカラーと、ページの横幅( 700px )とフォント、間隔、を制御する ID #pl_main、テーブルのテキストを表示する位置を制御する クラス table.gallery、テーブル内の各サムネイルを表示する部分を制御するクラス table.gallery td、サムネイルのマージンやサイズを制御する table.gallery img から構成されています。

そして、大切なのはクラス .mbf-item です。これが指定されているのは <span>〜</span> で、このタグに囲まれた部分は非表示となっています。この部分は以下で説明します。



ページタイトル <h1>

<div id="pl_main">
<h1></h1>

ページの上部にタイトルを表示させたい場合は、<h1>〜</h1>の間に入力します。

例:<h1>マイホームページのスライドショー</h1>

h1 に関するスタイルシートは定められていないので、通常表示となります(フォントサイズが大きくなり、ブロックラインレベル、タイトルや見出しなどを表すタグです)。





戻る 一覧表示 次へ


Copyright © 2018 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項