« Painter体験版を使ってみた | メイン | 気持ち悪いぐらいUP!マークが付いてますが »

HTML Slidy

先日「Yahoo!Days…の日記」でもつぶやいていた、「NEXTで画像閲覧」ですが。
探しまくっていたときにはこれというものがなかったのに、他のものを探しているときに見つけましたよ(爆)

アルバム機能で探していたので、画像のサムネイル一覧をクリックとか、NEXTボタンで次の画像を見ることはできても、ひとつづつしか進めなかったり。毎日見てる方だと、NEXTボタンしかない場合は、目的のページに行き着くまでが大変なので、なんとしても「一番最初まで戻る」「途中ページへのナビゲーション」が欲しかったのです。

で、見つけたのが HTML Slidy

最初探していた「アルバム」でも何でもなく、プレゼンテーション用のスクリプトです。しかもW3Cが配布している!これなら安心。
しかもかなり高機能で、「NEXT」じゃなくてページのどっかクリックすれば次のページが開くし、最初のページには戻れるし、ページ数の目次が出たりと、かなり使えそうです。でも問題は、私のスキルがなくて、今あるページの中に組み込めないこと(無理矢理HTML Slidyで書き出したページをPHPインクルードで入れたら、ブログの挙動がおかしくなった)
でも他のイラストはクリックすると別窓で大きく開くようになってるし、動きとしては従来と同じ、ということで、別窓でもよかろうということにしました。

というわけで、とりあえず「いつものこと」でやってみました。どうでしょう?


でもってMTへの導入メモ。
日本語の解説がないため、とにかくカンで乗り切ったので、間違いなどあるかもしれません責任は持ちません。

HTML Slidyサイトの5ページめ、「slidy.zip」をダウンロードして解凍。
indexテンプレートで新規テンプレートを作成し、「slidy.css」をコピペ。テンプレート名「slidy用スタイルシート」(何でもいい)、出力ファイル名「slidy.css」(これはこの名前で固定)で保存。
もう一度新規テンプレートを作成、「slidy.js」をコピペ。テンプレート名「slidy用スクリプト」(何でもいい)、出力ファイル名「slidy.js」(これはこの名前で固定)で保存。

テンプレートを新規作成(アーカイブもしくはindexテンプレートなど目的に応じて)し、index.htmlの一番頭からheadタグが終了する直前までの部分をコピペしておく。

HTML Slidyサイトの3ページめ、
<meta name="copyright"
から、
</html>
までのソースをコピー。

先ほど作成したテンプレートに続けて、ソースを貼り付け。

ソースを以下のように書き換え。

<title>ページタイトル</title>
<link rel="stylesheet" type="text/css" media="screen, projection, print" href="<$MTBlogURL$>slidy.css" />
<script src="<$MTBlogURL$>slidy.js" type="text/javascript"></script>
<meta name="copyright" content="Copyright © 2005 コピーライト" />

そして、「... your slides marked up in XHTML ...」のところに、表示するものを入れていく。

<div class=slide>〜<div>

このタグで囲まれたものが、ひとつのページになる。
手打ちでタグをうってもいいし、完全自動化するなら<$MtEntryBody$>を入れ、エントリーの記事本文中にdivタグを付けた記事を投稿してもよい。

一行づつ項目を表示するとか細かい芸もできるみたいなんだが、プレゼンに使うわけではないので、ここでは省略。
indexテンプレートの場合は、テンプレート名に好きな名前を付け、出力ファイル名に「●●.php」(htmlでもいいんかなあ?)として保存。
アーカイブテンプレートの場合は、アーカイブマッピングを適宜行う。

「●●.php」にアクセスして、動作を確認。

※私はアーカイブマッピングで「エントリーアーカイブ」にしたが、これだと全エントリーについてスライドするファイルを作ってしまう(苦笑)特定のカテゴリのみページを生成する方法がないもんか…?

グッジョブだったらポチッと→

コメントを投稿

月別アーカイブ

2017年
2016年
2013年
2012年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
           

Blogのフィードを取得

Powered by
Movable Type 6.3.3