simpleSlideを使えば誰でも簡単にHTMLスライドを導入できます。

ファイルをダウンロードする

• simpleSlide.zip(23KB)

要素をマークアップする

simpleSlideではマークアップに決まりがありますが非常に単純です。

ページを分ける

1つのdiv.sectionが1つのスライドページに相当します。

ページにタイトルを付ける

スライドページには必ずひとつのタイトルが必要です。
div.section直下の子要素はHN要素にします。

  
これがタイトルになる

HN要素じゃなくてもいいんですが
とりあえずdiv.section > * のテキストがタイトルとして扱われます。

あとは適当に要素を入れていきます。
blockquoteとかpreとかその辺のスタイルは指定してないので
使う場合はCSSに追加してください。

  
これがタイトルになる
  
テキストテキスト
  

    
リストリスト
    
リストリスト
  

必要なファイルを読み込む

だけです。

こんな感じになります。

操作方法など

これまた簡単です。
ドキュメント上をクリックするとスライドを進めたり戻したりできます。
また矢印キーやスワイプでも操作できます。

• クリックはドキュメントの右半分なら進む、左なら戻る。
• 矢印キーは↑・←は戻る、→・↓は進む。
• Macの場合は上スワイプは戻る、下スワイプは進む。
• メニューをクリックするとタイトル一覧が表示されて好きなスライドに移動できます。
• Back To Titleからいつでもタイトルスライドに戻れます。

細かいところでは

• タイトルスライドは #slide-0 で数字部分が増えていきます。
• #slide-X をURI末尾に付けて呼び出すと対象のスライドで開けます。
• #slide-X の Xは(下部に表示されているスライドページナンバー -1)になります。
• タイトルはスライドのタイトルを付加したものに書き換えられます。

対応ブラウザ

IEには対応してません。。。
CSSのround-borderプロパティを使ってるので正式な対応ブラウザは以下だけです。

• Firefox3
• Safari3

前編でニュースティッカーができたので 後編ではjQueryプラグインにしてみましょう。

jQueryを使ってNews Tickerプラグインを作ってみよう[前編]

• jQueryを使ってNews Tickerプラグインを作ってみよう[前編][1]
• jQueryを使ってNews Tickerプラグインを作ってみよう[前編][2]

jQueryプラグインのメリットは

• 要素をjQueryのメソッドチェーンで繋いで実行できる
• オプション項目の指定が簡単にできる

といったところでしょうか。

Read more

先日試した自分のサイトでAutoPagerizeを使うからの延長で
自分のWordPressにAutoPagerizeを手軽に導入できるプラグインを作りました。

色々と方法はあったんですけれど
とりあえずは、Pagenavi付き・jQuery使用になってます。
（上記の2点は好みが分かれそうですね…

サンプルとして実際に動作している環境のWordPressを用意しました。

Read more