html5slidesを使ってMovable Type 6のウェブサイトまたはブログでプレゼンテーションが出来るテンプレートです。簡単なプレゼン作成やウェブでのプレゼン資料公開に最適です。
基本的にオンラインで使用しますが、インターネットが利用できる環境であればローカルにインストールしてプレゼンすることもできます。 html5slidesはApache License 2.0でライセンスされています。slides.jsには一切手を入れていませんが、このテンプレートは同様のApache License 2.0ライセンスで配布します。 修正後の再配布などの場合には、その旨を追加記述してください。
以下の順序でインストールおよびプレゼンテーションを作成します
- フォルダの確認
- ウェブサイトの作成
- ウェブサイトにテンプレートを適用
- ロゴをアップロード
- ブログの作成
- マルチブログの設定
- プレゼンテーションタイトルページを作成
- ブログ記事で各プレゼンページを作成
解説に目を通したのち、インストール作業を行ってください。
##1.フォルダの確認 圧縮ファイルを解凍してください。
フォルダ内の構成
【presentation_mt6】
└─ readme.pdf ・・・・・この文書
└─ 【Blog】
└─ main_index.mtml ・・・・・メインページテンプレート
└─ 【Website】
└─ main_index.mtml ・・・・・ウェブサイト専用メインページテンプレート
└─【images】・・・・・直接アップロードまたはアイテムとして使用します
└─ slide-logo-l.png ・・・・・プレゼン先頭のロゴ
└─ slide-logo-s.png ・・・・・各ページ用のロゴ
└─【demo】・・・・Google Code html5slidesデモ用フォルダ
└─ index.html ・・・・・マークアップ・classなどの参考用
└─ 【images】
└─ example-cat.jpg
└─ example-graph.png
●テンプレートは文字コードUTF-8にて保存されています。 UTF-8のファイルを開くことが出来るテキストエディタをご利用ください
##2.構成の確認とテンプレートの選択（重要です！）
Movable Type 6よりウェブサイトにも記事を作成できるようになりました。 このテンプレートは、ウェブサイトの記事・配下のブログの記事、どちらを使ってもプレゼンテーションを作成できるようになっています。
以下を参考に、プレゼンテーションはどこに作成するのか・データとなる記事はどこで作成するのかを考えておきましょう。
-
プレゼンテーションを「ウェブサイト」に公開し、配下に「ブログ」を作成し記事を作成する場合は、【Website】フォルダを利用します。
（ウェブサイト）プレゼンテーション
└─ブログ └─記事 -
プレゼンテーションを「ウェブサイト」に公開し、「ウェブサイト」に記事を作成する場合は【Website】フォルダ・【Blog】フォルダのどちらでも構いません。
（ウェブサイト）プレゼンテーション
└─記事 -
プレゼンテーションを「ウェブサイト配下のブログ」に公開する場合は、【Blog】フォルダを利用します。
ウェブサイト
└─（ブログ）プレゼンテーション └─記事
##3.プレゼンテーションを「ウェブサイト」に作成する場合の設定
プレゼンテーションをブログに作成する場合は3-5までを読み飛ばして【4.プレゼンテーションを「ブログ」に作成する場合の設定】に進みます。
###3-1.ウェブサイトの作成
プレゼンテーションを行うURLにウェブサイトを作成します
テーマに「クラシックウェブサイト」を選択します。ウェブサイト名にはプレゼンテーションのタイトルを記述し、「ウェブサイトURL」「ウェブサイトパス」を正しく記述し、「ウェブサイトの作成」ボタンをクリックします。 一度再構築を行なった後、公開パスを再確認しておきましょう。 プレゼンテーションは、このウェブサイトURLで公開されます 。
###3-2.ウェブサイトにテンプレートを適用
「デザイン」より「メインページ」をクリックします。
【Website】フォルダ内の「main_index.mtml」 をテキストエディタで開いて、全てを選択しコピーします。 「メインページ」テンプレートにペーストします 「保存と再構築」ボタンをクリックします
###3-3.ロゴをアップロード
【images】フォルダに入っている2つの画像を参考にロゴを作成します。
slide-logo-l.png ・・・・・プレゼン先頭のロゴ（600×400px） slide-logo-s.png ・・・・・各ページ用のロゴ（141×67px）
Movable Typeの「アイテム」としてアップロードします
「images」ディレクトリへアップロードします
###3-4.記事の作成準備
Movable Type 6よりウェブサイト・ウェブサイト配下のブログどちらにも記事を作成できるようになりました。ウェブサイト配下のブログで記事を作成する場合を解説します。 ＊ウェブサイトに記事を作成する場合は3-4-1と3-4-2は読み飛ばして下さい。
####3-4-1.ウェブサイト配下にブログを作成する
「クラシックブログ」を選択し、ブログ名・ブログURL・ブログパスを記述します。 ＊ブログ自体は表示させませんのでブログ名・ブログURL・ブログパスは自由に設定してください。
その後、再構築をおこないます。
なお、ブログURLは公開されませんが静的ファイルは生成されていますので、ベーシック認証などのアクセス制限をおすすめいたします。
####3-4-2.マルチブログの設定
ウェブサイトのダッシュボードに戻り「プラグイン」よりマルチブログの設定を行います。
再構築トリガーを設定します。
「ウェブサイト内のすべてのブログ」を選択し設定を保存します。
「変更を保存」ボタンをクリックしておくことを忘れないように！
###3-5.プレゼンテーションタイトルページを作成
ウェブサイトのダッシュボードに戻り、新規にウェブページを作成します。
タイトルおよび本文を記述し公開します。
トップページとタイトルページの完成です。
次は【5.記事をデータとして各プレゼンページを作成】に進みます
##4.プレゼンテーションを「ブログ」に作成する場合の設定
###4-1.ブログの作成
プレゼンテーションを行うURLにブログを作成します
テーマに「クラシックブログ」を選択します。ウェブサイト名にはプレゼンテーションのタイトルを記述し、「ブログのURL」「ブログパス」を正しく記述し、「ブログの作成」ボタンをクリックします。 一度再構築を行なった後、公開パスを再確認しておきましょう。
プレゼンテーションは、このブログURLで公開されます。
###4-2.ブログにテンプレートを適用
「デザイン」より「メインページ」をクリックします。
【Blog】フォルダ内の「main_index.mtml」 をテキストエディタで開いて、全てを選択しコピーします。 「メインページ」テンプレートにペーストします
「保存と再構築」ボタンをクリックします
###4-3.ロゴをアップロード
【images】フォルダに入っている2つの画像を参考にロゴを作成します。
slide-logo-l.png ・・・・・プレゼン先頭のロゴ（600×400px） slide-logo-s.png ・・・・・各ページ用のロゴ（141×67px）
Movable Typeの「アイテム」としてアップロードします
「images」ディレクトリへアップロードします
###4-4.プレゼンテーションタイトルページを作成
ブログのダッシュボードに戻り、新規にウェブページを作成します。
タイトルおよび本文を記述し公開します。
トップページとタイトルページの完成です。
##5.記事をデータとして各プレゼンページを作成
ウェブサイトあるいはブログに記事を作成します。作成した1記事がプレゼンテーションのスライド1枚になります。
同梱のGoogle Code html5slidesデモ用ファイルまたは以下のURLを参考にマークアップします。 http://html5slides.googlecode.com/svn/trunk/template/index.html
~までが1スライドになっているので理解しやすいと思います。small fontを利用したい場合には、「タグ」に「smaller」と記述します。 同様に全画面の画像・インラインフレームを利用したい場合は「fill」と記述します。 すると、自動的にarticleにそれぞれのclass名が追加されます
テンプレートのソース
各記事が完成したらウェブサイトのURLを開き、動作を確認します。 ＊ページ送りはマウス・矢印キーのどとらでも作動します。