ウェブサイト用HTML5でエクスポートすることで、PhotoStageプロジェクトをウェブサイトに統合できるスライドショーとして出力することができます。 ウェブサイトのソースコード(HTML、CSS、Javascript)とdependencies(依存関係)の画像が選択した保存場所に作成されます。最新版では画像とエフェクト(アニメーション以外)、クロスフェードの切替効果のみに対応しています。 エクスポートのオプション エクスポートのダイアログには以下のようなオプションがあります: - 保存先:ウェブサイト用ファイルが保存されるディレクトリです。ソースファイル(htmlはslideshow.html、cssはslideshow_style.css、javascriptはslideshow_script.js)はルートディレクトリに保存され、依存関係にある画像は「html」という名前のフォルダ内に保存されます。
- 解像度:出力スライドショー画像の解像度です。自動一致を選択すると全ての画像がフィットする最小の解像度を自動的に選択します。
- 出力オプション:
- ページ読み込み時にスライドショーを自動再生:ページが読み込まれた際にスライドショーを自動的に再生し再生ボタンを表示しません。
- 自動的にスライドショーをループ再生:再生時にスライドを自動的にループ再生します。
- 全画面表示ボタンを含む:スライドショーの右下に全画面表示用のボタンを挿入します。
- スライドショーの下にナビゲーションバーを含む:複数のスライド感をナビゲートするナビゲーション用バーを挿入します。
- NCHロゴの透かしを含む:スライドショーの中央下部にNCHのロゴをウォーターマークとして挿入します。ウォーターマークの削除には有料版の購入が必要です。
ウェブサイトとの統合 新しく作成するウェブページにスライドーショーを挿入する手順はとても簡単です。ウェブサイト用HTML5にエクスポートするとサンプルHTMLファイル(index.html)が作成されるので、これを元にしてウェブページを作成できます。 サンプルHTMLにはslideshow.htmlをソースとした<iframe>タグが含まれています。<iframe>を親コンテナ(<div>)のサイズに続けて記入するとより分かりやすいレイアウトになります。 ウェブサイト上のスライドショーが正しく表示されるために、全てのコンテンツをホスティングサイト(例:ウェブサーバー)の「保存先」ディレクトリにコピーします。 既存のウェブページにスライドショーを挿入するには以下のコードをHTMLファイルにコピー貼り付けします。スライドショーのサイズを定義する親コンテナ内の<iframe>タグと似たようなタグを使います。 これには「保存先」ディレクトリのコンテンツをindex.html以外のホストにコピーする必要があります。<iframe>を使ってウェブサイトにスライドショーを挿入します。必要に応じて<div>の高さと幅を調節することができます。 <div style="width:640px; height:690px; margin:auto"> <!-- iframeの幅と高さは親ファイルを元にした割合で指定します。 --> <!-- 余白を"auto"(自動)に設定するとiframeがdiv内の上下中央にセンタリングされます --> <!-- 枠線のスタイルを"none"(無し)に設定するとiframeのデフォルトの枠線が消去されます --> <iframe src="slideshow.html" style="width:100%; height:100%; margin:auto; border-style:none"> </iframe> </div> スライドショーは上位レベルのコンテナ(例:他の<div>または<body>)に合わせてセンタリグされるようデフォルト設定されています。 変更するには以下の作業を<iframe>が含まれている<div>で行います: 左寄せにするにはmargin:autoをfloat:leftに変更し、右寄せするにはfloat:rightに変更します。 |