テンプレートを編集

サイト出力では、テンプレートを元に作成されます　
テンプレートで設定するのは配色とメニューの要素とタイトルとロゴの画像です

固定形式と可変形式のテンプレート

IDの指定(配色等のﾊﾞﾘｴｰｼｮﾝ)が無い状態で、２つのｵﾘｼﾞﾅﾙのﾃﾝﾌﾟﾚｰﾄが予め用意されています
tpl-fx.htmと、tpl-el.htmで、前者が固定(Fix)で、後者が可変(Elastic)です
又、それぞれに対応したスタイルシート　navi-fx.cssと　navi-el.cssがあります
これらを元に、配色やロゴのバリエーション(ID)の派生が作られます

[image]

ドロップダウンメニューの指定
[image]

ドロップタ゜ウンメニューを使用すると、サイト構成が把握しやすくなりますが、最初の大分類を５前後にして文字数少なめ、その次の分類の文字数をできるだけ揃える等の、工夫が必要です
ファイル
新規作成
新規作成
既存のテンプレートを開く
既存のテンプレートを修正又は、参照して新規追加
テンプレートとスタイルシートを更新
現在の設定に基づいて、テンプレートとスタイルシートを更新
又は、新規作成します
ツール
ロゴ画像を作成
ロゴ画像を作成する画面を開きます　　 ロゴ画像を作成
タイトル画像を作成
タイトル画像を作成する画面を開きます　 タイトル画像を作成
ブラウザでプレビュー
現在の設定を、プレビューで確認します
現在の配色をRGBで表示
配色をテキストで表示します

メニューの要素の指定

[image]


ナビゲーションメニューは3つの要素で構成されています
ページ数が少なく例えば、パン屑リストは不要であれば、チェックをはずして下さい
各パネルの背景色、文字フォントは、表示ラベルをクリックして指定できます
文字色・文字背景は、hv(hover カーソルが乗った時) nw(now)現在選択されているメニュー毎に設定して下さい

IDの指定

一つのサイトで、大分類(最初の階層のノード)で、テンプレートを分ける時の識別子として使用します
例えば、分類がビジネスのテンプレートにはBSを指定、画像ツールはPC等と指定し、サイト出力時の設定で該当するテンプレートを指定します
サイト出力の設定(個々)

キーカラーの設定

配色を設定する際に、おおよその配色を決めて、調整する事ができます
キーカラーを指定して、そのバリエーションから選び、さらに調整をします

[image]

左右のボタンで、指定キーカラーでの配色のバリエーションを提示します
どれか選択してから、特定のパネルの色を調節して下さい
背景色が決まったら、それに合わせて、文字色を指定します　(識別しやすい配色にして下さい)

文字色などの調節

文字色・フォントの指定

[image]

ラベル部分をクリックすると、文字色等の指定ができます
パネルの背景色に合わせて、調節して下さい

ロゴとタイトルの画像を指定
ロゴとタイトル下の画像の指定の部分をクリックすると、ロゴとタイトルに使用する画像を指定できます
新しくロゴやタイトルの画像を作成して、適用する事もできます　 ロゴ画像を作成 　 タイトル画像を作成

複数のテンプレートで分類

一つのサイトで大分類ごとにテンプレートを変えると、全体が把握しやすくなります

[image]

直接テンプレートを加工する

HTMに知識のある方でしたら、テンプレートを直接編集して、カスタマイズする事もできます
[image]

例えば、上の例では、テンプレートに Googleの広告を入れています
初期状態では、div dLeftの次に div dOptが記入されています
これは、画面左のナビゲーションメニューの下の部分です
下記の例では、この dOptのdivをグーグル用に使用しています

tpl.htmに追加記入
左のナビゲーションメニューの次にGoogle用のDIVを追加しています
<script から　</script の間は Googleから指定された物を貼り付けて下さい
[image]

navi.cssにこのDivのスタイルを指定します 　マージンと巾の指定
[image]

サイト全体をデザイン会社に発注すると、とても費用と工数がかかりますが　(特に維持費)　、テンプレートだけ又は、ロゴだけ作成してくれるところもあります。　テンプレートだけでもデザイン会社に依頼するとずっと見栄えが良くなります (２０～５０万位)

テンプレートとCSS関連のファイル

[image]

予め、固定表示用のテンブレレート tpl.-fx.htmと、可変表示用のテンプレート tpl-el.htmが用意されています
これに、配色・ロゴ等のバリエーションのIDをつけたファイル名で保存します (例 tpl-fx_bs.htm)

同様に、スタイルシートも、予め navi-fx.cssと　navi-el.cssが用意されていて、そのバリエーションとして、例えば navi-fx_bs.cssが作られます
又、それぞれのスタイルシートが、タイトル画像・ロゴ画像と生成される背景画像がIDをつけて保存されます

[image]