構築の備忘録
2016/04/16……
2016/04/16……05. フッター周りの変更
2016/04/10……04. ヘッダーロゴのサイズ変更
2016/04/10……03. グローバルメニューの説明を１行化
2016/04/09……02. ヘッダー画像の幅を画面いっぱいに広げる
2016/04/09……01. トップメインバーの変更
2016/04/09 01. トップメインバーの変更
1234
#topMainBnr { width:100%; }#topMainBnr img { width:1300px !important; }#topMainBnrFrame .slider li { }#topMainBnrFrame { width:1300px;min-height:250px; }
2016/04/09 02. ヘッダー画像の幅を画面いっぱいに広げる
|
1 2 3 4 |
#topMainBnr { width:100%; } #topMainBnr img { width:1300px !important; } #topMainBnrFrame .slider li { } #topMainBnrFrame { width:1300px;min-height:250px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/* 画像フレームの幅を100%に */ #topMainBnrFrame { width: 100%; height: auto; } /* 画像幅を100%に */ #topMainBnr img { width:100% !important; max-width: 100% !important; height: auto !important; } /* 画像の枠線を削除 */ #topMainBnrFrame .slideFrame { border:none; } /* 画像の位置調整 */ #topMainBnrFrame .slideFrame img { left: 0px; } /* 画像の余白を削除からトップ3pxに変更 */ #topMainBnr { padding-top:3px; /*padding:1px 0px → padding-top:3px*/ } /***** ヘッダー画像のサイズ定義を変更した場合 *****/ @media (min-width: 970px) { /* BizVektorのレスポンシブ設定による */ /* 画像フレームの最小の高さを設定 */ #topMainBnrFrame { min-height: 200px; /*200px*/ } /* 画像フレームの背景色・影を消す */ #topMainBnr, #topMainBnrFrame { background-color:transparent; box-shadow:none; border:none; } |
2016/04/10 03. グローバルメニューの説明を１行化
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/*-------------------------- Gメニューの説明を１行に収めるようにpaddingの左右を0pxに変更*/ #gMenu .menu li a { color: #333; display: block; overflow: hidden; padding: 11px 0px 9px; margin: 0px; line-height: 110%; text-decoration: none; letter-spacing: 0px; } /*-------------------------- Gメニューの説明の文字サイズを10pxから7pxに変更*/ #gMenu .menu > li > a span { display: block; font-size: 7px; /*10pxから7pxに変更*/ line-height: 140%; letter-spacing: 1px; font-family: verdana, Arial, Helvetica, sans-serif; color: #999; } |
04. ヘッダーロゴのサイズ変更
|
1 |
#header #site-title a img { max-height:60px;margin-top:3px; } /*sizeを大きくするには60PX以上に*/ |
fuxtuta-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
/* (1)フッター境界線（上）の色 */ #footMenu { border-top-color:white; } /* (2)フッターの背景色 */ #footer {background-color:#696969;border-top:1px solid white;} /* (3)会社名 */ #footer dl#footerOutline dt { color:white; } /* (4)住所 */ #footer dl#footerOutline dd { color:white; } /* (5)フッターサイトマップメニュー */ #footerSiteMap .menu a { color:white; } /* (6)フッター罫線 */ #footer { border-top:1px solid white; } /* (7)メニューアイコン */ #footerSiteMap .menu li a {background:url(images/icon_arrow1_green.gif) 0px 3px no-repeat;} /* (8)サブメニューアイコン */ #footerSiteMap .menu li li a { background:url(images/icon_arrow2_orange.gif) 2px 4px no-repeat; } /* (9)CopyrightとPowered byの背景色と罫線 */ #siteBottom {border-top:1px solid #8b4513;background-color:#968d7e;} /* (10)CopyrightとPowered byの色 */ #siteBottom #copy, #siteBottom #copy a, #siteBottom #powerd, #siteBottom #powerd a {color:white;} /*------------------------------------------------------------*/ a.sample_spritemenu{ background: url(http://asamai-cts.jp/wp-content/uploads/2015/02/demo6.gif); width:200px; height:60px; display: block; cursor:pointer; padding-yop:10px; text-align:center; color:#fff; } a.sample_spritemenu:hover{ /*margin-top:60px;*/ /*padding-top:60px;*/ margin-bottom:0px; padding-bottom:60px; /*text-align:center;*/ /*color:#fff;*/ background-position:left bottom; } |
