シンプルなデザインなので、写真を多様するような美容院、花屋、エステサロン等、女性向けのWebサイトに最適な汎用性の高いCSSデザインテンプレートです。試しに美容院サイトにアレンジしてみました。
2013年に入り、IEもバージョン10が出て、Webサイト制作の状況もかなり変わってきております。Webサイト制作においても一般的にIE7以前はサポート対象外になり、CSSもバージョン3が主流となってきました。
当サイトでもその流れを汲み、このCSSテンプレートはIE9以上のブラウザ対象になっております。IEの下位バージョンでもレイアウト崩れを起こすことはないようにしておりますが、デザインが大きく異なって見えてしまいます。
これも、できるだけカスタマイズして欲しいという意図の現れでもあります。画像を使用することにより、IEの下位バージョンでもデザインを同じにすることは可能なのですが、そうすると色変更等に画像編集ソフトが必要となり、デザインに汎用性を持たせることができません。
一方で、画像を使用していないため、編集する際に画像編集が必要なく、CSSで自由に色の変更が行えるようになっています。
完全幅固定タイプです。
全体的な横幅は940px、メインコンテンツ部分600px(余白除く)、サブコンテンツ部分300px(余白除く)です。サブコンテンツ部分はメニューやバナー等を配置することを想定し、幅を広く取りました。
画像がスライドしながら自動で切り替わるように設定しています。切り替わる時間やスライドの時間などいろいろオプションが変更できます。サンプル画像は当方で撮影したものです。画像を差し替えてご利用ください。
画像等の位置をjQueryで取得しています。本来であれば、CSS3のcalc()で位置合わせを簡単にできるのですが、OperaとSafariではまだサポートされていなかったので…。ナビゲーションの横方向の位置を変更したい場合は、common.jsファイルを修正する必要があります。
動作確認しましたが、OperaとSafariは計算方法・レンダリングの違いからか、スライドする位置がずれてしまっています。が、直す方法がわからなかったのでそのままにしています。すみません…。
HTMLファイルのheadタグ内にて、
<script type="text/javascript">
$(function() {
$('#slide').slideshow({
autoSlide : true,
interval : 3000,
duration : 500,
easing : 'swing',
hover : true,
slideUnit : 1,
eleClone : 2
});
});
</script>
というように記述します。また、いくつかオプションがあります。
autoSlide | スライドショーを自動にするかどうかを選べます。「true」で自動、「false」で自動では動かないようにできます。 |
---|---|
interval | 次のスライドまでの止まっている時間です。単位はミリ秒ですが、単位まで記述する必要はありません。 |
duration | スライドするスピードです。単位はミリ秒ですが、単位まで記述する必要はありません。 |
easing | スライドする効果の種類です。「liner」と「easing」から選べます。シングルクォーテーションかダブルクォーテーションで文字列を括る必要があるので注意です。 |
hover | 画像にホバーした際、スライドをストップするかを選べます。「true」でスライドをストップ、「false」でスライドをストップしないようにできます。 |
slideUnit | スライドする際に何枚の画像を同時に移動するか選べます。このテンプレートのようなデザインの場合は、1枚が適切かと思います。 |
eleClone | スライドする際に、画像をループさせている都合上、指定している画像を複製する必要があります。基本的にここは「2」にしていただければよいかと思いますが、画像の大きさやなどによっては「3」以上を選んでおいたほうがよい場合もあります。 |
ページトップへの戻りリンクは、ページの右下に配置しており、スクロールすると現れる仕組みになっています。こうすることにより、ページトップへの戻りリンクが目に入りやすく、ユーザにこのリンクを、より活用していただけるのではないかと思います。
当CSSデザインテンプレートでは、JavaScript(jQueryライブラリ)を使用しています。使用している箇所は、インデックスページのスライドショー、インデックスページのスライドショー下の3つコンテンツが並んでいるエリア、ページトップへの戻りリンクです。そのため、JavaScriptを有効にしていないブラウザではレイアウト崩れを起こしてしまいますので、ご留意ください。
カスタマイズはご自由になさってください。
制限はありません。
その他、不具合などございましたら
CoolWebWindowにお知らせください。
以下、サンプルタグになります。ご利用の際は参考にしてみてください。
強調(em)
より強い強調(strong)
追加(ins)
削除(del)
テキストアンカー
見出し1 | 見出し2 | 見出し3 | 見出し4 | 見出し5 |
---|---|---|---|---|
セル1 | セル2 | セル3 | セル4 | セル5 |
セル1 | セル2 | セル3 | セル4 | セル5 |
セル1 | セル2 | セル3 | セル4 | セル5 |
<div class="box">~</div>というようにすれば、このように、左側に写真や画像、右側にテキストが配置できるようになります。
たくさんテキストを書いても、画像に回り込まないように設定しています。
↓
↓
↓
↓
↓
↓