TAテーマ001 背景色と背景画像

TAテーマ001 背景色と背景画像

テーマ001情報
TAテーマ001 背景色と背景画像

 

美しい背景色や背景画のホームページは見ていて楽しいものです。

background1

上の図をご覧ください。

これはTAテーマ001の初期画面ですが、グローバルメニューがフレーム幅を超えて横に伸びている様なデザインになっています。(背景画の有無を交互に表示しています)

bodyhome_bg

これは簡単なテクニックでして、左図の様な上端からグローバルメニューの位置まで透明でグローバルメニューと同じ高さ分の装飾画像(見えやすいように黒枠で囲っています)をブラウザ全画面でX(横)方向に繰り返しているだけです。

TAテーマ001はブラウザ全画面に対する背景画の設定をトップページとトップページ以外の2系統を用意しています。

これは一般的にトップページにはヘッダー画像があるため上端からメニューまでの距離が他のページと異なるためです。

また、TAテーマ001のブラウザ全画面に対する背景画は2種類の設定が可能です。上部と下部に分けたり組み合わせたりと様々な演出が可能になっています。

背景画像と同時に背景色の設定も行えます。背景画像を透明部が混在した画像などを使用すると背景色と合わせて複雑で高度なアートデザインができます。

seamless-1082223_640

上図の様にX(横)方向もY(縦)方向もシームレス(つなぎ目の柄が一致する)の画像を使うと画像が連続して効果的な演出効果が得られます。

background2

X(横)方向とY(縦)方向の両方を繰り返すと上図の様に連続した柄の背景画になります。(コンテンツの表示が見やすくなるように背景画を薄くしています)

TAテーマ001は、全てのフレーム(ヘッダー部、メインコンテンツ部、サイドバー部、サブサイドバー部、フッター部)の背景画と背景色が独立に設定できます。

下の図はブラウザ全画面に対する背景色(黄色)に対してヘッダー部(ピンク)、メインコンテンツ部(薄茶色)、サイドバー部(青緑)が独立に背景色を設定された例です。(分かりやすいように派手な配色にしています)

background3

最近は背景画や背景色を多用しないデザインが好まれますが、ワンポイントで魅力的な背景画があるとサイト自体が引き締まると思います。

 

お役に立てたら幸いです。

«
»
  • LINEで送る


ta_thm001_downloadta_designing