見出しのデザインを変えるHTMLとCSSでする方法

2019年08月18日 2021年04月11日

Jo Masafumi

学習状況をツイッターでつぶやく

次は、見出しのデザインを変えるHTMLとCSSでする方法をします。

見出しのデザインを変えるHTMLとCSSでする方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「見出しのデザインを変えるHTMLとCSSでする方法」と入力します。

右側の「テキスト」を押します。

テキストのところに、HTMLコードを貼り付けます。

テキストのところに、下記コードをコピーして貼り付けます。

<h1 class="midashi1">見出し１</h1>
<h2 class="midashi2">見出し２</h2>
<h3 class="midashi3">見出し２</h3>
<h4 class="midashi4">見出し２</h4>
<h5 class="midashi5">見出し２</h5>
<h6 class="midashi6">見出し２</h6>

貼り付けました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

「見出し１～見出し６」が表示されていることを確認します。

学習状況をツイッターでつぶやく

↑じょうまさふみに学習状況を報告すると喜びます(^^)/

HTMLとCSSの説明

CSS

/*見出しCSSコード*/
.midashi1 {
    margin: 4px 0 4px; /*外側の余白*/
    font-size: 2em; /*文字サイズ*/
    font-weight: 700; /*文字の太さ*/
}
.midashi2 {
    font-size: 1.7em; /*文字サイズ*/
    font-weight: bold; /*文字の太さ*/
    line-height: 40px; /*行の高さ*/
    padding: .5em 0 .5em .5em; /*行の余白*/
    border-left: 28px solid #40ad3b; /*左側の縦線*/
    border-bottom: 1px solid #757575; /*下線*/
    margin: 1.5em 0em 1.5em 0; /*上下の余白*/
}
.midashi3 {
    font-size: 1.5em; /*文字サイズ*/
    font-weight: bold; /*文字の太さ*/
    line-height: 40px; /*行の高さ*/
    padding: .5em 0 .5em .5em; /*行の余白*/
    border-left: 14px solid #eaa629; /*左側の縦線*/
    margin: 1.5em 0em 1.5em 0; /*上下の余白*/
}
.midashi4 {
    font-size: 1.2em; /*文字サイズ*/
    font-weight: bold; /*文字の太さ*/
    border-top: 2px solid #40ad3b; /*上線*/
    border-bottom: 2px solid #40ad3b; /*下線*/
    margin: 1.5em 0em 1.5em 0; /*上下の余白*/
}
.midashi5 {
    font-size: 1em; /*文字サイズ*/
    font-weight: bold; /*文字の太さ*/
    border-bottom: 2px solid #eaa629; /*下線*/
    margin: 1.5em 0em 1.5em 0; /*上下の余白*/
}
.midashi16 {
    font-size: 1em; /*文字サイズ*/
    font-weight: bold; /*文字の太さ*/
    margin: 1.5em 0em 1.5em 0; /*上下の余白*/
}

HTML

<h1 class="midashi1">見出し１</h1>
<h2 class="midashi2">見出し２</h2>
<h3 class="midashi3">見出し２</h3>
<h4 class="midashi4">見出し２</h4>
<h5 class="midashi5">見出し２</h5>
<h6 class="midashi6">見出し２</h6>

見出しタグの「h1～h6」をHTMLに書くときは、「h1 class」と書いて、
そのあとに、「midashi1～midashi6」を入れて使います。

いろいろな見出しの記入例

下線付き見出し

CSS

/*下線付き見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  border-bottom: solid 3px black; /*下線*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

点線見出し

CSS

/*点線見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: #6594e0;/*文字色*/
  border-bottom: dashed 2px #6594e0; /*点線*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

二重線見出し

CSS

