アメブロコピペで使える見出しデザインセット｜ HISCO ITの知らない、わからない、間違ってるを解消する

アメブロ WordPressに乗り換えたい人用の用語解説メディアとコメント編を追加しました
アメブロ WordPressに乗り換えたい人用の用語解説投稿と固定ページ編を追加しました
アメブロ WordPressに乗り換えたい人用の用語解説概要とダッシュボード編を追加しました
知っておきたいアメブロのカスタマイズ方法 CSS編集を追加しました

この記事を読むのに必要な時間は約 10 分です。

[アイキャッチモデル: 茜さやさん]

このブログは基本的に、メンタルセラピストやスピリチュアル系を仕事にしている方もしくはしたい方や個人事業主などの方で、ITが苦手な方を対象にしています。

この記事で伝えたいこと

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

[アイキャッチモデル: 茜さやさん]

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

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

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

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

カスタマイズの時に変更しているのは、大見出し(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>

</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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}ぐ

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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;
}

.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

<p>文章を書く</p>

<p>いつもブログをお読みいただいて・・・</p>

<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">←1行目に追加

<p>文章を書く</p>

<p>いつもブログをお読みいただいて・・・</p>

<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>←最後に追加

</style>← xx/xx/xxxxxxxxxx.　は調べて書き換えてください

<div class="ybp-template">←1行目に追加

<p>文章を書く</p>

<p>いつもブログをお読みいただいて・・・</p>

<h3>中見出しも書くときもある</h3>

<p>アメブロの記事をHTMLで見たらこんな風に見える</p>

<p>問い合わせはこちらのボタンからお願いします</p>

<p><a href="https://xxxx.com" class="button"> 問い合わせ</a></p>

</div>←最後に追加

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

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

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

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

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

CSSの設定の仕方

デザイン1

赤

朱色

青1

青2

ライトブルー

ライトブルー2

浅葱

緑

デザイン2

赤

朱色

青1

青2

ライトブルー

ライトブルー2

浅葱

緑

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

赤

朱色

青

青2

ライトブルー

ライトブルー2

浅葱

緑

CSSの設定について

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

アメブロ関連記事

設定編

技術編

デザインCSS集

集客編

WordPress関連記事

設定・インストール

トラブルシューティング

動作環境・リリース情報

コメントを残す コメントをキャンセル

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

コメントを残すコメントをキャンセル