制作者より

企業サイトをはじめ、どんなホームページにもマッチしやすい汎用性の高いCSSデザインテンプレートです。

試しに企業サイトにアレンジしてみました。画像を使うと洗礼されやすいのですが、カスタマイズするときにPhotoshop等の画像編集ソフトが必要となり、デザイナーでない方にとってはかなり敷居が高くなってしまいます。

当サイトのテンプレートはできるだけカスタマイズして欲しいので、なかなか画像が使えず。でもそれだとデザイン面がよくならない・・・という難しい問題を抱えています。

そのような中で画像を使いつつも、編集する際には画像編集が必要でないように心がけました。あと色にもかなり気を使い、画像でなくてもできるデザインを積極的に採用しました。

完全幅固定タイプです。
全体的な横幅は780px、メインコンテンツ部分530px（余白除く）、サブコンテンツ部分220px（余白除く）です。サブコンテンツ部分はメニューやバナー等を配置することを想定し、幅を広く取りました。

サイト内検索について

今回、初の試みとして、サイト内検索を設置してみました。サイト内検索は独自にプログラミングを組んだりすると大変なのでGoogleの機能を使用しています。Googleを利用したサイト内検索の方法はいくつかあるのですが、今回は、カスタム検索を利用しました。

カスタム検索を使用するには、まずGoogleのアカウントを取得していただき、こちらのページ（Google カスタム検索エンジン - サイト検索）からカスタム検索エンジンを作成していただき、その際にｖ発行される｢検索エンジン ID｣を、テンプレート中の検索部分のところにある｢<input type="hidden" name="cx" value="" />｣のvalueの値へ記述してください。

サンプルのまま使用されると当サイト内の検索しかできませんので、注意してください。よくわからない方は個別にご連絡いただければと思います。

スムーススクロールの採用

ページのトップへ戻るリンクにはJavaScriptを用い、スムースに上部へ戻るようにしております。また、ページ内リンクでも同様の効果を得ることができます。こちらは特に何も変更する必要はありません。

サンプルについて

以下、サンプルタグになります。ご利用の際は参考にしてみてください。

h2タグ

h3タグ

h4タグ

h5タグ
h6タグ

強調（em） より強い強調（strong） 追加（ins） 削除（del）
テキストアンカー

リスト

普通のリスト

  • 普通のリスト1
  • 普通のリスト2
  • 普通のリスト3

番号付きリスト

  1. 番号付きリスト1
  2. 番号付きリスト2
  3. 番号付きリスト3
    li要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。

定義リスト

定義リスト1
定義した用語の説明
定義リスト2
定義した用語の説明
定義リスト3
定義した用語の説明
dd要素の中はブロックレベルのタグを使用することが出来ます。例えば、<p>タグも記述することが出来ます。しかし、dt要素にはインライン要素しか記述することができません。