アメブロコピペで使える見出しデザインセット 24選

[cc id=317][cc id=1480]

この記事で伝えたいこと

見出し、ボタンなどの色は同系色で統一するときれいに見える
見出しの見え方で読まる量が変わる

[cc id=317]

アメブロデザインテンプレートの相談が面倒になってきた

相談として、多いアメブロのカスタマイズ。

毎回、アメブロを勧めない僕ですが、最終的に有料で、カスタマイズを受けることになります。

正直なところ面倒臭くなってきたので、僕が使っているパターンを紹介しようと思います。

カスタマイズの時に変更しているのは、大見出し(h2タグ) ,中見出し(h3タグ) 小見出し(h4)　ボタン用CSS 強調用(strong タグ )のクラス 2パターンです。

CSSの設定の仕方

今回のCSSを使う場合は次のルールを守ってください。

CSSが利用可能のテンプレートを使う
記事を必ずdiv タグで囲む
囲んだdivタグに必ず class=”ybp-templet”を付ける

このルールは、後程の使い方の説明で詳しく説明します。

デザイン1

まずはシンプルなデザインパターンです。

色別に紹介します

また、HTMLの書き方は以下のようになります

HTML

<div class="ybp-template">
<h2>大見出し(h2タグ)</h2>
<h3>中見出し(h3タグ)</h3>
<h4>小見出し(h4タグ)</h4>
<p><a class="botann"  href="#">ボタン</a></p>
<p>文字の<strong class="b1">強調1</strong>する</p>
<p>文字を<strong class="b2">強調２</strong>する</p>
</div>

赤

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
background-color: #e61717; 
padding: 10px; 
font-weight: bold; 
font-size: 140%; 
color: #fcfcfc;
}
.ybp-template h3
{
background-color: #ff8181;
 padding: 10px; 
font-weight: bold;
 font-size: 120%; 
color: #fcfcfc;
}
.ybp-template h4
{
background-color: #ffb6b6;
 padding: 10px;
 font-weight:
 bold; font-size: 110%; 
color: #fcfcfc;
}
.botann
{
border-radius: 30px; 
padding: 3%; 
text-decoration: none; 
color: #fefefe; 
font-size: 105%; 
background-color: #e61717; 
font-weight: bold; 
text-align: center; 

width: 50%; 
margin: auto;
}
.b1
{
color: #cc1414;
}
.b2
{
color: #00991a;
}

朱色

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
background-color: #E2373C; 
padding: 10px; 
font-weight: bold; 
font-size: 140%; 
color: #fcfcfc;
}
.ybp-template h3
{
background-color: #F98285;
 padding: 10px; 
font-weight: bold;
 font-size: 120%; 
color: #fcfcfc;
}
.ybp-template h4
{
background-color: #FBBFC1;
 padding: 10px;
 font-weight:
 bold; font-size: 110%; 
color: #fcfcfc;
}
.botann
{
border-radius: 30px; 
padding: 3%; 
text-decoration: none; 
color: #fefefe; 
font-size: 105%; 
background-color: #E2373C; 
font-weight: bold; 
text-align: center; 

width: 50%; 
margin: auto;
}
.b1
{
color: #C91E1E;
}
.b2
{
color: #0F9626;
}

青1

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
background-color: #1717E6; 
padding: 10px; 
font-weight: bold; 
font-size: 140%; 
color: #fcfcfc;
}
.ybp-template h3
{
background-color: #8181FF;
 padding: 10px; 
font-weight: bold;
 font-size: 120%; 
color: #fcfcfc;
}
.ybp-template h4
{
background-color: #B6B6FF;
 padding: 10px;
 font-weight:
 bold; font-size: 110%; 
color: #fcfcfc;
}
.botann
{
border-radius: 30px; 
padding: 3%; 
text-decoration: none; 
color: #fefefe; 
font-size: 105%; 
background-color: #1717E6; 
font-weight: bold; 
text-align: center; 

width: 50%; 
margin: auto;
}
.b1
{
color: #CC1414;
}
.b2
{
color:#00991A;
}

