デジタルステージ - 開発ブログ

 

BiND3・テーマ改造キットをダウンロードする

---

2009年09月27日 [ BiND CSS ]

BiND3・テーマ改造キットをダウンロードする [SimpleTheme1]

v.1.0 / 2009.9.15

下の解説を読み進める前に、こちらの解説（このテーマ改造キットの概要説明）を必ずお読みください

このキットはBiND3の「テーマ機能」を使い、BiND3のCSSを改造するためのサンプルファイルです。
このキットによるCSSの改造はAdobe Dreamweaver CS4以上で行なうことを推奨しています。
また、CSSカスタマイズは、BiND3のサポート対象外となります。改造の方法について、個別の問い合わせには応じられませんので、このドキュメントと関連サイトを参考にしてください。

1. BiND3の「テーマ機能」を使って、CSSやJavaScriptのカスタマイズが行なえます
2. BiND3単体では設定できない項目を設定できます

例えば・・・
・タイトルや大見出し、小見出し、本文などのデフォルトの文字色や装飾を設定する
・タブやアコーディオンなどの色やデザインを設定する
・BiNDにはないメニューデザインを設定する

例えば上のような「段落スタイル」を一括でオリジナルに変更したり、オリジナルのメニューをデザインしたり・・・写真のロールオーバーの柄や色、テーブルデザインなどを個々に設定できます。色だけではなく、マージンやフォントの装飾なども設定可能です。

タブやアイコーディオンなどもこのように全項目が変更できるようになっており・・白背景以外にも、黒い背景のときの項目もすべて設定できるようになっています。

これらの設定は手書きで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. ブロックスキンは、「シンプル白」もしくは「シンプル黒」のみがカスタマイズされています。それ以外のブロックスキンを変更しても何も変化しません。

以上。

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

当然CSSなので逆解析すればあらゆる要素が改造可能。
ただし、かなり高度なので、このサンプルで改造できる項目を改造することをお勧めします。



以上で、CSSのカスタマイズの解説を終わります。
今後の反応によっては、他のパターンのキットも用意するかもしれません。
まずは、この改造キットでCSSをカスタマイズにチャレンジしてみてください。

この改造キットはサポート対象外のため、個別対応はできませんが、以下の開発ブログで最新情報やコメントを受け付けています。
今後の開発の方向の参考にしますので、ぜひ一度アクセスしてみてください。
http://www.digitalstage.jp/blog/bind_css.html

上記ページでアクセスできない場合は、以下のトップページからたどることができます。
http://www.digitalstage.jp/blog/

みなさまからのご意見をお待ちしております！

2009.9.25
デジタルステージBiND開発クルー

ワンクリック・アンケートにご協力ください
今回のような情報を今後も欲しいですか？今後のこのブログの運営方針の参考にします。
ぜひ投票をお願いします。

[ 今後も是非！(5点) ] [ あるに超したことない(3点) ] [ 必要ない(1点) ]
980人が投票／平均的なご意見：3点 （5点がとても興味ある情報で1点が必要ない情報）

---

投稿者 : Tomoyasu Hirano

<<-すべての記事を一覧表示 | <- ひとつ前の記事へ | ひとつ新しい記事へ ->

---

コメント (2)

コメントを投稿

※ コメントの表示は弊社側で認証を行った後で、順次公開していく予定です。投稿いただいたコメントがすべて表示されるわけではございませんのであらかじめご了承ください。

名前 メールアドレス URL コメント (スタイル用のHTMLタグが使えます)

---

<<- トップページに戻る