Webデザインを少しでも魅力的に　見出しを整える

私がWebデザインをする時に重宝しているサイトです。

まずは基本になる色を決めます。配色はとても重要で、与える印象ががらりと変わります。

配色でお世話になっているサイト
http://www.hp-stylelink.com/news/2013/07/20130708.php
シーン別になっていて、相手にどのような印象を与えたいかから選べるからすごく便利です。

ここで決めた色によって配色していき、やっぱり見出しが大事だと思います。見出しの作成は

スタイルシート見出しメーカー
http://midashi-maker.v-colors.com/

CSSを自動で作ってくれるので、コピペするだけです。色も自由に決められるのでイメージ通りの見出しが作れます。

WordPress ⇒　外観　⇒　Style.cssをファイル編集し、できたCSSを最終行にコピーして更新するだけです。

/* 見出しの作成 */
.menuRibbon {
	margin:0 0 10px 0;
	padding:2px 8px;
	background:#15aecb;
	color:#EBF7FA;
	line-height:140%;
	font-weight:bold;
}

.menuRibbonLight {
	margin:0 0 10px 0;
	padding:2px 8px;
	background:#fbd92d;
	color:#4f4d45;
	line-height:140%;
	font-weight:bold;
}

.menuTab {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 0 5px;
	border-color: #fbd92d;
	border-style:solid;
	background:#15aecb;
	color:#EBF7FA;
	line-height:140%;
	font-weight:bold;
}

.menuTabLight {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 0 5px;
	border-color:#15aecb;
	border-style:solid;
	background:#fbd92d;
	color:#4f4d45;
	line-height:140%;
	font-weight:bold;
}

.menuTabDouble {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 5px;
	border-color: #fbd92d;
	border-style:solid;
	background:#15aecb;
	color:#EBF7FA;
	line-height:140%;
	font-weight:bold;
	text-align:center;
}

.menuTabDoubleLight {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 5px;
	border-color:#15aecb;
	border-style:solid;
	background:#fbd92d;
	color:#4f4d45;
	line-height:140%;
	font-weight:bold;
	text-align:center;
}

.menuLine {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 5px 0;
	border-color: #fbd92d;
	border-style:solid;
	background:#15aecb;
	color:#EBF7FA;
	line-height:140%;
	font-weight:bold;
}

.menuLineLight {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 5px 0 ;
	border-color:#15aecb;
	border-style:solid;
	background:#fbd92d;
	color:#4f4d45;
	line-height:140%;
	font-weight:bold;
}

.menuLineDouble {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:5px 0;
	border-color: #fbd92d;
	border-style:solid;
	background:#15aecb;
	color:#EBF7FA;
	line-height:140%;
	font-weight:bold;
	text-align:center;
}

.menuLineDoubleLightW {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:5px 0;
	border-color:#15aecb;
	border-style:solid;
	background:#fff;
	color:#4f4d45;
	line-height:140%;
	font-weight:bold;
	text-align:center;
}

.menuLineDoubleLight {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:5px 0;
	border-color:#15aecb;
	border-style:solid;
	background:#fbd92d;
	color:#4f4d45;
	line-height:140%;
	font-weight:bold;
	text-align:center;
}

.menuLineLightW {
	margin:0 0 10px 0;
	padding:2px 8px;
	border-width:0 0 5px 0 ;
	border-color:#15aecb;
	border-style:solid;
	background:#fff;
	color:#4f4d45;
	line-height:140%;
	font-weight:bold;
}