BiNDをカスタマイズ

「くまぶろ: BiNDを使う」の続きです。
基本的なリポートは、前回ザッと済ませました。
今回はカスタマイズの話をしましょう。

先ずガイド本を一冊ご紹介します。
「伝える 伝わる わたしだけのホームページを作る本」
ソフトメーカーが監修した公式ガイド本ですが、実際にBiNDで作られたホームページを例として解説されています。
デザインや文章、写真などに自信がなかったり「迷いがある人」には良いヒントになりそうです。
もちろん使い方の解説はしっかりありますし、簡単なカスタマイズも出ていますので、BiNDを使う人は持っていても損はないでしょう。

私はMacintoshを使っているので、この記事の中の画像はMacのSafariで表示したものです。
BiNDはMac版の他にWindows版もあり、使用方法は同じで、このガイド本も両方の環境で共通に使えます。

今回は「チップトップ」のホームページを例にします。

選んだカートリッジ（テンプレート）を、そのままブラウザーで表示させると、左のようなデザインです。
それに、必要なものを足したり、不要なものを引いたり・・或いは「スキン」を変えるなど、デザインしていきます。
・・で、出来上がったのがこちらです。

写真は、BiNDでページを作りながら画像サイズを変更することも出来るし、普通はそれで問題ありません。
画像をギリギリまで軽くしたい場合や、画質にこだわりたい人は、予め必要なサイズに変更したものを、一つのフォルダーにまとめておくと良いでしょう。
ここまでの所は、BiNDの標準機能で対応できますし、上記の「伝える 伝わる わたしだけのホームページを作る本」に掲載されている方法で出来ます。
一般的に、個人が自分のホームページを作るには、ここまでで充分だと思います。

とは言え、プロの目で見ると、どうしてもこれは何とかしたいと思うことも出てきます。
その一つが、前回の記事でも指摘した「テキストカラーの設定」です。
BiNDでは、スキン毎に最適と思われるテキストカラー、リンクカラーが設定されていて、それを任意のカラーに変更する機能は付いていません。
ページ中に異なるスキンを適用した複数のブロックがある場合、同一ページ内で「リンク色が不統一」となってしまいます。
これはユーザビリティの面で好ましくありません。
また「スキン毎に最適と思われるカラー」というのも、メーカーの設定ですが、最近の流行でしょうか、非常に目立ちにくい（背景色に対してコントラストが低い）色が使われているスキンもあります。

これは「カラーダークネイビー」というスキンを適用した部分です。
「リンク(未訪問)色」と「タイトル(リンク無し)」の色が同じです。
また「リンク(訪問済み)色」が薄すぎて視認性が悪いと思われます。
クールと言えばクール・・でも、使いやすさは疑問ですね。
で、こんな感じに変更してみました。
ウェブの標準表示は、リンク色はブルー、訪問済みリンク色はパープルですが、生のままのブルーとパープルでは派手すぎます。
そこで、彩度を落として、ブルーとパープルとして充分認識されつつデザイン的なクールさも維持できる範囲の色にしてみました。
これ以外の部分は「シンプルホワイト」というスキンです。
そのリンク色はグリーン、訪問済みリンク色は茶色だったので、上記と同じブルーとパープルの彩度を落とした色に変更しました。

それを変更するにはスタイルシート・・CSSファイルを修正する必要があります。
そのCSSファイルは、一旦サイトを作って保存してからでないと修正できません。
先ずはリンクカラーなども気にせず、BiND標準のスキンで制作したサイトを保存します。

サイトは、左のような「MyBiND_Sites」フォルダーに保存されます。
フォルダーの場所は、BiNDをインストールしたときに決められますが、後から自分の使いやすい場所に変更することも可能です。
サイト名が「site0000」とした場合、以下のような階層構造の中にCSSファイルがあります。
MyBiND_Sites ＞ site0000 ＞ _module ＞ theme ＞ _default ＞ blockskin.css
この「blockskin.css」が、修正するSCCファイルです。

問題は、このCSSファイルの何処を修正するか・・です。
はっきり言って、CSSスクリプトをある程度理解できないと無理です。
メーカー非推奨の裏カスタマイズですから、何があっても自分の責任です。
基本的には、サイトフォルダー（この場合は「site0000」フォルダー）をまるごとバックアップしておけば、元に戻すことは出来ますが・・

以上を承知の上で、やってみるなら、先ず「カラーダークネイビー」のスキンのCSSが記述された場所を探します。
　/* color ———————————————— */　と記述された行の更に下の方に　/* navy_nr */　という行があり、そこから下が「カラーダークネイビー」のスキンのCSSです。

はい、ヒントはここまでです。
ここから先は、このCSSファイルを見て、何が書かれているか理解できなければ、残念ながら無理です。
CSSの手引き書でも買って、首っ引きでチャレンジしてみるのも良いでしょう。
ずっと前の話で