/*二重線見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  border-bottom: double 5px #FFC778; /*二重線*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

上下線見出し

CSS

/*上下線見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: #364e96;/*文字色*/
  border-top: solid 3px #364e96;/*上線*/
  border-bottom: solid 3px #364e96;/*下線*/
  line-height: 2em; /*行の高さ*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

背景色あり見出し

CSS

/*背景色あり見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: #364e96;/*文字色*/
  background: #c2edff;/*背景色*/
  padding: 0.5em;/*文字周辺余白*/
  line-height: 1em; /*行の高さ*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

枠見出し

CSS

/*枠見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: #364e96;/*文字色*/
  border: solid 3px #364e96;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
  line-height: 1em; /*行の高さ*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

背景下線見出し

CSS

/*背景下線見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  padding: 0.5em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #eaf3ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
  line-height: 1em; /*行の高さ*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

背景と左線見出し

CSS

/*背景と左線見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fffaf4;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線*/
  line-height: 1em; /*行の高さ*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

立体的な見出し

CSS

/*立体的な見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
  line-height: 1em; /*行の高さ*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

影付き見出し

CSS

/*影付き見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: aliceblue; /*背景色*/
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.23); /*影*/
  line-height: 1em; /*行の高さ*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

タグ見出し

CSS

/*タグ見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  padding: 0.5em;/*文字周りの余白*/
  color: #505050;/*文字色*/
  display: inline-block;/*横並び*/
  background: #94cfff;/*背景色*/
  vertical-align: middle;/*上下中央*/
  border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
  line-height: 1em; /*行の高さ*/
  width: 100%; /*見出しの横幅*/
}
h1:before {
  content: '●';
  color: white; /*丸の色*/
  margin-right: 8px; /*右側余白*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

ふきだし見出し

CSS

/*ふきだし見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  padding: 0.5em;/*文字周りの余白*/
  color: #505050;/*文字色*/
  position: relative; /*通常の表示位置が基準*/
  background: #94cfff;/*背景色*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
}
.midashi1:after {
  position: absolute; /*親要素の左上基準*/
  content: '';
  top: 100%; /*高さ位置*/
  left: 30px; /*左位置*/
  border: 15px solid transparent; /*三角形*/
  border-top: 15px solid #94cfff; /*三角形の長さ*/
  width: 0; /*横幅*/
  height: 0; /*縦幅*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

ぬの見出し

CSS

/*ぬの見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  padding: 0.5em;/*文字周りの余白*/
  color: #505050;/*文字色*/
  box-shadow: 0px 0px 0px 5px #fff0a1; /*外側線*/
  border: dashed 1px #006cff; /*点線*/
  background: #fff0a1;/*背景色*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
  margin-left: 5px; /*左側余白*/
  margin-right: 5px; /*右側余白*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

角めくれ見出し

CSS

/*角めくれ見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  padding: 0.5em;/*文字周りの余白*/
  color: #505050;/*文字色*/
  position: relative; /*通常の表示位置が基準*/
  background: #dfefff; /*背景色*/
  box-shadow: 0px 0px 0px 5px #dfefff; /*角位置調整用*/
  border: dashed 2px white; /*角位置調整用*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
  margin-left: 5px; /*左側余白*/
  margin-right: 5px; /*右側余白*/
}
.midashi1:after {
  position: absolute; /*親要素の左上基準*/
  content: '';
  left: -7px; /*左位置*/
  top: -7px; /*上位置*/
  border-width: 0 0 15px 15px; /*三角大きさ*/
  border-style: solid; /*三角のスタイル*/
  border-color: #fff #fff #a8d4ff; /*三角色*/
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); /*三角影*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

リボン見出し

CSS

/*リボン見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  padding: 0.5em;/*文字周りの余白*/
  color: white;/*文字色*/
  position: relative; /*通常の表示位置が基準*/
  background: #a6d3c8; /*背景色*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
}
.midashi1:before {
  position: absolute; /*親要素の左上基準*/
  content: '';
  top: 100%; /*上位置*/
  left: 0; /*左位置*/
  border: none; /*線なし*/
  border-bottom: solid 15px transparent; /*三角形高さ*/
  border-right: solid 30px rgb(149, 158, 155); /*三角形横幅*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

マーカー見出し

CSS

/*マーカー見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  padding: 0em;/*文字周りの余白*/
  color: black;/*文字色*/
  background: linear-gradient(transparent 70%, #a7d6ff 70%); /*マーカー線*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

２色線見出し

CSS

/*２色線見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  padding: 0em;/*文字周りの余白*/
  color: black;/*文字色*/
  border-bottom: solid 3px skyblue; /*２番目の下線*/
  position: relative; /*通常の表示位置が基準*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
}
.midashi1:after {
  position: absolute; /*親要素の左上基準*/
  content: " ";
  display: block; /*表示位置*/
  border-bottom: solid 3px #ffc778; /*最初の下線*/
  bottom: -3px; /*下位置調整用*/
  width: 30%; /*線の長さ*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

矢印見出し

CSS

/*矢印見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  padding-left: 25px; /*左側の余白*/
  position: relative; /*通常の表示位置が基準*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
}
.midashi1:before {
  position: absolute; /*親要素の左上基準*/
  content: '';
  bottom: -3px; /*位置調整用*/
  left: 0; /*左位置*/
  width: 0; /*横幅*/
  height: 0; /*高さ*/
  border: none; /*線なし*/
  border-left: solid 15px transparent; /*矢印大きさ*/
  border-bottom: solid 15px rgb(119, 195, 223); /*矢印大きさ*/
}
.midashi1:after {
  position: absolute; /*親要素の左上基準*/
  content: '';
  bottom: -3px; /*位置調整用*/
  left: 10px; /*左位置調整*/
  width: 99%; /*線の長さ*/
  border-bottom: solid 3px rgb(119, 195, 223); /*下線*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

しましま見出し

CSS

/*しましま見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  text-shadow: 0 0 5px white; /*文字影*/
  padding: 0.3em 0.5em; /*余白*/
  background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px); /*しましま用*/
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px); /*しましま用*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

左線としましま見出し

CSS

/*左線としましま見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  text-shadow: 0 0 5px white; /*文字影*/
  padding: 0.3em 0.5em; /*余白*/
  background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px); /*しましま用*/
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px); /*しましま用*/
  border-left: solid 7px #010079; /*左線*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

