～TCD～AN(tcd014)のフッター背景を変更する方法

TCDのWordPressテーマ「AN(tcd014)」で、フッター部分の背景をカスタマイズする方法を紹介します。

これら3つの部分にそれぞれ充てられている背景のCSSを変更していきます。

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

広告やウィジェットを配置する部分の背景を変更する

広告やウィジェットを配置する部分の背景は、background.gif というファイル名の画像で、img/footer に入っています。

この部分の背景を変更するには、自分用に作成した別の新たな背景画像と元々ある画像と入れ替えるか、いっそのこと画像を使わずシンプルに背景色で塗ってしまうようにするなどするといいでしょう。

背景画像を新たに用意する場合

元のフッター背景画像サイズは 96×800px で、これが横方向に繰り返し表示されるようになっています。ですので、基本的には画像の高さを800pxに合わせて作るといいと思います。

ただ、フッターの高さが800pxを超えるほど、長～いウィジェットを配置した場合は、フッターロゴ部分とのあいだに背景画像がない白い部分が出来てしまい、ちょっとおかしな感じになってしまいます。

その場合は、高さを900pxや1000pxなど、ご自身のサイトに合わせた高さで作っておくといいでしょう。

画像ができたら、保存してアップロードします。保存する時のファイル名は、新しく好きな名前をつけて保存してもいいですし、background.gif に上書き保存をしてもいいです。念のために元の画像のバックアップだけは残しておきましょう。

background.gif 以外の名前にしてアップロードした場合は、CSSで画像のファイル名を変更します。

変更後

/* footer top area */
#footer_top_area_wrap { clear:both; width:100%; min-width:992px; background:url(画像URL) repeat-x left top; }
#footer_top_area { width:992px; margin:0 auto; position:relative; color:#555; padding:33px 0; }

背景を好きな色でベタ塗りする場合

背景を好きな色で塗ってしまう場合は、background に好きなカラーコードをいれればOKです。

変更後

/* footer top area */
#footer_top_area_wrap { clear:both; width:100%; min-width:992px; background:好きな色のカラーコード; }

フッターロゴ部分の背景を変更する

フッターロゴが表示される部分の背景は、CSSで#333(濃いグレー)という色が指定されていますので、#footer_bottom_area_wrap の background:#333;の部分を、お好きな色に変更してください。

/* footer bottom area */
#footer_bottom_area_wrap { clear:both; width:100%; min-width:992px; background:#333; }
#footer_bottom_area { position:relative; width:992px; height:85px; margin:0 auto; position:relative; color:#fff; font-size:11px; }

もしただの背景色ではなく、画像にしたいという場合は、background:#333; の部分を background:url(画像URL) repeat-x left top; などに変更するといいです。

背景の色によっては、表示される文字の色も変更したほうがよくなるかもしれません。その場合は、#footer_bottom_area の color:#fff;を好きな色に変更してくださいね。

copyrightの部分の背景を変更する

文字の色は、color:#ccc;(薄いグレー)で、また、サイト名の文字色も別にあり、同じく#ccc;という色が充てられています。

背景色の変更に伴って文字の色も変更したい場合は、#copyright の color:#ccc; 、#copyright a の color:#ccc; を変更してください。

/* copyright */
#copyright { width:100%; min-width:994px; clear:both; text-align:center; color:#ccc; background:#000; margin:0; height:38px; line-height:39px; font-size:11px; }
#copyright a { text-decoration:none; color:#ccc; }
#copyright a:hover { text-decoration:underline; }