• 2015.3.9
• TCDANカスタマイズ
• 2 comments

AN(tcd014)のグローバルメニューやスライダーの背景などをカスタマイズする

AN(tcd014)で、グローバルメニューやスライダーなど、ヘッダー付近の背景をカスタマイズする方法です。

ヘッダー付近の背景は、サイトの一番上からスライダー下部までが一つの画像(background.jpg)になっていて、それが横方向に繰り返して表示されるようになっています。

背景画像は、グローバルメニューがあるものとないものの2種類の画像が用意されていて、グローバルメニューがあるものはbackground.jpgという名前で、ないものはbackground2.jpgという名前で、どちらも img/common に入っています。

デフォルトの背景画像(background.jpgとbackground2.jpg)

このような画像を、自分用にカスタマイズしてアップロードします。

背景画像を用意する

用意する背景画像ですが、元の背景画像の全体の高さは503pxで、そのうちヘッダーが161px、スライダー部分が342pxになっていますので、これらの高さだけ合わせるようにしてください。

各高さは、以下の部分に記述されています。

ヘッダーの高さ(height:161px)

#header { position:relative; height:161px; width:992px; margin:0 auto; }
.no_nav #header { height:124px; }

グローバルメニューの下からスライダーの下までの高さ(height:342px)

#index_top { width:992px; height:342px; position:relative; }

グローバルメニューの高さ(height:37px)

/* global menu */
.menu_button { display:none; }

#global_menu { height:37px; margin:0; position:absolute; left:0px; bottom:0; padding:0; z-index:999; width:992px; background:url(img/header/menu_line.gif) no-repeat left top; }

ヘッダー部分の高さイメージ

背景画像を変更する

用意した画像のファイル名を backgroud.jpg 以外にしてアップロードした場合は、style_pc.cssで指定されている背景のファイル名を変更してください。

変更するファイルは、style_pc.cssです。body に指定されている background の画像を変更してください。

変更前

body { margin:0; padding:0; background:url(img/common/background.jpg) repeat-x left top;
       font-family:"Century Gothic",Arial,sans-serif;
       color:#333; }
body.no_nav { background:url(img/common/background2.gif) repeat-x left top; }

私がそうだったのですが、作った画像がサイトの雰囲気に合わないとかで、何度も作り直しになるかもしれません(苦笑)

何度も作り直しているうちに、とりあえず一旦元に戻そうと思った場合でも大丈夫なように、元画像(background.jpg)のバックアップ(コピー)を残しておくほうがいいと思います。

グローバルメニューをマウスオーバーした時の色を変える

グローバルメニューをマウスオーバーした時の色を変えたい場合は、style_pc.css の /*– header –*/ の中にある /* global menu */ の部分を変更します。

#global_menu li a:hover に指定されているグレー(#979797)を、好きな色に変更してください。

変更前

#global_menu li a:hover { background-color:#979797; }

もし、グローバルメニューがドロップダウンで表示されるようになっていて、ドロップダウンして出てくるメニューの色も変えたい場合は、#global_menu ul ul a:hover の部分の、background のカラーコード(#f2f2f2)を変更してください。

#global_menu ul ul li { float:none; height:auto; line-height:0; padding:0; margin:0; text-align:left; background:none; }
#global_menu ul ul a { font-size:12px; position:relative; padding:10px 20px 10px; height:auto; line-height:190%; margin:0 0 -1px 0; text-align:left; background:#fff; color:#333; border:1px solid #ccc; }
#global_menu ul ul a:hover { border:1px solid #ccc; background:#f2f2f2; }

最後に

始めにも言いましたが、ヘッダー・グローバルメニュー・スライダーの部分が一つの画像になっているので、例えば、グローバルメニューの背景だけを変えたいという場合でも、元画像(background.jpg)からグローバルメニューの部分だけを変更する、という作業になって、少し手間がかかるように思います。

かといって、わざわざバラバラにして背景を指定し直すのも、さほどメリットを感じませんので、ヘッダー付近の背景を部分的に変えたいという場合でも、とりあえずこの方法でいいと思います。