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

DIGITALSTAGE Official Blog 開発BLOG

デジタルステージ・メールマガジン

バックナンバーはこちら

ジタルステージが仕掛ける「素敵なコト」、お知らせします。

デジタルステージ代表・平野のコラムをはじめ、新製品情報からアップグレードなどの重要なお知らせ、またプレゼントキャンペーンなどのお得情報、ときには公開前の非公開情報まで、デジタルステージの情報のすべてを最初にここから発信していきます。さあ、今すぐご登録ください!

   メールアドレス:

 

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


2009年09月27日 [ BiND CSS ]


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

v.1.0 / 2009.9.15

スクリーンショット(2009-09-17 9-17 木曜日|23.39.10).pngスクリーンショット(2009-09-17 9-17 木曜日|23.40.57).png

テーマ改造キットのダウンロードはこちらから
(※2009/12/10 Windows環境で解凍すると文字化けする問題を解消しました)
DreamweaverCS4をお持ちの方でCSSの基本的な知識がある方向けのキットです(CS3以上であれば開けます。また手書きでCSSが書ける方はDreamweaverなしでも改造は可能です)。
このキットはサポート対象外ですので、あらかじめご了承ください。

v.1.0.0をダウンロードする(2.5MB)

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

この改造キットについて

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

このテーマ改造キットでできることは?

  1. BiND3の「テーマ機能」を使って、CSSやJavaScriptのカスタマイズが行なえます
  2. BiND3単体では設定できない項目を設定できます
例えば・・・
・タイトルや大見出し、小見出し、本文などのデフォルトの文字色や装飾を設定する
・タブやアコーディオンなどの色やデザインを設定する
・BiNDにはないメニューデザインを設定する

このテーマ改造キットでカスタマイズできる項目の具体例

スクリーンショット(2009-09-17 9-17 木曜日|23.58.54).png例えば上のような「段落スタイル」を一括でオリジナルに変更したり、オリジナルのメニューをデザインしたり・・・スクリーンショット(2009-09-17 9-17 木曜日|23.59.17).png写真のロールオーバーの柄や色、テーブルデザインなどを個々に設定できます。色だけではなく、マージンやフォントの装飾なども設定可能です。


スクリーンショット(2009-09-17 9-17 木曜日|23.58.47).pngタブやアイコーディオンなどもこのように全項目が変更できるようになっており・・スクリーンショット(2009-09-18 9-18 金曜日|0.05.34).png白背景以外にも、黒い背景のときの項目もすべて設定できるようになっています。


カスタマイズはどうやってやるの?

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

なぜ手書きだと大変かというと、BiNDのCSSは独自の入れ子構造のCSSになっているので、一般的なサイトよりも複雑なclass構造になっています。そのため、その構造を理解するのは難しい方もいると思います。この改造キットを使えば、構造を理解しなくてもある程度のカスタマイズが行なえます。

この改造キットの対象者は?

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

CSSの超上級者でなくとも「なんとなく分かる」人であれば改造できるようになっています。
多少CSSの知識があり、多少、Dreamweaverを使ったことがある人ならば、このドキュメントの内容を理解すれば、思ったよりも簡単にCSSのカスタマイズができるのではないかと思います。
ただし、一度もDreamweaverを使ったことがない人や、CSSそのものがまったく理解できていない人にはとても難しいと思います。

このキットを使ってCSSを改造することのメリットデメリット

メリット

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

デメリット

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

必要なもの

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

なぜ、「CS4」が必要か?
必ず必要なわけではないのですが、CS4の「ライブビュー」という機能を使うと、編集がより直感的で分かりやすくなるため、CS4での利用をお勧めしています。

基本的な仕組みを理解しておきましょう

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

BiNDのHTMLタグやCSSのclassは膨大なため、すべてを解説する資料は存在しません。このサンプルファイルにない項目を設定したい方は、例えば「firebug」等のCSSの開発補助ツールを活用して該当する記述を見つけて設定してください(この説明で分からない人はサンプルファイルを改造するだけに留めましょう)。

改造方法

  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」を削除して完成

重要:Dreamweaver CS4上で便利に編集する方法

CSSをカスタマイズする

  1. edit.htmlを開く
  2. 「デザイン」をオンにして「ライブビュー」をオンにする
    • Pasted Graphic.tiff
      • ライブビューをオンにする前は以下のように「雑然として完成系がイメージしにくい」状態ですが、ライブビューをオンにした後は、以下のように「BiND上での完成形と近い状態で編集」できる状態になります。
      • スクリーンショット(2009-09-17 9-17 木曜日|22.46.59).png →→ライブビューON→→スクリーンショット(2009-09-17 9-17 木曜日|22.47.13).png
  3. 「CSSスタイル」のパレットが表示されているようにし、タブから「すべて」ではなく「現在」を選ぶ
    • Pasted Graphic 1.tiff
  4. ライブビューによって本物と近い感じでプレビューできているサンプルページの改造したい項目をクリックする
  5. すると「CSSスタイル」にそのCSSクラスが表示されるので好きに変更する
    • 下の場合は「H2」の色と装飾が表示されている状態です。
    • Pasted Graphic 3.tiff
  6. ちょっとしたティップスとして
    • 下のように色や項目が1つのフィールドになってしまっていて編集しにくいときは
    • Pasted Graphic 4.tiff
    • この「CSSスタイル」のパレットの下部にある以下の「鉛筆アイコン」をクリックします
    • Pasted Graphic 6.tiff
    • すると以下のようにUIで変更できるので便利です。
    • Pasted Graphic 7.tiff
  7. 最後にメニューから「すべてを保存」を選び、CSSのカスタマイズ自体の作業は終了です。

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

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

  1. BiND3上でページのデザインをします
    • スクリーンショット(2009-09-17 9-17 木曜日|22.57.20).png
    • ここでいうページのデザインとは、「設定」の「ページデザイン」の項目のことを指します。
  2. ページデザインが完成したら「テーマ」を開き、「ユーザー設定」タブから「+」を選び、現在のページデザインを「テーマ」として保存します。
    • スクリーンショット(2009-09-17 9-17 木曜日|22.56.10).png
  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を改造できる
  • ほか

