www.wanichan.com

ページ全体のデザインを決めよう!

 FrontPage Expressでホームページ作成
背景の設定は、デフォルトでは背景色が白になっています。これをお好みにアレンジする方法を紹介します。

背景画像を設定するには?

背景にお好みの壁紙に設定することもできます。
作成中のHTMLファイルは背景画像を設定する前に必ず保存してください。まだ存在しない作成中のHTMLファイルに挿入する場合は、ホームページサーバーに転送した場合、あなたの編集に使われているパソコンからは表示することはできますが、他のパソコンでは表示されません。注意してください。

メニューバーから「書式(O)」→「背景(K)」を選択してください。
上の「背景の画像(I)」のチェックをつけて、「参照(B)」ボタンを押してください。
ページのプロパティ

背景画像の選択
そして、右上の「参照(B)」ボタンを押します。

背景画像の選択
壁紙に設定したいファイルを選択して、「開く(O)」をクリックして、
最後にOKボタンを押してくださいね。

HTMLタグについて
背景画像を設定されている場合は、<BODY>タグ内のbgcolorの代わりに
background="壁紙に設定しているファイルへのパス"となります。

▲Page TOP

背景画像を固定したいんだけど

ページをスクロールしても、背景画像を固定したい場合はどうすればいいでしょうか?
これはとても簡単です。
「ウォーターマーク(W)」のチェックボックスをつけてOKボタンを押してくださいね
ページのプロパティ

▲Page TOP

背景色を指定するには?

背景色は白ではなく、好きな色に設定する方法はどうすればいいのでしょうか?
まず、メニューバーから「書式(O)」→「背景(K)」を選択してください。

ページのプロパティ/背景
すると、ページのプロパティの背景タグが表示されます。
左側の[背景(C)]のリストボックス横の▼印をクリックしてみてください。
背景色の設定
すると、基本16色が設定できます。
他の色を背景色にしたい場合は、一番下の「ユーザー設定」を選択すると、色の設定のダイアログボックスが表示されます。
色
基本色にない場合は自由に色を作成して、「色の追加(A)」ボタンを押して、OKボタンを押してください。

また、背景色に合わせて文字を読みやすくするために、基本テキスト(文字列)の色も調節しておいてください。
「テキスト(T)」の部分も背景色の設定と同様に行ってください。

そして、右側にあるハイパーリンクの設定されている文字列の色の設定もバランスを考えて調節しておくこともお忘れなく!

最後にページのプロパティのダイアログボックスのOKボタンを押してくださいね。

▲Page TOP

テキスト、ハイパーリンクの色を指定するには?

もし、暗い背景を選択した場合、通常のテキストの文字列も同時に設定しなおしてください。
できるだけ見やすいようにコントラストのはっきりする明るい色を選択するとよいでしょう。
まあ、単純に「白」を選択してもかまわないんですけど(笑)
あと、忘れてはならないのは、ハイパーリンクの色の設定です。黒っぽい背景色を選択した場合、それぞれのハイパーリンクの文字色を明るい色に設定するのを忘れずに!
ページのプロパティ/背景

色の設定欄の[テキスト]は黒、ハイパーリンクは青、表示済みのハイパーリンクは紫になっています。

基本テキストの色を白に変えたい場合は、背景色の設定と同様、
右側の▼印をクリックして、一覧から設定したい色をクリックしてください。

その後、ハイパーリンク、表示済みのハイパーリンク、アクティブハイパーリンクの色も設定しておきましょう。
アクティブハイパーリンクというのは、クリックしたときの色です。一瞬ですのであまり気づかない業だとは思いますが(^^;

バランスの取れた設定を確認したところで、最後に「OK」ボタンを押してくださいね。

HTMLタグについて

背景色、テキストの色などの設定を行っているHTMLタグは<BODY>タグです。
<body bgcolor="#FFC081" text="#800000" link="#008000"vlink="#800080">
bgcolor=背景色、text=テキスト(文字列)の色、link=ハイパーリンクの色 vlink=訪問済みのハイパーリンク
となります。ちなみに、アクティブハイパーリンクの記述はalinkです。
アクティブハイパーリンクとは、ハイパーリンクが選択されたときに表示される文字列の色です。
一瞬なのであまり気付かないかもしれませんが。

▲Page TOP

スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

コメント

このページに関する技術的なご質問には一切お答え致しません。フリーソフトになったExpression Web 4に移行してください!

▲このページのトップへ