h1：杜子春＠芥川龍之介

　或（ある）春の日暮です。
　唐（とう）の都洛陽（らくよう）の西の門の下に、ぼんやり空を仰いでいる、一人の若者がありました。

h2：杜子春＠芥川龍之介
1. h3：杜子春＠芥川龍之介
  1. h4：杜子春＠芥川龍之介

h2：杜子春＠芥川龍之介

　若者は名を杜子春といって、元は金持の息子でしたが、今は財産を費（つか）い尽して、その日の暮しにも困る位、憐（あわれ）な身分になっているのです。

h3：杜子春＠芥川龍之介

　何しろその頃洛陽といえば、天下に並ぶもののない、繁昌（はんじょう）を極（きわ）めた都ですから、往来にはまだしっきりなく、人や車が通っていました。門一ぱいに当っている、油のような夕日の光の中に、老人のかぶった紗（しゃ）の帽子や、土耳古（トルコ）の女の金の耳環（みみわ）や、白馬（しろうま）に飾った色糸の手綱（たづな）が、絶えず流れて行く容子（ようす）は、まるで画のような美しさです。

h4：杜子春＠芥川龍之介

　しかし杜子春は相変らず、門の壁に身を凭（もた）せて、ぼんやり空ばかり眺（なが）めていました。空には、もう細い月が、うらうらと靡（なび）いた霞（かすみ）の中に、まるで爪の痕（あと）かと思う程、かすかに白く浮んでいるのです。
「日は暮れるし、腹は減るし、その上もうどこへ行っても、泊めてくれる所はなさそうだし――こんな思いをして生きている位なら、一そ川へでも身を投げて、死んでしまった方がましかも知れない」

h5：杜子春＠芥川龍之介

　杜子春はひとりさっきから、こんな取りとめもないことを思いめぐらしていたのです。
　するとどこからやって来たか、突然彼の前へ足を止めた、片目眇（すがめ）の老人があります。それが夕日の光を浴びて、大きな影を門へ落すと、じっと杜子春の顔を見ながら、
「お前は何を考えているのだ」と、横柄に声をかけました。
「私（わたし）ですか。私は今夜寝る所もないので、どうしたものかと考えているのです」
　老人の尋ね方が急でしたから、杜子春はさすがに眼を伏せて、思わず正直な答をしました。
「そうか。それは可哀そうだな」
　老人は暫（しばら）く何事か考えているようでしたが、やがて、往来にさしている夕日の光を指さしながら、
「ではおれが好（い）いことを一つ教えてやろう。今この夕日の中に立って、お前の影が地に映ったら、その頭に当る所を夜中（よなか）に掘って見るが好い。きっと車に一ぱいの黄金（おうごん）が埋（う）まっている筈（はず）だから」
「ほんとうですか」

h6：杜子春＠芥川龍之介

　杜子春は驚いて、伏せていた眼を挙（あ）げました。ところが更に不思議なことには、あの老人はどこへ行ったか、もうあたりにはそれらしい、影も形も見当りません。その代り空の月の色は前よりも猶（なお）白くなって、休みない往来の人通りの上には、もう気の早い蝙蝠（こうもり）が二三匹ひらひら舞っていました。

Cocoon Child: スタイルシート (style.css) に追加

h5のアイコン名は任意で設定

/*** h1〜h6設定リセット ***/
/*見出し初期化*/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
padding: 0;
background:none;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}
/*** h1タグ ***/
.article h1 {
padding: 0;
}
/*media Queries 1030px以下*/
@media screen and (max-width: 1030px){
.article h1 {
padding: 0;
}
}
/*** h2タグ ***/
.article h2 {
padding: .60em 0.7em;
border-top: 1px solid #191919;
border-bottom: 1px solid #191919;
background-color:rgba(249,249,249,1.0);
}
/*media Queries 834px以下*/
@media screen and (max-width: 834px){
.article h2 {
padding: .55em 0.7em;
}
}
/*** h3タグ ***/
.article h3 {
position: relative;
padding: .40em 1em;
border-left: 1px solid #191919;
background-color:rgba(249,249,249,0.8);
}
/*media Queries 834px以下*/
@media screen and (max-width: 834px){
.article h3 {
padding: .40em .80em;
}
}
/*** h4タグ ***/
.article h4 {
position: relative;
padding: 0 .5em .5em 2em;
}
.article h4::before,
.article h4::after {
position: absolute;
content: '';
border-radius: 100%
}
.article h4::before {
top: .2em;
left: .2em;
z-index: 2;
width: 18px;
height: 18px;
background: rgba(150,150,150,0.7);
}
.article h4::after {
top: .7em;
left: .7em;
width: 13px;
height: 13px;
background: rgba(210,210,210,0.8);
}
/*media Queries 834px以下*/
@media screen and (max-width: 834px){
.article h4 {
padding: 0em .5em .5em 2em;
}
}
/*** h5タグ ***/
.article h5 {
background-color:rgba(255,255,255,1);
padding: .2em 1.5em -0.2em .4em;
}
.article h5::before {
content: "";
display: inline-block;
width: 1.4em;
height: 1.4em;
background: url(https://natsugoro.com/wp-content/.../.../アイコン名.png) no-repeat;
background-size: contain;
margin-left: 0em;
margin-right: .6em;
}
/*media Queries 834px以下*/
@media screen and (max-width: 834px){
.article h5 {
padding: 0em 0em;
}
}
/*** h6タグ ***/
.article h6 {
padding: .5em 1em .5em 1em;
border: 2px solid rgba(0,0,0,0.2);
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
background-color:rgba(249,249,249,0.7);
}
/*media Queries 834px以下*/
@media screen and (max-width: 834px){
.article h6 {
padding: .70em 1em;
}
}

Font Awesome 5 Freeのアイコンを使う場合

hx：xは2〜6は任意
xxxx：contentのxxxxは当該アイコンの4byteのHEXコードを設定
その他：background-color、padding、font-sizeは任意で調整

.article hx {
  background-color:rgba(255,255,255,1);
  padding: .8em 1.5em .4em 2em;
}
.article hx::before {
    font-family: "Font Awesome 5 Free";
    content: "\xxxx";
    position: absolute;
    font-size: 1.3em;
    left: 0;
}