フォルダの構成

MyTheme00フォルダ
テーマ改造キットのフォルダ

_developerフォルダ
Dreamweaver用の「改造を便利にするためのHTML」が入っている

実際のテーマとしての動作には必要ありません(削除可能です)
bdmodified.txt
中を開くと日付が入っていて、この日付が「テーマプラグイン」としてのこのフォルダのバージョンになっています。

BiND3のアプリケーションフォルダのTemplates内「CornerSkin」の中にこのテーマを入れた際、テーマをあとから修正したときにはこの日付を更新(新しい日付)にしてください。

するとBiND3でそのテーマが適用されたサイトを開いたときに、最新のテーマに「更新」してくれるようになります。モジュールの更新と同じ要領で、サイトに適用したあとからでも最新のテーマ修正できる便利な機能のための設定ファイルが、このbdmodified.txtです。

cssフォルダ
「theme.css」が主なテーマを改造(上書き)するためのファイルです。

実際はこれを手書きで編集するのは難解なために「edit.html」があります。
その他、ブラウザごとのフォント設定などのCSSが並びます。
「style.css」が最初に読み込まれるので高度な改造をしたければここを改造してください。
jsフォルダ
「override.js」にいろいろ記述することによって、テーマによるJavascriptの改造も行なえます。例えばオリジナルのAjaxなどが自在につくれます。

PageSettingsフォルダ
ここは「テーマ」の「ユーザー設定」で保存された、『ページ設定のページデザイン』の設定が格納されています。このキットの中のこのフォルダはほとんど空の状態です。

実際は「テーマ」の「ユーザー設定」で保存されたものを入れます。そうするとテーマを適用した際、ページの背景なども一緒にガラっと変更される仕組みです。
info.xml
「テーマ」のUI上に表示されるテーマ名などを記載します(テキストエディタで開き、手書きでXMLを変更してください)

thumbnail.png
「テーマ」のUI上に表示されるサムネールです

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

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



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

最新情報について

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

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

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

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



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

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


投稿者 : Tomoyasu Hirano


コメント (2)

これまでも,ソースを見てはCSSの該当箇所を見つけてちょこっと変更をしていたのでテーマ改造キット大歓迎です。色を変えるだけでもずいぶんとBindらしさを消せますよね。

ところで,Bind3から現れた「拡大画像がFLASHやブログパーツ背面に回ってしまう」という現象は改善できそうなのでしょうか?

kagoshima

できれば動画で説明していただければ助かります。

コメントを投稿

※ コメントの表示は弊社側で認証を行った後で、順次公開していく予定です。投稿いただいたコメントがすべて表示されるわけではございませんのであらかじめご了承ください。
名前
メールアドレス
URL
コメント
(スタイル用のHTMLタグが使えます)

デジタルステージ公式 Twitterアカウント

Twitterボタン 代表・平野友康のつぶやきをリアルタイムでチェックできます。ぜひフォローください!


プロフィール

平野 友康株式会社デジタルステージ
代表

ひらの ともやす
平野 友康


デジタルステージ代表取締役。1974年生まれ。どこにもないソフトウェアを世に出すことを目指し10年。構想から開発まで自ら行っている。著書に、その独特な開発手法を綴った手記「旅する会社」(発行:アスキー)がある。また、オールナイトニッポン・金曜一部(ニッポン放送)のメインパーソナリティーの経験や、劇団第三舞台から独立した経歴から考えるに、デジタルよりはアナログの人。


旅する会社旅する会社
[発行元:アスキー]

デジタルステージ代表 平野友康のすごいソフトウェア開発
旅と合宿を通じてソフトウェアの開発をした4年間の軌跡を綴った一冊。

→ 詳しい情報               amazonで買う


DIGITALSTAGE x iPhone

僕らは近い将来、iPhoneやiPodTouch向けのアプリケーションの開発をするかもしれません。


RSS で更新情報を配信中

このページの更新情報はRSS で配信されています。お手持ちの RSS リーダに登録することで随時更新情報を取得できますので、ぜひご利用ください。

RSS


2014年4月
Sun Mon Tue Wed Thu Fri Sat
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30      

カテゴリー別で並び替える


デジタルステージ・プロダクト

BiND for WebLiFE* 3

ID for WebLiFE* Plus

LiFE* with PhotoCinema 2 Plus

motion dive .tokyo


BiND × Movable Type

ご覧のページは試験的にBiNDとMovable Typeを組み合わせて作成・更新されています。カレンダーやRSS、トラックバック、アンケートを自動生成しています。

Movable Typeについて検索する

BiNDとMovable Typeの組み合わせ方法についてはBiNDの操作以外に高度な技術が必要となります。その為技術的な質問等には一切お答えできません。
ご了承ください。