BiND for WebLiFE* 3 [活用術（Tips）] <$MTEntryTitle$>

これらの設定は手書きでCSSを書くことで行ないます。
ただし手書きでCSSを改造していくのはとても大変なため、この改造キットを作成しました。
この改造キットの中にある「edit.html」をDreamweaverで開けば、DreamweaverのUIを使って手書きと比べて比較的容易にCSSの改造ができます。

1. CSSの基礎知識がある程度ある人
2. Dreamweaverの基本的な操作知識がある人
3. このドキュメントで内容を理解でき、独学で先へ進める人

メリット

1. BiND上で設定できない項目が設定できる
2. オリジナルのテーマを作成して配布もできる
3. BiNDでは不可能だと思われていた完全オリジナルデザインができる

デメリット

1. CSSの知識がないと分からない（分からない方には改造をお勧めしません）
2. CSSの知識があっても多少の応用力が必要（クリックして選択できないclassがあるので注釈を読むこと）
3. サンプルファイルをあまり改造しすぎるとブラウザごとに見え方が変わる可能性がある（自己責任で）

1. この改造キット
2. BiND3本体
3. Adobe Dreamweaver CS4（手書きでCSSが記述できる人は不要です）

BiND3では、BiND2と同じCSS（モジュールと読んでいます）が使われています。そのため、BiND2とBiND3では完全な互換性があり ますが、今回のテーマ機能のCSSカスタマイズは、このBiND2のモジュールCSSに「上書き」する形式で、テーマのCSSを読み込みます。そのため、 テーマのCSSにBiNDのHTMLタグに適したclassのCSSを記載すれば、理論上あらゆるCSS要素を設定できることになります。
また、JavaScriptもロード可能のため、上級者にとっては改造の幅も広がります。
ただし、CSSやJavaScriptの改造は、BiNDの特徴でもある「ブラウザ閲覧保証」ができなくなるということでもあります（ただし、サンプルファイルをちょっと改造するぐらいであれば大きくレイアウトやデザインが崩れることはないでしょう）。

1. 「MyTheme00」を好きな名前にリネーム
2. リネームした「MyTheme00」をBiND3のアプリケーションフォルダのTemplates内「CornerSkin」に好きな名前のフォルダを作成し、そこに入れる
3. BiND3を起動して「テーマ」を開くと、リネームした名前のテーマが表示されるので適用する
4. 「MyBiND3_Sites」内のそのサイトフォルダを開き、ルート階層の「CornerSkin」に入っているフォルダの「_developer」の「edit.html」をDreamweaverで開く
5. Dreamweaverで編集し、保存する（別に説明あり）。
6. 同階層「preview-lite.html」や「preview-dark.html」でプレビューもできるが、BiND上でも確認できるはず
7. 完成したと思ったら「MyTheme00」を好きな名前にリネームしたフォルダをBiND3のアプリケーションフォルダのTemplates内「CornerSkin」に戻すとまたテーマとして使える
8. その際、ページ背景なども一緒に設定したい場合は、「テーマ」の「ユーザー設定」で保存した「PageSettings」と差し替える
9. 最終的には「「info.xml」と「thumbnail.png」を設定して、「_developer」を削除して完成

CSSをカスタマイズする

1.edit.htmlを開く
2.「デザイン」をオンにして「ライブビュー」をオンにする

ライブビューをオンにする前は以下のように「雑然として完成系がイメージしにくい」状態ですが、ライブビューをオンにした後は、以下のように「BiND上での完成形と近い状態で編集」できる状態になります。
→→ライブビューON→→

3.「CSSスタイル」のパレットが表示されているようにし、タブから「すべて」ではなく「現在」を選ぶ

4.ライブビューによって本物と近い感じでプレビューできているサンプルページの改造したい項目をクリックする
5.すると「CSSスタイル」にそのCSSクラスが表示されるので好きに変更する
下の場合は「H2」の色と装飾が表示されている状態です。

6.ちょっとしたティップスとして下のように色や項目が１つのフィールドになってしまっていて編集しにくいときは

この「CSSスタイル」のパレットの下部にある以下の「鉛筆アイコン」をクリックします

すると以下のようにUIで変更できるので便利です。

7.最後にメニューから「すべてを保存」を選び、CSSのカスタマイズ自体の作業は終了です。

ページのデザイン設定（ページの背景デザインなど）を保存する

つぎに、テーマを適用したらページの背景デザインなども変更されるようにしましょう。

1.BiND3上でページのデザインをします

ここでいうページのデザインとは、「設定」の「ページデザイン」の項目のことを指します。

2.ページデザインが完成したら「テーマ」を開き、「ユーザー設定」タブから「＋」を選び、現在のページデザインを「テーマ」として保存します。

3.保存されたテーマが以下の場所に保存されているので、そこから「PageSettings」フォルダを取り出します。

• 以下の場所を開くと、テーマとして保存した際につけた名称のフォルダがあります。その中に「PageSettings」フォルダがあります。
  • Mac
    • ユーザーディレクトリ内のライブラリ／preferences／BiND3 Data／CornerSkin／
  • Win
    • ユーザーディレクトリ内の／APP Data／Roaming／BiND3 Data／CornerSkin／
    • ※Windowsの場合、OSのバージョンやユーザー権限によっては、若干異なったディレクトリになっている場合があります。
    
    4.取り出した「PageSettings」フォルダを、カスタマイズしたテーマのフォルダの中にある「PageSettings」フォルダと差し替えます。 5.これで、このテーマのページのデザイン設定も、あなた独自のものに差し変わりました。

    最後にUI上に表示されるサムネールやXMLを編集する

    1. 下の「フォルダの構成」を参考にして、以下のファイルの書き換えを行なってください。
       • bdmodified.txt
       • info.xml
       • thumbnail.png
    2. 上級者の方はこの手順に加えて、jsフォルダの中を手書きで改造したり、cssフォルダの中にあるクロスブラウザのCSSに手を入れたりすることもできます。
    3. 最後に、この作成したフォルダを、アプリケーションと同階層にある「Templates」フォルダの「CornerSkin」フォルダの中に作成した任意のフォルダの中に入れて完了です。
    4. BiNDを起動しなおして、テーマとして適用してみてください。
    5. ブロックスキンは、「シンプル白」もしくは「シンプル黒」のみがカスタマイズされています。それ以外のブロックスキンを変更しても何も変化しません。

    以上。
    

    この改造CSSでできること

    • ブロックスキンの「シンプル黒」と「シンプル白」のほとんどの項目が改造できる
    • メニューBを改造できる
    • ほか

    フォルダの構成

    

    
    

    上級者ならば理論上できること

    
    

    当然CSSなので逆解析すればあらゆる要素が改造可能。
    
    ただし、かなり高度なので、このサンプルで改造できる項目を改造することをお勧めします。
    
    
    
    
    以上で、CSSのカスタマイズの解説を終わります。
    
    今後の反応によっては、他のパターンのキットも用意するかもしれません。
    
    まずは、この改造キットでCSSをカスタマイズにチャレンジしてみてください。
    

    テーマ改造キットについて

    この改造キットはサポート対象外のため、個別対応はできませんので予めご了承ください。