青2

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
background-color: #168BD9; 
padding: 10px; 
font-weight: bold; 
font-size: 140%; 
color: #fcfcfc;
}
.ybp-template h3
{
background-color: #75BAE7;
 padding: 10px; 
font-weight: bold;
 font-size: 120%; 
color: #fcfcfc;
}
.ybp-template h4
{
background-color: #ACD5F0;
 padding: 10px;
 font-weight:
 bold; font-size: 110%; 
color: #fcfcfc;
}
.botann
{
border-radius: 30px; 
padding: 3%; 
text-decoration: none; 
color: #fefefe; 
font-size: 105%; 
background-color: #168BD9; 
font-weight: bold; 
text-align: center; 

width: 50%; 
margin: auto;
}
.b1
{
color: #C11313;
}
.b2
{
color:#008E18;
}

ライトブルー

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
background-color: #33ccff; 
padding: 10px; 
font-weight: bold; 
font-size: 140%; 
color: #fcfcfc;
}
.ybp-template h3
{
background-color: #2EB8E6;
 padding: 10px; 
font-weight: bold;
 font-size: 120%; 
color: #fcfcfc;
}
.ybp-template h4
{
background-color: #84E0FF;
 padding: 10px;
 font-weight:
 bold; font-size: 110%; 
color: #fcfcfc;
}
.botann
{
border-radius: 30px; 
padding: 3%; 
text-decoration: none; 
color: #fefefe; 
font-size: 105%; 
background-color: #33ccff; 
font-weight: bold; 
text-align: center; 

width: 50%; 
margin: auto;
}
.b1
{
color: #C51717;
}
.b2
{
color:#05921D;
}

ライトブルー2

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
	background-color: #a8ffff; 
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
text-shadow: 1px 1px 1px #808080;
}
.ybp-template h3
{
	background-color: #63E6E6;
 	padding: 10px; 
	font-weight: bold;
 	font-size: 120%; 
	color: #fcfcfc;
}
.ybp-template h4
{
	background-color: #8AFFFF;
 	padding: 10px;
 	font-weight:
 	bold; font-size: 110%; 
	color: #fcfcfc;
text-shadow: 1px 1px 1px #808080;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background-color: #a8ffff; 
	font-weight: bold; 
	text-align: center; 

	width: 50%; 
	margin: auto;
text-shadow: 1px 1px 1px #808080;
}
.b1
{
	color: #CC1C1C;
}
.b2
{
	color:#0B9923;
}

浅葱

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
	background-color: #33A6B8; 
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	background-color: #33C1D7;
 	padding: 10px; 
	font-weight: bold;
 	font-size: 120%; 
	color: #fcfcfc;
}
.ybp-template h4
{
	background-color: #76D4E3;
 	padding: 10px;
 	font-weight:
 	bold; font-size: 110%; 
	color: #fcfcfc;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background-color: #33A6B8; 
	font-weight: bold; 
	text-align: center; 

	width: 50%; 
	margin: auto;
}
.b1
{
	color: #BF1D1D;
}
.b2
{
	color:#0E8C23;
}

緑

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
	background-color: #008000; 
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	background-color: #11A611;
 	padding: 10px; 
	font-weight: bold;
 	font-size: 120%; 
	color: #fcfcfc;
}
.ybp-template h4
{
	background-color: #408040;
 	padding: 10px;
 	font-weight:
 	bold; font-size: 110%; 
	color: #fcfcfc;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background-color: #008000; 
	font-weight: bold; 
	text-align: center; 

	width: 50%; 
	margin: auto;
}
.b1
{
	color: #B51212;
}
.b2
{
	color:#008216;
}

デザイン2

もう一つシンプルなデザインパターンです。

色別に紹介します

見出しのデザインが違うだけで、ボタンと強調用の色はデザイン1と同じです。

