おちゃのこ通信 Vol.212 - デザイン道場 - おちゃのこネットメールマガジン

このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、フッターの背景色を変更する方法をご紹介します。

	http://cafe0101.ocnk.net/

スタイルシートを編集する

[デザイン管理]→[スタイルシートの編集]から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
貼り付け後、カラーコードを変更してください。

#footer {
background-color: #E0DFE3;
}

/* 各ブロックレイアウト */
#globalnavi_footer .footer_navi_box {
border-left: 1px solid #666666;
}

#globalnavi_footer .footer_navi_box_right {
border-right: 1px solid #666666;
}

/* 各ナビゲーション文字色 */
#globalnavi_footer li .footer_navi_link {
color: #000000;
}

/* 各ナビゲーションマウスオーバー */
#globalnavi_footer li .footer_navi_row:hover {
background-color: #FFFFFF;
}

/* 選択中 */
#globalnavi_footer li.nav_on .footer_navi_row {
background-color: #FFFFFF;
}

#footer

フッターの背景用指定です。
background-colorが指定されていますので、そのカラーコード(上記の#E0DFE3部分)を変更してください。
背景色だけでなく、背景画像を指定することも可能です。

#globalnavi_footer .footer_navi_box
#globalnavi_footer .footer_navi_box_right

フッターナビのカラム間の罫線指定となります。
フッターの背景色に合わせて変更してください。

#globalnavi_footer .footer_navi_box_right
は、右端ボックス用の指定となります。

#globalnavi_footer li .footer_navi_link
#globalnavi_footer li .footer_navi_row:hover
#globalnavi_footer li.nav_on .footer_navi_row

フッターナビの文字色と背景色指定となります。
フッターの背景色に合わせて変更してください。

#globalnavi_footer li .footer_navi_row:hover

がマウスオーバー時の指定。
サンプルテンプレートでは、背景色が指定されています。

#globalnavi_footer li.nav_on .footer_navi_row
が選択中の指定。
サンプルテンプレートでは、背景色が指定されています。

背景画像を利用する場合
background-image: url(image/file.gif);
上記のようにbackground-imageの1行を追加してください。
画像ファイルは、画像専用管理画面→コンテンツフォルダにアップロードしてください。

なお、お問い合わせは下記ページからお願い致します。

https://www.ocnk.net/contact/index.php