メンタルコーチ、メンタルセラピスト、カウンセラー専門ITコンサルティング
  1. home
  2. アメブロ
  3. アメブロ 見出し枠CSS 21選

アメブロ 見出し枠CSS 21選

2021年5月2日

2021年4月14日

administrator のアイコン administrator
アメブロ 見出し枠CSS 21選

[cc id=317]

この記事で伝えたいこと
  • ブログを書くときは見出しを入れて段落を分けよう
  • 使える見出し配色21選

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

ブログを見だし分けして要点をまとめよう

あまり読まれていないブログによくあるのが、だらだと文章が続いて段落分けされていないというのがあります。

そして無駄な改行。

どちらにも共通して言えるのが、読みづらいということ。

見出しを入れる時に使えるCSSを今回はお伝えしていきます。

大見出し・中見出し・小見出しのデザインを統一する

ブログ記事の見出しタグの使い方で解説しているようにアメブロの場合は大見出し(h2タグ)中見出し(h3タグ)小見出し(h4タグ)を使い分けたほうがSEO対策にもなり読みやすくもなります。

この時、デザインを統一しておくことは重要です。

デザインに統一性を持たせると見た目だけでなく読みやすさも向上します。

見出し枠を使うにはCSS編集用デザインをお使いください

今回お伝えするデザインはブログ画面に直接貼り付ける方法ではなくCSS編集用デザインを使用してCSSを一か所にまとめる方法を採用しています。

理由は以下の通りです。

CSS編集用デザインを使う理由
  • 毎回見出しの色を変えたりするのはブログとしては統一感がないのであまりいいとは言えない
  • HTMLが長くなって文章が書けなくなるというような問題が出ない可能性が0ではない
  • 毎回コピペするのが面倒

今回の内容が難しいように思えるかもしれませんが、設定は一度だけなので一度設定してしまえばあとは自動で枠線がつくようになります。

各見出しの下にコピペでも使える用のコードも掲載しています。

見出しのデザイン

ここからは見出しのデザインのCSSをご紹介していきます。

赤

大見出し

<h2 style="border-left: 10px solid #ff0000; border-bottom: 2px solid #ff0000; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #e61717; border-bottom: 1px solid #e61717; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #ff8181; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #ff0000; 
    border-bottom: 2px solid #ff0000; 
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #e61717;
    border-bottom: 2px solid #e61717;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #ff8181;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

朱色

大見出し

<h2 style="border-left: 10px solid #ef454a; border-bottom: 2px solid #ef454a; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #e2373c; border-bottom: 1px solid #e2373c; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #ff8181; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #ef454a; 
    border-bottom: 2px solid #ef454a; 
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #e2373c;
    border-bottom: 2px solid #e2373c;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #ff8181;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

ピンク

大見出し

<h2 style="border-left: 10px solid #f98289; border-bottom: 2px solid #f98289; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #e4525b; border-bottom: 1px solid #e4525b; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #f98285; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #f98289; 
    border-bottom: 2px solid #f98289;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #e4525b;
    border-bottom: 2px solid #e4525b;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #f98285;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

青

大見出し

<h2 style="border-left: 10px solid #0000ff; border-bottom: 2px solid #0000ff; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #1717e6; border-bottom: 1px solid #1717e6; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #8181ff; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #0000ff; 
    border-bottom: 2px solid #0000ff;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #1717e6;
    border-bottom: 2px solid #1717e6;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #8181ff;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

青2

大見出し

<h2 style="border-left: 10px solid #0075c2; border-bottom: 2px solid #0075c2; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #168BD9; border-bottom: 1px solid #168BD9; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #75BAE7; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #0075c2;
    border-bottom: 2px solid #0075c2;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #168BD9;
    border-bottom: 2px solid #168BD9;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #75BAE7;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

ライトブルー

大見出し

<h2 style="border-left: 10px solid #33ccff; border-bottom: 2px solid #33ccff; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #2EB8E6; border-bottom: 1px solid #2EB8E6; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #84E0FF; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #33ccff;
    border-bottom: 2px solid #33ccff;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #2EB8E6;
    border-bottom: 2px solid #2EB8E6;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #84E0FF;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

ライトブルー2

大見出し

<h2 style="border-left: 10px solid #33ccff; border-bottom: 2px solid #33ccff; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #2EB8E6; border-bottom: 1px solid #2EB8E6; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #8AFFFF; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #33ccff;
    border-bottom: 2px solid #33ccff;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #63E6E6;
    border-bottom: 2px solid #63E6E6;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #8AFFFF;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

浅葱

大見出し

<h2 style="border-left: 10px solid #33A6B8; border-bottom: 2px solid #33A6B8; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #33C1D7; border-bottom: 1px solid #33C1D7; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #76D4E3; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #33A6B8;
    border-bottom: 2px solid #33A6B8;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #33C1D7;
    border-bottom: 2px solid #33C1D7;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #76D4E3;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

藍

大見出し

<h2 style="border-left: 10px solid #0D5661; border-bottom: 2px solid #0D5661; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #198797; border-bottom: 1px solid #198797; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #325B61; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #0D5661;
    border-bottom: 2px solid #0D5661;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #198797;
    border-bottom: 2px solid #198797;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #325B61;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

緑

大見出し

<h2 style="border-left: 10px solid #008000; border-bottom: 2px solid #008000; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #11A611; border-bottom: 1px solid #11A611; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #408040; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #008000;
    border-bottom: 2px solid #008000;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #11A611;
    border-bottom: 2px solid #11A611;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #408040;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

黄緑

大見出し