上下線としましま見出し

CSS

/*上下線としましま見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  text-shadow: 0 0 5px white; /*文字影*/
  padding: 0.3em 0.5em; /*余白*/
  background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px); /*しましま用*/
  background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px); /*しましま用*/
  border-top: solid 2px #6cb4e4; /*上線*/
  border-bottom: solid 2px #6cb4e4; /*下線*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

しましま下線見出し

CSS

/*しましま下線見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  position: relative; /*通常の表示位置が基準*/
  line-height: 1.5em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
}
.midashi1:after {
  content: "";
  position: absolute; /*親要素の左上基準*/
  left: 0; /*左位置*/
  bottom: 0; /*下位置*/
  width: 100%; /*線長さ*/
  height: 7px; /*線高さ*/
  background: -webkit-repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px); /*しましま線*/
  background: repeating-linear-gradient(-45deg, #6ad1c8, #6ad1c8 2px, #fff 2px, #fff 4px); /*しましま線*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

しましま線ふきだし見出し

CSS

/*しましま線ふきだし見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  position: relative; /*通常の表示位置が基準*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
  padding: 0.6em; /*文字周辺余白*/
  background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px); /*しましま線*/
  background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px); /*しましま線*/
  border-radius: 7px; /*角丸み*/
}
.midashi1:after {
  position: absolute; /*親要素の左上基準*/
  content: '';
  top: 100%; /*上位置*/
  left: 30px; /*左位置*/
  border: 15px solid transparent; /*三角形大きさ*/
  border-top: 15px solid #ffebbe; /*三角形大きさ*/
  width: 0; /*横幅*/
  height: 0; /*高さ*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

両端に線見出し

CSS

/*両端に線見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  position: relative; /*通常の表示位置が基準*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
  display: inline-block; /*横並び*/
  padding: 0 55px; /*余白*/
}
.midashi1:before, h1:after {
  content: '';
  position: absolute; /*親要素の左上基準*/
  top: 50%; /*上位置*/
  display: inline-block; /*横並び*/
  width: 45px; /*線長さ*/
  height: 1px; /*線太さ*/
  background-color: black; /*線の色*/
}
.midashi1:before {
  left:0; /*左の線位置*/
}
.midashi1:after {
  right: 0; /*右の線位置*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

両端に二重線見出し

CSS

/*両端に二重線見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  position: relative; /*通常の表示位置が基準*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
  display: inline-block; /*横並び*/
  padding: 0 55px; /*余白*/
}
.midashi1:before, .midashi1:after {
  content: '';
  position: absolute; /*親要素の左上基準*/
  top: 45%; /*上位置*/
  display: inline-block; /*横並び*/
  width: 45px; /*線長さ*/
  height: 3px; /*線の間隔*/
  border-top: solid 1px black; /*二重線上側*/
  border-bottom: solid 1px black; /*二重線下側*/
}
.midashi1:before {
  left:0; /*左の線位置*/
}
.midashi1:after {
  right: 0; /*右の線位置*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

小さい下線見出し

CSS

/*小さい下線見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  position: relative; /*通常の表示位置が基準*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
  display: inline-block; /*横並び*/
}
.midashi1:before {
  content: '';
  position: absolute; /*親要素の左上基準*/
  bottom: -15px; /*下線の位置*/
  display: inline-block; /*横並び*/
  width: 60px; /*線の長さ*/
  height: 5px; /*線の太さ*/
  left: 50%; /*線の左位置*/
  -webkit-transform: translateX(-50%); /*線の位置*/
  transform: translateX(-50%); /*線の位置*/
  background-color: black; /*線の色*/
  border-radius: 2px; /*線の角丸み*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

スラッシュ線見出し

CSS

/*スラッシュ線見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  position: relative; /*通常の表示位置が基準*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
  display: inline-block; /*横並び*/
  padding: 0 45px; /*文字主変余白*/
}
.midashi1:before, .midashi1:after {
  content: '';
  position: absolute; /*親要素の左上基準*/
  top: 50%; /*高さ位置*/ 
  display: inline-block; /*横並び*/
  width: 44px; /*線の長さ*/
  height: 2px; /*線の太さ*/
  background-color: black; /*線の色*/
  -webkit-transform: rotate(-60deg); /*線の角度*/
  transform: rotate(-60deg); /*線の角度*/
}
.midashi1:before {
  left:0; /*左線の位置*/
}
.midashi1:after {
  right: 0; /*右線の位置*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

交差線見出し

CSS

/*交差線見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  position: relative; /*通常の表示位置が基準*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
  display: inline-block; /*横並び*/
  padding: 0.25em 1em; /*文字周辺余白*/
  border-top: solid 2px black; /*上線*/
  border-bottom: solid 2px black; /*下線*/
}
.midashi1:before, .midashi1:after {
  content: '';
  position: absolute; /*親要素の左上基準*/
  top: -7px; /*縦線位置*/
  width: 2px; /*縦線太さ*/
  height: -webkit-calc(100% + 14px); /*縦線位置*/
  height: calc(100% + 14px); /*縦線位置*/
  background-color: black; /*縦線色*/
}
.midashi1:before {
  left: 7px; /*縦線の左位置*/
}
.midashi1:after {
  right: 7px; /*縦線の右位置*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

角丸見出し

CSS

/*角丸見出し*/
.midashi1 {
  font-size: 2em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  position: relative; /*通常の表示位置が基準*/
  line-height: 1em; /*行の高さ*/
  margin-bottom: 0.5em; /*下側余白*/
  display: inline-block; /*横並び*/
  padding: 0.25em 1em; /*文字周辺余白*/
  border: solid 2px black; /*枠の線*/
  border-radius: 3px 0 3px 0; /*枠の角丸み*/
  margin-left: 10px; /*枠の左側余白*/
  margin-top: 10px; /*枠の上側余白*/
}
.midashi1:before, .midashi1:after {
  content: '';
  position: absolute; /*親要素の左上基準*/
  width:10px; /*丸大きさ*/
  height: 10px; /*丸大きさ*/
  border: solid 2px black; /*丸線の太さ*/
  border-radius: 50%; /*丸み*/
}
.midashi1:after {
  top:-10px; /*丸の上位置*/
  left:-10px; /*丸の左位置*/
}
.midashi1:before {
  bottom:-10px; /*丸の下位置*/
  right:-10px; /*丸の右位置*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1

はっぱ見出し

CSS

/*はっぱ見出し*/
.midashi1 {
  font-size: 1.5em; /*文字サイズ*/
  font-weight: bold; /*文字の太さ*/
  color: black;/*文字色*/
  position: relative; /*通常の表示位置が基準*/
  line-height: 1em; /*行の高さ*/
  padding: 10px 0; /*文字周辺余白*/
  text-align: center; /*文字位置*/
  margin-top:0.5em; /*上側余白*/
  margin-bottom: 0.5em; /*下側余白*/
}
.midashi1:before {
  content: "";
  position: absolute; /*親要素の左上基準*/
  top: -8px; /*上位置*/
  left: 50%; /*左位置*/
  width: 150px; /*線の幅*/
  height: 58px; /*線の高さ*/
  border-radius: 50%; /*線の丸み*/
  border: 5px solid #a6ddb0; /*線の太さ*/
  border-left-color: transparent; /*左の線を透明*/
  border-right-color: transparent; /*右の線を透明*/
  -webkit-transform: translateX(-50%); /*丸みの調整*/
  transform: translateX(-50%); /*丸みの調整*/
}

HTML

<h1 class="midashi1">見出し1</h1>

記事をプレビュー表示したとき

見出し1