XHTMLベースのスライドシステム Naked Slide を公開

XHTML + CSS + JavaScriptによるシンプルなスライドショーシステム

Naked Slide (このウェブサイトで利用しているスライドプレゼンテーションのためのCSS ,JavaScript) を公開します。

このウェブサイトの主なページの「閲覧モード」の中の「プレゼン」ボタンをクリックすると表示されるスライドで利用しているものです。

スライドを簡単に作成するための Movable Type 4.0用テンプレート及びプラグインを同梱していますので、既存のウェブページやブログ等を利用して簡単にスライドショーが作成できます。

ダウンロードとライセンス

ご利用について

• Creative Common Lisense BY-NC-SA 2.1 JP (クリエイティブ・コモンズ 表示-非営利-継承 2.1 日本 ライセンス) の下で公開します。
• ご利用方法については同梱の readme.txt をご覧ください。

ダウンロード

• NakedSlidev0.2.zip (12KB)

スライドの作成方法について

<title> ~ </title>

• スライドのタイトルが入ります。
• スライド中の左上のスライドのタイトルとして表示されます。

<div id="nakedSlideDocInfo">

• スライドトップページに表示する情報が入ります。
• スタイルシートでレイアウトを修正することも可能です。

<div id="nakedSlideAll">

• スライドとなる各ブロックすべてを包含するコンテナです。

<div class="nakedSlide">

• 1スライドの内容を包含します。

<foo class="nakedSlidePoint">

• <div class="nakedSlide"> 内の要素に付加する事で初期状態ではグレーアウトされます。
• キーアクション又はクリックで逐次表示することができます。

記述例)
<p>あいうえお<span class="nakedSlidePoint">かきくけこ</span>さしすせそ</p>

スライドの操作方法について

キーボードによる操作

• 右 or スペース or Enter : 次へ進む
• 左 or ctrl + スペース : 前へ戻る
• 下 : 下スクロール
• 上 : 上スクロール
• ctrl + 右 : 次のスライド（class="nakedSlidePoint"を無視して進む）
• ctrl + 左 : 前のスライド（class="nakedSlidePoint"を無視して戻る）
• Homeキー : トップのスライドに戻る

Movable Type でのスライドテンプレート作成について

naked_slide.tmpl

各ページの「抜粋(概要) - excerpt」欄を各スライドの内容とするサンプルです。Movable Type 4 の新機能「ウェブページ」を利用したサンプルです。

NakedSlideFilter.pl

MTフォルダの plugins フォルダにコピーして利用してください。

(タグの指定方法)
<$MTPageExcerpt NakedSlideFilter="p,li,h2"$>

タグ属性 NakedSlideFilter にカンマ区切りで指定したタグに class="nakedSlide" が付加されます。

最終更新日： 2017年6月13日