<h2 style="border-left: 10px solid #b8d200; border-bottom: 2px solid #b8d200; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #C4DD16; border-bottom: 1px solid #C4DD16; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #DEED78; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #b8d200;
    border-bottom: 2px solid #b8d200;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #C4DD16;
    border-bottom: 2px solid #C4DD16;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #DEED78;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

ペパーミントグリーン

大見出し

<h2 style="border-left: 10px solid #00ac9a; border-bottom: 2px solid #00ac9a; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #15D5C1; border-bottom: 1px solid #15D5C1; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #70DED2; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #00ac9a;
    border-bottom: 2px solid #00ac9a;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #15D5C1;
    border-bottom: 2px solid #15D5C1;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #70DED2;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

紫

大見出し

<h2 style="border-left: 10px solid #a260bf; border-bottom: 2px solid #a260bf; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #AE4CD9; border-bottom: 1px solid #AE4CD9; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #C47AE5; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #a260bf;
    border-bottom: 2px solid #a260bf;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #AE4CD9;
    border-bottom: 2px solid #AE4CD9;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #C47AE5;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

紫(少し暗め)

大見出し

<h2 style="border-left: 10px solid #8642a4; border-bottom: 2px solid #8642a4; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #A640D3; border-bottom: 1px solid #A640D3; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #BB73DB; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #8642a4;
    border-bottom: 2px solid #8642a4;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #A640D3;
    border-bottom: 2px solid #A640D3;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #BB73DB;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

薄紫

大見出し

<h2 style="border-left: 10px solid #e2c6ff; border-bottom: 2px solid #e2c6ff; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #AA70E6; border-bottom: 1px solid #AA70E6; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #C48CFF; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #e2c6ff;
    border-bottom: 2px solid #e2c6ff;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #AA70E6;
    border-bottom: 2px solid #AA70E6;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #C48CFF;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

オレンジ／橙色

大見出し

<h2 style="border-left: 10px solid #ff7f00; border-bottom: 2px solid #ff7f00; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #E67E17; border-bottom: 1px solid #E67E17; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #FFC081; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #e2c6ff;
    border-bottom: 2px solid #e2c6ff;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #E67E17;
    border-bottom: 2px solid #E67E17;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #FFC081;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

薄オレンジ／薄橙色

大見出し

<h2 style="border-left: 10px solid #fedcbd; border-bottom: 2px solid #fedcbd; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #E5A66C; border-bottom: 1px solid #E5A66C; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #FFC28B; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #fedcbd;
    border-bottom: 2px solid #fedcbd;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #E5A66C;
    border-bottom: 2px solid #E5A66C;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #FFC28B;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

黄色

大見出し

<h2 style="border-left: 10px solid #ffdc00; border-bottom: 2px solid #ffdc00; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #E6CA17; border-bottom: 1px solid #E6CA17; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #FFEE81; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #ffdc00;
    border-bottom: 2px solid #ffdc00;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #E6CA17;
    border-bottom: 2px solid #E6CA17;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #FFEE81;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

ちょっとオシャレなくすみカラー1

色名がわからない色合いですが、ちょっと大人かわいい色味です。

大見出し

<h2 style="border-left: 10px solid #D6B7B5; border-bottom: 2px solid #D6B7B5; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #D1736D; border-bottom: 1px solid #D1736D; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #D6827D; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #D6B7B5;
    border-bottom: 2px solid #D6B7B5;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #D1736D;
    border-bottom: 2px solid #D1736D;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #D6827D;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

ちょっとオシャレなくすみカラー2

これも色名がわからない色合いですが、ちょっと大人かわいい色味です。

大見出し

<h2 style="border-left: 10px solid #f5f0ed; border-bottom: 2px solid #f5f0ed; padding-left: 10px; font-weight: bold; font-size: 130%; color: #333333;">大見出し</h2>

中見出し

<h3 style="border-left: 7px solid #E1A683; border-bottom: 1px solid #E1A683; padding-left: 7px; font-weight: bold; font-size: 125%; color: #333333;">中見出し</h3>

小見出し

<h4 style="border-left: 5px solid #F5B792; padding-left: 5px; font-weight: bold; font-size: 110%; color: #333333;">小見出し</h4>

CSS編集用デザイン用

h2
{ 
    border-left: 10px solid #f5f0ed;
    border-bottom: 2px solid #f5f0ed;
    padding-left: 10px; 
    font-weight: bold; 
    font-size: 130%; 
    color: #333333;
}
h3
{
    border-left: 7px solid #E1A683;
    border-bottom: 2px solid #E1A683;
    padding-left: 7px;
    font-weight: bold;
    font-size: 125%;
    color: #333333;
}
h4
{
    border-left: 5px solid #F5B792;
    padding-left: 5px;
    font-weight: bold;
    font-size: 110%;
    color: #333333;
}

まとめ

いかがだったでしょうか?

今回はデザインよりも配色を重視したCSSの紹介になってます。

他のデザインは「アメブロ コピペで使える見出しデザインセット 24選」でも紹介しています。

また今後は別の見出しデザインも追加していく予定です。

各見出しの配色はウェブ配色ツール Ver2.0を参考にしています。

[keni-linkcard url=”https://www.color-fortuna.com/color_scheme_genelator2/”]

 

最後までお読みいただきありがとうございます。

今回の記事があなたの役に立ったなら幸いです。

質問疑問ございましたらコメント欄へお願いします。

[cc id=970]

この記事をシェアする

記事一覧へ戻る

コメント Comments

コメント一覧

コメントはありません。

コメントする

関連記事 Relation Entry