logo.gif

Editing Books etc. ——いろいろ編集します

BiND for WebLiFE* のCSSを改変(改造キットなし)(2011/10/14)

BiND CSS改造キット

bind5_pro_8F9190D095t82AB.jpgBiND 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

cover-OL-0329.png

BiND for WebLiFE*3で作る おしゃれなホームページ【Ver3.5対応】

B5判変形/240ページ/2010年4月中旬発売/価格2,400円+税
ウェブコンポーザー・プロジェクト+アマルゴン[編著]
デジタルステージ[監修]
瀧上園枝、佐藤好彦、ななきち、樋口泰行、アマルゴン[執筆者]

「カンタンにキレイなホームページを作りたい」という人にぴったりのウェブ制作ソフト、BiND for WebLiFE* の公式ガイドブックです。簡単さや手軽さには定評のあるBiNDですが、バージョン3まで成長して、かんたんなだけでなく、かなり本格的に利用できるソフトになりました。そこで本書でも、マニュアルだけでは紹介しきれない部分まで紹介したいと、判型も大きくなって、ページも増量し240ページの本になりました。

この春のバージョン3.5のバージョンアップに対応、ケータイサイト対応になったBiND Serverについても紹介しています。

アマルゴンではPart1とPart4、「ウェブコンポーザー」さんの取材記事や、企画・編集を担当しました。

[詳細]

ページの先頭へ

spacer.gif

Beyond Interaction
メディアアートのための
openFrameworks
プログラミング入門
ofbook_banner.jpg

アバウト

アマルゴンの業務案内は、ABOUT USのページをご覧ください。

BiND forWebLiFE*
個人や小規模サイトにおすすめの
ウェブ制作ソフト

bind3.gif