5509

CMSとしてのWordPressでサイト構築をするときに便利な13のプラグイン

MTをサイト構築に採用するケースは非常に多いと思いますが、WordPressをサイト構築に採用するケースは少ないんじゃないでしょうか?

確かにWordPress単体ではCMSとしてはちょっと足りない機能が多いです。そこでWordPressをブログではなくCMSとしてサイトを構築をするときに便利なプラグインを紹介します。(というかただの個人的なまとめです。)

Read more

シンプルなインターフェースで実装するHTMLのスライド simpleSlide.js

simpleslide

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

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

要素をマークアップする

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

CSS Nite in OSAKA, Vol.14に出演させて頂くことになりました

CSS Nite in OSAKA, Vol.14のバナー

自分でも実感が湧かないのですが、、、
CSS Nite in OSAKAに出演させていただくことになりました。
(先月から決まっていたのですけれど報告が遅れてしまいました。)

予定している内容は
「jQueryプラグインを使って使いやすいフォームを設計しよう」です。

jQueryプラグインと言ってますが
一般的に使いやすいフォームを作るためのマークアップから
プラグインの使い方までを紹介できればと思っています。

ちなみに人前で喋る、とかそういった類いのことをほとんどしたことがなくて
すでにガチガチに緊張してます…

そういえば結婚式後にあった親族会食の挨拶で盛大に噛んだなぁ…
一度噛むとその後はもう噛みの連鎖でそれはもうすごいことに…笑

落ち着いてゆっくり喋り、というアドバイスを妻からもらいました。
まさにその通り…いや分かってはいるんやけど興奮すると。。

こんな滑舌の悪い僕ですが、よければ応援にきてください:D

CSS Nite in OSAKA, Vol. 14
4月14日(火)、19:00-20:30、アップルストア心斎橋2F
http://cssnite.jp/osaka/vol14/

参加表明はmixiコミュニティから:
http://mixi.jp/view_event.pl?id=&comment_count=19&comm_id=1118970

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

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

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

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

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

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

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

Read more

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

前回までのおさらい。

前回の記事

まずは前回最後のサンプルを見てください。

ここまでのサンプル(フェードを実行)

サンプルを見ればわかるように
ニュースティッカーの実装まではできましたが不具合があるようです。

  • 最後のニュースが表示された後に何も表示されない

よくあるパターンは最後が表示されると最初に戻る というものです。
これを実装してみようと思います。

Read more

Author

nori
nori
- UI Engineer
Location
- ,