スキンの作成

Tuigwaa のスキンは通常のHTML及びCSSで作成する事が可能です。 仕組みとしては、スキン内で特定のスタイルIDを持つHTML要素配下の内容を Tuigwaa で管理しているページの内容に置換します。 また、メニューバーなどのセキュリティに関するものについては Tuigwaa が 提供しているコンポーネントをHTMLタグ指定することで実行時に適切に置き換えられます。

スキン作成の手順

以下がスキンを作成する場合の手順です。

  1. "basic" 以外の任意の名前でフォルダを作成する。
  2. 上記のフォルダ内にpage.htmlを作成する。
  3. 必要なスタイルシート、画像、JavaScriptファイルなどがあれば、同じフォルダ配下に作成する。
  4. 作成したフォルダをzipで圧縮する。Windows　XPであれば指定のフォルダを選択し、右クリック「送る」から「圧縮フォルダ」で作成する。
  5. Tuigwaa Manager からアップロードする

スキン作成時の全般的な注意事項

日本語について

日本語の取り扱いについては、1.0.4 以降とそれ以前でルールが変更となっています。ご注意下さい。 1.0.3以前で利用していたスキンで、文字コードが Windows-31J もしくは Shift_JIS で作成されて いるスキンを 1.0.4 で利用すると、フォームからのデータ入力時に文字化けする場合があります。



「1.0.4以降の場合」

日本語を含むスキンの場合はUTF-8で作成して下さい。 それ以外のエンコーディングで作成した場合は文字化けします。 具体的には、 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
などと指定してください。 また、スキンファイルに日本語を含める場合、必ず上記 meta タグよりも後に日本語を記述してください。 それ以前に日本語が含まれていますと、その部分のみ文字化けします。



「1.0.3 以前の場合」

日本語を含むスキンの場合はWindows-31Jで作成して下さい。 それ以外のエンコーディングで作成した場合は文字化けします。 具体的には、 
<meta http-equiv="Content-Type" content="text/html; charset=Windows-31J"/>
などと指定してください。Shift_JIS を指定しますとコンテンツ中の一部の文字 (「?」)などが文字化けしますので、 Windows-31Jを推奨します。 また、スキンファイルに日本語を含める場合、必ず上記 meta タグよりも後に日本語を記述してください。 それ以前に日本語が含まれていますと、その部分のみ文字化けします。

パス指定について

通常のHTMLファイルの作成と同様にスタイルシートや、画像、JavaScript等をスキンに 含めることが可能です。ただしそれらのファイルの中で他のリソースを指定する場合には、 パス指定の際に 

./
から始まるパス指定をして下さい。例えば以下のような構成でスキンを作成したとします。 
page.html
  +- image/a.gif
  +- stylesheet/base.css
このときに、page.htmlからa.gifを指定する場合には、 
<img src="image/a.gif" />
ではなく、 
<img src="./image/a.gif" />
と指定して下さい。またbase.cssから指定する場合には 
.style {background: #fff url(../image/a.gif) repeat-x;}
ではなく、 
.style {background: #fff url(./../image/a.gif) repeat-x;}
と指定して下さい。 これは、JavaScript内からのパス指定での画像読み込みや、HTML内でのlink 要素などのパス指定をする部分全般で有効です。 これを行わなかった場合、正しく外部ファイルを読み込めないなどの問題が発生します。

スキンファイルについて

Tuigwaa サイトの各ページに対して、スキンファイルを切り替える事が出来ます。作成する スキンの一番上のフォルダ階層に html という拡張子がついたファイルは、自動的にスキンファイルとして 認識されます。例えばスキンのzipファイルを展開した場合に、以下のようになっているケースがあったとします。 

page.html
skin.html
  +- image/a.gif
  +- stylesheet/base.css
  +- somefolder/notskin.html
この場合、skin.html はスキンファイルとして認識され、notskin.html はスキンファイルとしては 認識されません。 これらのスキンファイルは各ページの「設定」画面から、そのhtmlファイルを指定することにより、スキンの切り替えを 行うことが出来ます。尚、特に指定されない場合には page.html が適用されます。

スキン作成のルール

ドキュメント本体を置き換える

id="main"
でくくられた中身のコンテンツは Tuigwaa のドキュメントに置き換えられます。 id="main"自体は置き換えられないのでスタイルシートで指定することが可能です。

サイドバーを置き換える

id="side"
でくくられた中身のコンテンツは Tuigwaa の「メニューページ」に指定された ページに置き換えられます。 id="side"自体は置き換えられないのでスタイルシートで指定することが可能です。

メニューバーを挿入する

id="simplemenu"
でくくられた中身のコンテンツは Tuigwaa のメニューバーに置き換えられます。 各々の権限に従ったメニューが一列に表示されます。 id="simplemenu"自体は置き換えられないのでスタイルシートで指定することが可能です。

パンくずリストを挿入する

id="breadcrumb"
でくくられた中身のコンテンツはパンくずリストに置き換えられます。 id="breadcrumb"自体は置き換えられないのでスタイルシートで指定することが可能です。

ログインリンクを挿入する

id="login"
でくくられた中身のコンテンツはログインリンクに置き換えられます。 id="login"自体は置き換えられないのでスタイルシートで指定することが可能です。

フィードリンクを挿入する

id="feed"
でくくられた中身のコンテンツは RSS1.0/RSS2.0/Atom1.0 の三つのフィードのリンクに置き換えられます。 id="feed"自体は置き換えられないのでスタイルシートで指定することが可能です。

Tuigwaa のページ名をリンクで利用する

<a class="tgwpage" href="サイト内のページ名もしくはフォルダ名">
とすると、href の部分が実際のURLエンコードされたページに置き換えられます。