赤

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
	background-color: #e61717; 
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 120%; 
	color: #e61717; 
	border-bottom: 1px solid #e61717; 
	border-top: 1px solid #e61717;
}
.ybp-template h4
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 110%; 
	color: #ff8181; 
	border-bottom: 1px dashed #FF8181;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background-color: #e61717; 
	font-weight: bold; 
	text-align: center; 
	width: 50%; 
	margin: auto;
}
.b1
{
	color: #cc1414;
}
.b2
{
	color:#00991a;
}

朱色

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
	background-color: #E03237; 
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 120%; 
	color: #F37E81; 
	border-bottom: 1px solid #F37E81; 
	border-top: 1px solid #F37E81;
}
.ybp-template h4
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 110%; 
	color: #ff8181; 
	border-bottom: 1px dashed #FF8181;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background-color: #E03237; 
	font-weight: bold; 
	text-align: center; 
	width: 50%; 
	margin: auto;
}
.b1
{
	color: #C91E1E;
}
.b2
{
	color:#0F9626;
}

青1

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
	background-color: #1717E6; 
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 120%; 
	color: #8181FF; 
	border-bottom: 1px solid #8181FF; 
	border-top: 1px solid #8181FF;
}
.ybp-template h4
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 110%; 
	color: #ff8181; 
	border-bottom: 1px dashed #FF8181;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background-color: #1717E6; 
	font-weight: bold; 
	text-align: center; 
	width: 50%; 
	margin: auto;
}
.b1
{
	color: #CC1414;
}
.b2
{
	color:#00991A;
}

青2

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
	background-color: #0075c2; 
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 120%; 
	color: #168BD9; 
	border-bottom: 1px solid #168BD9; 
	border-top: 1px solid #168BD9;
}
.ybp-template h4
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 110%; 
	color: #75BAE7; 
	border-bottom: 1px dashed #75BAE7;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background-color: #0075c2; 
	font-weight: bold; 
	text-align: center; 
	width: 50%; 
	margin: auto;
}
.b1
{
	color: #C11313;
}
.b2
{
	color:#008E18;
}

ライトブルー

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
	background-color: #33ccff; 
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 120%; 
	color: #2EB8E6; 
	border-bottom: 1px solid #2EB8E6; 
	border-top: 1px solid #2EB8E6;
}
.ybp-template h4
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 110%; 
	color: #84E0FF; 
	border-bottom: 1px dashed #84E0FF;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background-color: #33ccff; 
	font-weight: bold; 
	text-align: center; 
	width: 50%; 
	margin: auto;
}
.b1
{
	color:  #C51717;
}
.b2
{
	color:#05921D;
}

ライトブルー2

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
	background-color: #a8ffff; 
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
text-shadow: 1px 1px 1px #808080;
}
.ybp-template h3
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 120%; 
	color: #63E6E6; 
	border-bottom: 1px solid #63E6E6; 
	border-top: 1px solid #63E6E6;
}
.ybp-template h4
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 110%; 
	color: #8AFFFF; 
	border-bottom: 1px dashed #8AFFFF;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background-color: #a8ffff; 
	font-weight: bold; 
	text-align: center; 
	width: 50%; 
	margin: auto;
text-shadow: 1px 1px 1px #808080;
}
.b1
{
	color:  #CC1C1C;
}
.b2
{
	color:#0B992;
}

浅葱

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
	background-color: #33A6B8; 
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 120%; 
	color: #33C1D7; 
	border-bottom: 1px solid #33C1D7; 
	border-top: 1px solid #33C1D7;
}
.ybp-template h4
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 110%; 
	color: #76D4E3; 
	border-bottom: 1px dashed #76D4E3;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background-color: #33A6B8; 
	font-weight: bold; 
	text-align: center; 
	width: 50%; 
	margin: auto;
}
.b1
{
	color:   #BF1D1D;
}
.b2
{
	color:#0E8C23;
}

緑

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

強調1

強調２

CSS

