穴埋め式LPテンプレートで文字フォントを明朝体に変える方法

僕がLPを作成する時に最近愛用しているのが「穴埋め式LPテンプレート」なのですが、デフォルトで装備されているフォントではなくて明朝体などに変えたい！という人向けに設定方法を解説しました。

僕が修正しているCSS

全文ではないのですが、キャッチコピーや見出しなどを明朝体にするために下記のようにCSSに追加しています。

body,.lp_catch_sub,.lp_action_up,.lp_catch_main,.lp_intro_title01,.lp_intro_title02,.lp_benefit_title01,.lp_benefit_merit01,.lp_free h3,.lp_item_title01,.lp_free h3,.lp_item_title02 {
	font-family: serif !important;
}

このように記述すれば（書き方汚くてすみません）色んなとこが明朝体になります。一部ゴシック体の部分もありますが、その場合は適宜追加して頂ければと思います。

CyfonsのCSS

Cyfons登録フォーム用のCSSはこちら。また僕はアクション導入部分に埋め込み式でCyfons登録フォームを使用しているのですが、それも調整したCSSがこちら。

CSSに下記を追記すればよいです。

body,.lp_catch_sub,.lp_action_up,.lp_catch_main,.lp_intro_title01,.lp_intro_title02,.lp_benefit_title01,.lp_benefit_merit01,.lp_free h3,.lp_item_title01,.lp_free h3,.lp_item_title02 {
	font-family: serif !important;
}

/*================
CyfonsCSSのデフォルト
==================*/
.cyfons {
	background: #282b34;
}

.cyfons form {
	padding: 36px 0 10px;
	text-align: -webkit-center;
}

.cyfons input {
	width: 95%;
	font-size: 3.25em;
	font-weight: bold;
	padding: 12px 16px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;
	border: none;
	margin-bottom: 10px;
}

.cyfons input[type="submit"] {
	width: 100%;
	height: 95px;
	padding: 0 18px;
	color: #fff;
	cursor: pointer;
	border-style: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #f12b24;
	background-image: -moz-linear-gradient(top,#0088cc,#0044cc);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0044cc));
	background-image: -webkit-linear-gradient(top,#0088cc,#0044cc);
	background-image: -o-linear-gradient(top,#0088cc,#0044cc);
	background-image: linear-gradient(to bottom,#f12b24,#ff0000);
	background-repeat: repeat-x;
	border-color: #0044cc #0044cc #002a80;
	border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
}

@media screen and ( min-width:1025px) {
	.section02 {
		padding: 30px 0 0;
	}

	.cyfons input {
		font-size: 4em !important;
	}

	.content02 {
		width: 1150px;
	}
}

/*================
iPad用CSS
==================*/
@media screen and (min-width:768px) and ( max-width:1024px) {
	/*　for iPad 　*/
	.content09 {
		width: 100%;
	}

	p {
		padding: 0 5px;
	}

	.cyfons_action input {
		font-size: 3.5em !important;
	}

	.cyfons_action input[type="submit"] {
		height: 90px !important;
	}
}

/*=============================
iPhone横用CSS
============================*/
@media screen and (min-width:480px) and ( max-width:767px) {
	/*　for iPhone Landscape　(iPhone 横)　*/
	p {
		padding: 0 5px;
	}

	.cyfons input {
		font-size: 2em;
	}

	.cyfons input[type="submit"] {
		font-size: 2em;
	}
}

@media screen and (max-width:375px) {
	/*　for iPhone Landscape　(iPhone 横)　*/
	.section02 {
		padding: 10px 0 0;
	}

	.cyfons {
		background: #282b34;
	}

	.cyfons input {
		width: 95%;
		font-size: 2em;
		font-weight: bold;
		padding: 16px 18px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		-ms-border-radius: 8px;
		-o-border-radius: 8px;
		border-radius: 8px;
		border: none;
		margin-bottom: 10px;
	}

	.cyfons input[type="submit"] {
		font-size: 1.5em;
	}

	.cyfons_action input[type="submit"] {
		font-size: 1.5em;
	}
}

@media screen and (max-width:320px) {
	/* iPhone5 */
	table {
		font-size: 75%;
	}

	input#login {
		font-size: 22px;
	}
}

tr {
	text-align: -webkit-center;
}

/* ============
アクション導線のフォームCSS
===========*/
.cyfons_action form {
	padding: 36px 0 10px;
	text-align: -webkit-center;
}

.cyfons_action input {
	width: 100%;
	font-size: 2em;
	font-weight: 700;
	padding: 7px 20px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	-o-border-radius: 8px;
	border-radius: 8px;
	border: none;
	margin-bottom: 10px;
}

.cyfons_action input[type="submit"] {
	width: 100%;
	height: 70px;
	padding: 0 18px;
	color: #fff;
	cursor: pointer;
	border-style: none;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #f12b24;
	background-image: -moz-linear-gradient(top,#0088cc,#0044cc);
	background-image: -webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0044cc));
	background-image: -webkit-linear-gradient(top,#0088cc,#0044cc);
	background-image: -o-linear-gradient(top,#0088cc,#0044cc);
	background-image: linear-gradient(to bottom,#f12b24,#ff0000);
	background-repeat: repeat-x;
	border-color: #0044cc #0044cc #002a80;
	border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc',endColorstr='#ff0044cc',GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

@media screen and (min-width: 992px) {
	p.merit_mark {
		font-size: 26px;
	}
}