BiND for WebLiFE／CSSをいじる | 編集制作 | アマルゴンウェブサイト

BiND CSS改造キット

BiND CSS改造キットの一番の弱点は、ブロックスタイルが「シンプル（白）」に対してカスタマイズを行うのみとなっている点だ。ブロックスタイルをそれ以外にしていると適用できないために部分的なカスタマイズが可能な反面、レイアウト済みのウェブページが別のブロックスタイルを使っていれば、お手上げになってしまう。


とりあえず、自分ではaリンクに表示されるドットの下線だけ変更したかったので、調べたメモを以下示す（これまでメモしないで毎回調べ直しだったのでここに書いておくことにする）。

なお、もしもアップデータが更新されて_moduleが更新された際に、データが上書きされて元に戻ってしまうこともある（かもしれない）。その場合は、同じ作業を手動で行う必要がある。専門の方なら大きな問題はないかもしれないが、このあたり、CSSの内容もソフトの機能の一部だったりするので、コーディングに弱いと管理が難しいかもしれない。もうちょいソフトのほうからいじれるような穴が空いてるといいんですが。

テキスト装飾ベースとなるCSSファイル

ユーザが作成したBiNDサイトは、ユーザが環境設定で指定したサイトフォルダに保存されている。デフォルトでは、

• ユーザ/書類/DIGITALSTAGE/BiNDバージョン名/サイトフォルダ名

となる。CSSを変更する際はBiNDでサイトを閉じておいた方がよさそう。確認は、サイトフォルダからindex.htmlなどをブラウザで開いてリロードしながら行う。

ベースとなるファイルは、選択したサイトテンプレート（カートリッジ）に含まれるCSSファイル。たぶん共通。

• サイトフォルダ／_module/layout/pagelayout.css

pagelayout.cssに、選択したサイトテンプレートのページレイアウト情報が書かれていて、下のほうにいくと

/* :default colors */
a
{ color:#00C; border-bottom:1px dotted #00C; text-decoration:none;}
.menuh a,.menuv a,span.img a,.bindacs-set a
{ border-bottom:0;}
a:visited
{ color:#808; border-color:#808;}
a:hover
{ color:#8080FF; background-color:#CCF;}
.menuh a:hover,.menuv a:hover
{ background-color:transparent;}
span.noborder a:hover,span.noborder a:hover img
{ background-color:transparent !important;}
h2
{ color:#000;}
h3,h4
{ color:#333;}
p,span.blockquote,.indent th,.indent td,li
{ color:#444;}
p.affix
{ color:#666;}
div.hr
{ height:10px; border-top-width:0; background-repeat:repeat-x;}

みたいのが出てくるので、リンクのスタイルで、　a , a:visited, a:hover, の気になる箇所を任意に変更する。わたしは、 border-bottom:1px dotted #00C;　を削除すればとりあえず点線が非表示になる。

スタンダードブロックのa:hoverのカラーを変更する

上記のCSSのカラー指定で色を変えても、変更が反映されない。別のCSSファイルで上書きされているからのうようだ。そのファイルは、

• サイトフォルダ/_module/theme/default08/blockskin.css

のようなので、こちらを開いて作業する。BiNDの「ブロックエディタ」の「設定」画面のほうで「ブロックスキン」が6種類（シンプル白／シンプル黒／スタンダード白／スタンダード黒／リッチ白／リッチ黒）並んでいるが、その順でスタイルも指定がある（もちろん、プルダウンメニューの赤／青／オリーブなどもある）。

そのほかにも、メニュー項目のデザインなどもここに含まれるので、無理すればメニューの背景画像を変えたりもできそう

わたしの作業の場合は、下線をなくすとリンク箇所が分かりづらくなるのでa:hoverの色だけ変えたいという作業。また、「シンプル白」はバッググランドカラーが999で設定されているので変更する必要なけれど、「スタンダード白」はその色では背景となじんで見づらいので直す。下のあたり。コメントで「skin-3 standard(#FFF)」などとあるので、「スタンダード白」、などと分かる。

/* ---------- skin-3 standard (#FFF) ---------- */
/*(0-1)*/
.skin-3 a
{ border-color:#999; color:#333;}
.skin-3 a:visited
{ border-color:#666; color:#000;}
.skin-3 a:hover
{ border-color:#666; background-color:#EEE; color:#000; text-decoration:none;}
.skin-3 span.img a:hover img,* html span.img a:hover
{ background-color:#999;}
.skin-3 p
{ color:#333;}　（以下略）

たとえば

.skin-3 a:hover
{ border-color:#666; background-color:#ffff66; color:#000; text-decoration:underline;}

みたいにすれば「下線あり」「背景ハイライトあり／色は黄色」「文字色黒」みたいな感じになる。border-color（画像の枠の色）はちょっとほかにも設定がありそうなので、ここで変えて効くかどうかは確認できてない。とりあえずスライドショーや写真の拡大などの部分には効いてないと思う。

以上。

まとめ：たくさんのファイルがあるが、そんなに複雑ではなさそう

BiNDサイトには複数ブラウザに対応するためにいろいろCSSファイルが入っていたり、リンクしているので混乱するが、見た目をいじるファイルは限定されているようなので、ちょこっと改造も、このようにして行える。ただしメーカー保証外。すごく壊れてしまう可能性も大（笑）

それから、BiND上で「テーマを保存」という機能があるので、そのデータがさらに上書きされて影響する可能性もあるかもしれない。

• サイトフォルダ/_cnskin/自分でつけたテーマフォルダ名/CSS/theme.css

ただし、空欄になっているので、インターフェース上からここに書き込まれる機能があるようには思えない感じがする。コーナースキンの場合は、「PageSettings」のXMLファイルのほうが大事そう（中味をみてもよくわらないけど、ここで「設定／ページデザイン」の内容などが管理されている）。

［この記事は、個人サイト用の記事であり、評価内容や意見は、デジタルステージや各出版社とは一切無関係ですのでご了承ください／また記事を参考になさる場合にサイトの改変結果になんら責任は負えません］

メーカーのリリースと詳細情報は以下からどうぞ

ウェブ制作ソフトBiNDの最新バージョンはFacebookページ作成に対応
「BiND for WebLiFE* 5」

http://www.digitalstage.jp/bind/about/index.html