.ybp-template h2
{
	background-color: #008000; 
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 120%; 
	color: #11A611; 
	border-bottom: 1px solid #11A611; 
	border-top: 1px solid #11A611;
}
.ybp-template h4
{
	padding: 10px; 
	font-weight: bold; 
	font-size: 110%; 
	color: #408040; 
	border-bottom: 1px dashed #408040;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background-color: #008000; 
	font-weight: bold; 
	text-align: center; 
	width: 50%; 
	margin: auto;
}
.b1
{
	color:   #B51212;
}
.b2
{
	color:#008216;
}ぐ

グラデーションを使った見出し

見出しの背景色にグラデーションを使ったデザインです。

強調のCSSはシンプルデザイン1と同じなので省略しています。

色ごとに紹介していきます。

赤

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

CSS

.ybp-template h2
{
	background: linear-gradient(to right, #e61717, #ffb6b6);
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	background: linear-gradient(to right, #FF8181, #FFE7E7);
 	padding: 10px; 
	font-weight: bold;
 	font-size: 120%; 
	color: #fcfcfc;
}
.ybp-template h4
{
	background: linear-gradient(to right, #FFB6B6, #FFF7F7);
 	padding: 10px;
 	font-weight:
 	bold; font-size: 110%; 
	color: #fcfcfc;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background: linear-gradient(to right, #e61717, #FF8181);
	font-weight: bold; 
	text-align: center; 

	width: 50%; 
	margin: auto;
}

朱色

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

CSS

.ybp-template h2
{
	background: linear-gradient(to right, #D34549, #FBBFC1);
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	background: linear-gradient(to right, #E2373C, #FFE7E7);
 	padding: 10px; 
	font-weight: bold;
 	font-size: 120%; 
	color: #fcfcfc;
}
.ybp-template h4
{
	background: linear-gradient(to right, #F98285, #FFF7F7);
 	padding: 10px;
 	font-weight:
 	bold; font-size: 110%; 
	color: #fcfcfc;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background: linear-gradient(to right, #D34549, #FF8181);
	font-weight: bold; 
	text-align: center; 

	width: 50%; 
	margin: auto;
}

青

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

CSS

.ybp-template h2
{
	background: linear-gradient(to right, #0000ff, #B6B6FF);
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	background: linear-gradient(to right, #1717E6, #E7E7FF);
 	padding: 10px; 
	font-weight: bold;
 	font-size: 120%; 
	color: #fcfcfc;
}
.ybp-template h4
{
	background: linear-gradient(to right, #8181FF, #F7F7FF);
 	padding: 10px;
 	font-weight:
 	bold; font-size: 110%; 
	color: #fcfcfc;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background: linear-gradient(to right, #0000ff, #B6B6FF);
	font-weight: bold; 
	text-align: center; 

	width: 50%; 
	margin: auto;
}

青2

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

CSS

.ybp-template h2
{
	background: linear-gradient(to right, #0075c2, #ACD5F0);
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	background: linear-gradient(to right, #168BD9, #E2F1FA);
 	padding: 10px; 
	font-weight: bold;
 	font-size: 120%; 
	color: #fcfcfc;
}
.ybp-template h4
{
	background: linear-gradient(to right, #75BAE7, #F2F8FA);
 	padding: 10px;
 	font-weight:
 	bold; font-size: 110%; 
	color: #fcfcfc;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background: linear-gradient(to right, #0075c2, #ACD5F0);
	font-weight: bold; 
	text-align: center; 

	width: 50%; 
	margin: auto;
}

ライトブルー

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

CSS

.ybp-template h2
{
	background: linear-gradient(to right, #33ccff, #BFEFFF);
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	background: linear-gradient(to right, #2EB8E6, #EAFAFF);
 	padding: 10px; 
	font-weight: bold;
 	font-size: 120%; 
	color: #fcfcfc;
}
.ybp-template h4
{
	background: linear-gradient(to right, #84E0FF, #FAFCFF);
 	padding: 10px;
 	font-weight:
 	bold; font-size: 110%; 
	color: #fcfcfc;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background: linear-gradient(to right, #33ccff, #BFEFFF);
	font-weight: bold; 
	text-align: center; 

	width: 50%; 
	margin: auto;
}

ライトブルー2

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

CSS

.ybp-template h2
{
	background: linear-gradient(to right, #a8ffff, #D2FFFF);
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc; 
	text-shadow: 1px 1px 1px #808080;
}
.ybp-template h3
{
	background: linear-gradient(to right, #63E6E6, #EAFAFF);
 	padding: 10px; 
	font-weight: bold;
 	font-size: 120%; 
	color: #fff0f0;
	text-shadow: 1px 1px 1px #808080;
}
.ybp-template h4
{
	background: linear-gradient(to right, #8AFFFF, #FFFFFF);
 	padding: 10px;
 	font-weight:
 	bold; font-size: 110%; 
	color: #fff0f0;
	text-shadow: 1px 1px 1px #808080;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	text-shadow: 1px 1px 1px #808080;
	font-size: 105%; 
	background: linear-gradient(to right, #a8ffff, #D2FFFF);
	font-weight: bold; 
	text-align: center; 

	width: 50%; 
	margin: auto;
}

浅葱

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

CSS

.ybp-template h2
{
	background: linear-gradient(to right, #33A6B8, #B5E6EE);
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	background: linear-gradient(to right, #33C1D7, #E5F6F9);
 	padding: 10px; 
	font-weight: bold;
 	font-size: 120%; 
	color: #fcfcfc;
}
.ybp-template h4
{
	background: linear-gradient(to right, #76D4E3, #F5FAFF);
 	padding: 10px;
 	font-weight:
 	bold; font-size: 110%; 
	color: #fcfcfc;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background: linear-gradient(to right, #33A6B8, #B5E6EE);
	font-weight: bold; 
	text-align: center; 

	width: 50%; 
	margin: auto;
}

緑

大見出し(h2タグ)

中見出し(h3タグ)

小見出し(h4タグ)

ボタン

CSS

.ybp-template h2
{
	background: linear-gradient(to right, #008000, #7DB37D);
	padding: 10px; 
	font-weight: bold; 
	font-size: 140%; 
	color: #fcfcfc;
}
.ybp-template h3
{
	background: linear-gradient(to right, #11A611, #CFE6CF);
 	padding: 10px; 
	font-weight: bold;
 	font-size: 120%; 
	color: #fcfcfc;
}
.ybp-template h4
{
	background: linear-gradient(to right, #408040, #DFF6DF);
 	padding: 10px;
 	font-weight:
 	bold; font-size: 110%; 
	color: #fcfcfc;
}
.botann
{
	border-radius: 30px; 
	padding: 3%; 
	text-decoration: none; 
	color: #fefefe; 
	font-size: 105%; 
	background: linear-gradient(to right, #008000, #7DB37D);
	font-weight: bold; 
	text-align: center; 

	width: 50%; 
	margin: auto;
}

その他にボタンのデザインはありませんが「アメブロ見出し枠CSS 21選」で紹介している見出しも、見出しセットとして使えます。

CSSの設定について

前述したようにこのアメブロでこのデザインを使うには、ルールが必要になります。

まず、「知っておきたいアメブロのカスタマイズ方法 CSS編集」で紹介しているようにアメブロでCSSを編集できるようにします。

使用したいデザインのCSSを貼り付けたら、次は

記事を作成したあと<div>タグで記事を囲みます。

例として↓のような記事を

<h2>大見出し1</h2>
<p>文章を書く</p>
<p>いつもブログをお読みいただいて・・・</p>
<h2>大見出し2</h2>
<h3>中見出しも書くときもある</h3>
<p>アメブロの記事をHTMLで見たらこんな風に見える</p>
<p>問い合わせはこちらのボタンからお願いします</p>
<p><a href="https://xxxx.com" class="button"> 問い合わせ</a></p>H

HTML表示に切り替えます

<div class="ybp-template">←1行目に追加
<h2>大見出し1</h2>
<p>文章を書く</p>
<p>いつもブログをお読みいただいて・・・</p>
<h2>大見出し2</h2>
<h3>中見出しも書くときもある</h3>
<p>アメブロの記事をHTMLで見たらこんな風に見える</p>
<p>問い合わせはこちらのボタンからお願いします</p>
<p><a href="https://xxxx.com" class="button"> 問い合わせ</a></p>
</div>←最後に追加

↑のように<div>タグにclass=”ybp-template” を追加します。

これで、デザインの効果が反映されます。

また、「スマホのデザインをCSSでカスタマイズする方法」で紹介した方法も使用するとスマートフォンでも同じデザインが使えます。

<style type="text/css"><!--@import url(https://usrcss.ameblo.jp/skin/templates/xx/xx/xxxxxxxxxx.css);-->
</style>← xx/xx/xxxxxxxxxx.　は調べて書き換えてください
<div class="ybp-template">←1行目に追加
<h2>大見出し1</h2>
<p>文章を書く</p>
<p>いつもブログをお読みいただいて・・・</p>
<h2>大見出し2</h2>
<h3>中見出しも書くときもある</h3>
<p>アメブロの記事をHTMLで見たらこんな風に見える</p>
<p>問い合わせはこちらのボタンからお願いします</p>
<p><a href="https://xxxx.com" class="button"> 問い合わせ</a></p>
</div>←最後に追加

見栄えをよくするだけで読んでもらえやすくなる

趣味でつくのではなく、仕事の一環としてブログを書くからにはある程度の見栄えは必要になります。

CSSでデザインをカスタマイズするのは必然と言えます。

ブログを書く上で、見出しやボタンなどを付けるのはお仕事をするうえで必須となるのでそれぐらいの知識は持っていたほうがいいです。

[cc id=1390][cc id=970]

アメブロデザインテンプレートの相談が面倒になってきた

CSSの設定の仕方

デザイン1

赤

朱色

青1

青2

ライトブルー

ライトブルー2

浅葱

緑

デザイン2

赤

朱色

青1

青2

ライトブルー

ライトブルー2

浅葱

緑

グラデーションを使った見出し

赤

朱色

青

青2

ライトブルー

ライトブルー2

浅葱

緑

CSSの設定について

見栄えをよくするだけで読んでもらえやすくなる

この記事を書いた人

コメント Comments

コメント一覧

コメントする返信を取り消す

関連記事 Relation Entry

ブログが続かない人の解決法｜AIとスマホで続けられる簡単テンプレ＆書き出し術

アメブロは毎日投稿で読まれない？質×頻度を整え「選ばれる記事」に変える5ステップ

アメブロ過去記事のリライト術アクセスと集客を伸ばす3つの工夫

アメブロ コピペで使える見出しデザインセット 24選

アメブロ デザイン テンプレートの相談が面倒になってきた

CSSの設定の仕方

デザイン1

赤

朱色

青1

青2

ライトブルー

ライトブルー2

浅葱

緑

デザイン2

赤

朱色

青1

青2

ライトブルー

ライトブルー2

浅葱

緑

グラデーションを使った見出し

赤

朱色

青

青2

ライトブルー

ライトブルー2

浅葱

緑

CSSの設定について

見栄えをよくするだけで読んでもらえやすくなる

この記事を書いた人

コメント Comments

コメント一覧

コメントする 返信を取り消す

関連記事 Relation Entry

ブログが続かない人の解決法｜AIとスマホで続けられる簡単テンプレ＆書き出し術

アメブロは毎日投稿で読まれない？質×頻度を整え「選ばれる記事」に変える5ステップ

アメブロ過去記事のリライト術 アクセスと集客を伸ばす3つの工夫

アメブロコピペで使える見出しデザインセット 24選

アメブロデザインテンプレートの相談が面倒になってきた

コメントする返信を取り消す

アメブロ過去記事のリライト術アクセスと集客を伸ばす3つの工夫