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

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

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

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

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

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

background.jpg

background

background2.jpg

background2

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

カスタマイズをする場合の注意
必ずバックアップを取って自己責任でお願いします。もし何らかのトラブル等がおこっても、私は一切の責任を負えませんのでご了承ください。

背景画像を用意する

用意する背景画像ですが、元の背景画像の全体の高さは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)からグローバルメニューの部分だけを変更する、という作業になって、少し手間がかかるように思います。

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

関連記事

コメント

  • トラックバックは利用できません。
  • コメント (2)
  1. はじめまして、ゲンキと言います。
    最近、別のブログでTCDテーマ(AN)を使うようになったのですが、
    まりーさんのこちらのサイトが参考になり過ぎて感動したのでコメントを入れさせて頂きました。
    特にTCDテーマはスマホ表示の際のロゴが表示されないのが嫌すぎて考えていたのですが、
    あっという間に解決・・・凄くわかりやすくて色々と勉強になりました。
    他にもたくさん有益な情報をありがとうございます。
    またお邪魔させて頂きます。

      • まりー
      • 2015年 6月 30日

      ゲンキさん、こんにちは。

      感動してコメントをくださるなんて、
      私の方こそ、ものすごく感激です♪
      ありがとうございます┏○))

サイト内検索

おすすめ記事

ページ上部へ戻る