：2012年05月29日　 ：テンプレート　 ：無料素材　 ：この記事は5分程で読めます。

自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS Animationの確認のために作った物です)。
もし気に入っていただけたらダウンロードして使っていただけたら幸いです。特に変わった仕様も無く、シンプルで単純なものだったので、多少でも見栄えを良くしようと、先日カスタマイズしておきました。
カスタマイズといっても、jQueryやアイコン・画像・少しのコードを追加しただけなので、そんなに期待しないでね！ちなみにブログ用にカスタマイズしてあります。
あとこのテンプレートの名前は【SimpleBlack】です(名前なんてどうでもいいですよね)！

今回利用したjQueryなど

jQuery Slider2

すごくシンプルで、軽量なスライダーです。あまりにシンプルだったので、本当に動くのか心配だったんですが、きちんと動いてくれました！このテンプレートのキービジュアル部分に使用しています。もともとこのキービジュアル部分は、CSS Animationで表現していたんですが、IEの頭の悪さを考えてjQueryで表現するようにカスタマイズしました。jQuery Slider2

tipsy

これもとてもシンプルなツールチッププラグインです。｢デザイン上、補足をしなければならない状態は、ユーザビリティーが優れているとはいいがたい｣と思われる気がしていますが、使っちゃいました！こういった工夫は、個人ブログならではの工夫なのかもしれませんね。個人ブログで使われているのをよく見ますし。もちろん企業サイトでも場合によっては使うべき場面もあると思います。ちなみにこのプラグインは、テンプレートのソーシャルボタンの箇所と、LIKE SITEの箇所で使っています。tipsy

jQueryでスクロールすると表示する系いろいろ

webOpixelで紹介されていた｢1.ちょっとスクロールしたらトップへ戻るボタンを表示｣を利用させていただきました。
また、｢3.下部までスクロールすると横からスライドして表示｣を参考に、私のほうで簡単なスクリプトを書かせていただきました。
今回テンプレートとして配信するために、webOpixelの管理人さんに連絡させていただき、使わせていただきたいとご連絡した結果｢自由に使って頂いてかまいません｣と、快く了承していただけました。ishiwata様ありがとうございました。

ちなみに｢1.ちょっとスクロールしたらトップへ戻るボタンを表示｣はテンプレートの右下に表示されるようになっています。
｢3.下部までスクロールすると横からスライドして表示｣は、人気記事として、画面の最下部のあたりに表示されます。ちなみに横からではなく、下からニョキッと現れます。jQueryでスクロールすると表示する系いろいろ

CSS3 PIE

IE6/IE7/IE8でCSS3を使うために、このテンプレートではPIEを使用しています。CSS3を利用している多くの人がこれを使っているんじゃないでしょうか？
使い方はいたって簡単です。たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIEこのサイトが参考になると思います。基本的には既存のCSS3のスタイルシートに、絶対パスで一行を追加するだけです。behavior:url(/js/PIE.htc)←こんな感じ。

使用上の注意

• SimpleBlackテンプレートは、非商用・商用サイトともに無料でご利用いただけます。
• SimpleBlackテンプレートの下部に表示されている｢design by web creators manual｣という画像と、当サイトへのリンクは消去しないでください。
• SimpleBlackテンプレートの販売行為を禁止いたします。
• 著作権は放棄しません。
• SimpleBlackテンプレートを利用された上で、いかなる損害・損失・第三者と生じた紛争等について、一切責任を負いません。
• CSSを利用しています。一部ブラウザで表示が崩れて見える場合がありますのでご了承下さい。
• アダルト系サイト、暴力的・猟奇的表現を含むサイト、違法サイトでの利用を禁止します。
• 不具合などの報告は受け付けますが、カスタマイズ方法など、技術的サポートはいたしません。

ブラウザチェック

私がチェックしたブラウザを一応紹介しておきますが、使用する場合は個人的に再チェックしてください。

Google Chrome　ver.19　◎
Firefox　ver.12　◎
Safari　ver.5.1.7　◎

Internet Explorer ver.6　×　もともとIE6のことは無視です。透過PNG使ってます。
Internet Explorer ver.7　○　CSS Animationが駄目だ。。。
Internet Explorer ver.8　○　CSS Animationが駄目だ。。。
Internet Explorer ver.9　○　CSS Animationが駄目だ。。。

ダウンロードとデモ

　
画像や色を変えたり、好きにカスタマイズして使ってください！

では、このへんで！