メニューの背景色を変える

2015-05-28_200855色のCSSは「#」で始まる英字で表記されます。
例えば「赤色」は「#ff0000」です。(参考:Web色見本

color: #fff;

colorは「文字」の色

border-left-color: #fff;

border-colorは「線」の色(leftは左)

スマホの場合

/*--------------------------------
アコーディオン
---------------------------------*/
#s-navi dl.acordion p {
	margin: 0;
}
#s-navi dl.acordion {
	margin: 0 10px;
}
#s-navi dt.trigger {
	text-align: right;
	padding: 10px 0px;
	cursor: pointer;
}
#s-navi dt.trigger .op {
	font-size: 14px;
	color: #fff;
	padding: 0px 10px;
}
#s-navi dd.acordion_tree {
	padding: 0px 10px;
        display:none;
	overflow: hidden;
}
.acordion_tree li {
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #fff;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 10px;
}
.acordion_tree li li {
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	border: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-bottom: 10px;
}
.acordion_tree li a {
	float: left;
	color: #fff;
	text-decoration: none;
}

パソコンの場所

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 781px) {
	nav {
		background: #f3f3f3;
		color: #fff;
		padding-top: 5px;
		padding-right: 15px;
		padding-bottom: 5px;
		padding-left: 15px;
		border-radius: 5px;
		background: linear-gradient(#fff, #f3f3f3);
		border: solid 1px #ccc;
		margin-bottom: 10px;
	}

	nav li:first-child {
		border: none;
	}

	nav li {
		position: relative;
		float: left;
		font-size: 13px;
		padding-left: 10px;
		display: inline;
		padding-right: 10px;
		border-left-width: 1px;
		border-left-style: dotted;
		border-left-color: #CCC;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	nav li li {
		padding-top: 0px;
		padding-bottom: 0px;
	}

	nav li li {
		padding-top: 0px;
		padding-bottom: 0px;
	}
background: #f3f3f3;

backgroundは背景

background: linear-gradient(#fff, #f3f3f3);

linear-gradientはグラデーション。
linear-gradient(上の方の色,下の色)

※両方書いてあるのは便宜上で、下に記述されているグラデーションの方が適応されます。グラデーションが嫌な場合は削除して下さい。

広告が溶け込む魔法の子テーマ「JET」

大人気!

詳しく見る

情報配信中

記事の内容は動作や機能を100%保障するものではございません。悪しからずご了承下さいませ。※カスタマイズは必ずバックアップの上、自己責任にて行って下さい。

投稿日:

Copyright© AFFINGER(WING) , 2018 All Rights Reserved Powered by AFFINGER5.