Webサイト制作を楽にするテンプレート一式 [Cool Web Window]

Webサイト制作を楽にするテンプレート一式

私が普段、Webサイト制作に利用しているテンプレートです。
デザインによって、XHTMLの中身もずいぶん変わるのですが、基本としていくつかテンプレートを作っておくと時間短縮になります。
3カラムバージョンです。
いろいろと修正点もあると思いますが、とりあえず公開です。

ダウンロード

ダウンロードはこちらから(ver 1.2)(55.7KB)

サンプル

サンプルはこちらから

リリースノート

2011年06月19日バージョン1.0新規公開
2011年07月16日バージョン1.1公開
index.htmlファイルのコメントのタイプミスの修正と、「on.」がついている画像はロールオーバーをしないようにJSを書き換えました。これにより、現在ページにロールオーバー用の画像を使用している場合も、さらに画像名が書き換えられてしまわないようになりました。
2011年07月18日バージョン1.2公開
CSSファイルの文字コードがShift_JISになっていたのを、UTF-8に修正しました。すみません・・・。

バージョン

1.2

公開日

2011年07月18日

仕様

XHTML＋CSS
XHTMLはDOCTYPE宣言なしです。
文字エンコードは、UTF-8です。

ライセンス

個人でも商用でも無料でご自由にお使いください。
ソースコード等に当サイトの著作権表示をする必要はありません。

ただし、同梱しているjQueryそのものはMIT、BSDおよびGPLライセンスなので、利用規約を守ってお使いください。

免責事項

当サイトのテンプレートを利用したことによりいかなる損害があったとしても、当サイトは全ての事項に対し責任を取りません。
ただし、当サイトに不手際がある場合（例えばコーディングのミス等）は対応いたします。

ファイル構成

src
│
│─index.html
│
└─common
    │
    ├─css
    │      common.css
    │      reset.css
    │
    ├─img
    │  │  menu1.gif
    │  │  menu1_on.gif
    │  │  menu2.gif
    │  │  menu2_on.gif
    │  │  menu3.gif
    │  │  menu3_on.gif
    │  │  menu4.gif
    │  │  menu4_on.gif
    │  │  menu5.gif
    │  │  menu5_on.gif
    │  │  menu6.gif
    │  │  menu6_on.gif
    │  │
    │  └─images
    │
    └─js
            common.js
            ga.js
            jquery.js

XHTMLファイル

基本は、ヘッダー、コンテンツ、フッターから成り立ちますが、グローバルメニューやトピックパス（パンくずリスト）、ページトップへの戻りをこれらのどこに入れるかは、デザインによって異なってきます。
とりあえずは、一応今回これらは全て独立したワイヤーフレームにしています。

CSSファイル

基本的に、Webサイト全体で使うものに関しては、｢common｣という名前のディレクトリに入れて管理しています。
CSSは共通のものに関しては、common.cssで指定しています。
CSSのリセット用は、YahooのYUI 2: Reset CSSをreset.cssで記述しています。

JSファイル

JavaScriptにはjQueryを利用しています。
JavaScriptはノンプログラマーには敷居が高いのですが、jQueryであれば、CSSがわかる方ならすんなり理解できますし、ライブラリ（プラグイン）もかなり豊富で、自分でコードをほとんど書くことなく、リッチな動きを実装できます。

オプション

メニューロールオーバー

デフォルトの画像とロールオーバー用の画像を用意してください。
ロールオーバー用の画像の名前は、デフォルトの画像に｢_on｣をつけたものにしてください。

（例）
デフォルトの画像名：image.gif
ロールオーバー用の画像：image_on.gif

メニュー以外にもバナーなどの画像もロールオーバーにできます。
例えば、ロールオーバーしたい画像に、｢.rollover｣というクラスをつけます。

<img src="common/images/img.gif" alt="画像" class="rollover" />

common/js/common.jsファイルの46行目を以下のように書き換えてください。

// 画像をロールオーバーする箇所を指定
$(function() {
   $('#menu img').rollover();
   $('form input:image').rollover();
   $('.rollover').rollover();
});

スムーススクロール

ページのトップへ戻るリンク先を、とすれば、スルスルっとスクロールします。
ページ内リンクも同様の動きをします。
特に変更する箇所はありません。

Google Analyticsの外部ファイル化

もし、WebサイトをGoogle Analyticsで解析する場合、common/js/ga.jsファイルの7行目の｢UA-XXXXX-X｣をご自身のウェブプロパティ IDに上書きしてください。