テンプレートベースでホームページを作成できるBind。テンプレートベースとはいえ、CSS編集機能もついていて、カスタマイズもかなりの部分までできます。
しかし、CSS編集機能からは変更が効かない、テンプレートそのものに埋め込まれたCSSもあります。「このCSSをいじられちゃ、テンプレートデザインが崩れてしまうよ」っていう不可侵領域、アンタッチャブルコードとも言える部分でしょうか。
でも、いじっちゃうんです。変えちゃうんです。
今回変えたいのは、これ↓
ホームページのヘッダ下、パンくずリストの色です。これがテンプレートに内包化されててCSS編集機能で色変更効かないんですね。この色を赤くしたい！
Mac環境ですので、使用しているブラウザはSafari。Safariは環境設定から開発メニューにチェックマークを入れておきましょう。
変えたいパンくずリストの「HOME」付近で右ボタンクリック。「要素の詳細を表示」を選択します。
すると画面が分割されソースコードが現れます。
この画面に表示されている情報を辿って行くと、いじるべきCSSファイル、コードなどが判明していきます。下の画像をクリックで拡大して確認して下さい。
気をつけたい部分ですが、、
ここで表示されているソースコードはブラウザ上のソースコードなので、Safari上でこのソースコードを変更しても、それは今開いているSafariのウィンドウだけに反映されるだけで、本来のCSSファイルが変更されたわけではありません。
上のソース表示画面から変更したいCSSファイルの場所、コードの行を確認したら、本来のCSSファイルをFinderをたどって見つけていきます。
見つけたCSSファイルをDreamweaverで開いたところです。100行目にパンくずリストのCSSがあります。黄色にマークアップしてある部分の色指定を変えます。
※黄色はこの記事を描く際に画像処理でつけたものです。実際のDreamweaver画面では黄色くなってません。。
該当箇所をff0000の赤に書き換えました。マウスオーバーしたときの色（hover）はオレンジ色「dd960f」に変えました。
保存してBindに戻り、Bindのアップロードボタンをクリック。
ラウザで確認してみると、パンくずリストの「HOME」が赤く変わりました。
この一連の応用で他にもBindのテンプレート改造はなんとかできそうですね。
しかし、CSS編集機能からは変更が効かない、テンプレートそのものに埋め込まれたCSSもあります。「このCSSをいじられちゃ、テンプレートデザインが崩れてしまうよ」っていう不可侵領域、アンタッチャブルコードとも言える部分でしょうか。
でも、いじっちゃうんです。変えちゃうんです。
今回変えたいのは、これ↓
ホームページのヘッダ下、パンくずリストの色です。これがテンプレートに内包化されててCSS編集機能で色変更効かないんですね。この色を赤くしたい！
Mac環境ですので、使用しているブラウザはSafari。Safariは環境設定から開発メニューにチェックマークを入れておきましょう。
変えたいパンくずリストの「HOME」付近で右ボタンクリック。「要素の詳細を表示」を選択します。
すると画面が分割されソースコードが現れます。
この画面に表示されている情報を辿って行くと、いじるべきCSSファイル、コードなどが判明していきます。下の画像をクリックで拡大して確認して下さい。
気をつけたい部分ですが、、
ここで表示されているソースコードはブラウザ上のソースコードなので、Safari上でこのソースコードを変更しても、それは今開いているSafariのウィンドウだけに反映されるだけで、本来のCSSファイルが変更されたわけではありません。
上のソース表示画面から変更したいCSSファイルの場所、コードの行を確認したら、本来のCSSファイルをFinderをたどって見つけていきます。
見つけたCSSファイルをDreamweaverで開いたところです。100行目にパンくずリストのCSSがあります。黄色にマークアップしてある部分の色指定を変えます。
※黄色はこの記事を描く際に画像処理でつけたものです。実際のDreamweaver画面では黄色くなってません。。
該当箇所をff0000の赤に書き換えました。マウスオーバーしたときの色（hover）はオレンジ色「dd960f」に変えました。
保存してBindに戻り、Bindのアップロードボタンをクリック。
ラウザで確認してみると、パンくずリストの「HOME」が赤く変わりました。
この一連の応用で他にもBindのテンプレート改造はなんとかできそうですね。
0 件のコメント :
コメントを投稿