この記事は1年以上前に更新された内容のため、情報の一部が古い場合があります。最新の情報は公式マニュアルをご確認下さい。

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

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(上の方の色,下の色)

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

「稼ぐ」に特化したWordPressテーマ

今すぐ手に入れる

見れば効果8倍! /

アクセス「1」を「100」に変える 戦略的トップページテンプレート

ブログに訪れたユーザーを「ファン」にするための仕掛けを作る戦略的トップページレイアウトを解説。

無料ダウンロード

【無料】大人気!メルマガ配信中「稼ぐブログの設計図」

ブログで効率的に収益化するための考え方やノウハウをまとめました。

  • 【第1回】収益化に必要なのは「方法」ではなく「方向」
  • 【第2回】記事作成 ~ 人が「買う」と決める瞬間
  • 【第3回】検索でクリックされるタイトルの決め方
  • 【第4回】知っておくべき目次と見出しタグの意味
  • 【第5回】他言厳禁:売上が変わる7つの秘訣
  • 【第6回】必ず知っておきたい「重要&最低限」のSEO
  • 【第7回】稼ぐサイトの構成

配信登録フォーム

退会はいつでも可能です