wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

Expression Web で文字色や背景色などを思い通りにコントロールするには

おかげさんで、Google+のExpression Webのコミュニティのメンバー人数が増えていってます。ありがとうございます。

Expression Web Users Group Japan - コミュニティ - Google+

最近目立つ質問は、「思い通りに文字色を変更できない」「思い通りに背景色を変更できない」といったものです。

FrontPageからの移行された方や、普段Microsoft Word等を使っている方は、Wordと同じ感覚でツールバーから色を指定しがちです。すると、自動的にクラススタイルが生成されていくわけです。

.auto-style1 から連番でどんどん作業中のWebページに生成されてしまい、何がなんだかわかんない!みたいな。

文字列を選択してツールバーからフォントの色を指定していくと、

<a href="link.html"><span class="auto-style1">文字色を変更</span></a>

って感じになっちゃいます。その .auto-style1 のスタイルがどんなスタイルなのか、そのセレクタ名が連番になっている限りわけわかんなくなります。

もし、そうなった場合は、画面右下にある[スタイルの適用]パネル、もしくは[スタイルの管理]パネルからその問題のスタイルを右クリックして、ショートカットメニューより[スタイル’auto-style1’の変更]を選択して、わかりやすい名前にします。そのあと、CSSファイルにそのスタイルを移動して、ほかのWebページでも使いまわしができるように対処するのがポイントです。

特に、リンクの文字色を変更する場合は、ツールバーから文字色を指定するのではなく、直接 a タグのスタイルに対して新しいスタイルを作成します。特定のエリア内のリンクの文字色を変更するには、どのタグ内のリンクなのか、あらかじめ指定するようにしてください。

たとえば、箇条書きや段落番号リストのリンク文字色だけを変更したい場合は、新しいスタイルのダイアログボックスの[セレクタ]ボックスに li a といった具合にします。

image

 

aタグがどのタグ内に存在するか、ということを考えます。クイックタグセレクターでタグの場所を確認するといいでしょう。