【SWELL】見出し hタグカスタマイズ

h1 杜子春@芥川龍之介

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

目次

h2 杜子春@芥川龍之介

 若者は名は杜子春とししゆんといつて、元は金持の息子でしたが、今は財産をつかつくして、その日の暮しにも困る位、あはれな身分になつてゐるのです。

h3 杜子春@芥川龍之介

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

h4 杜子春@芥川龍之介

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

h5 杜子春@芥川龍之介

 杜子春はひとりさつきから、こんな取りとめもないことを思ひめぐらしてゐたのです。
 するとどこからやつて来たか、突然彼の前へ足を止めた、片目すがめの老人があります。それが夕日の光を浴びて、大きな影を門へ落すと、ぢつと杜子春の顔を見ながら、
「お前は何を考へてゐるのだ。」と、横柄わうへいに言葉をかけました。
「私ですか。私は今夜寝る所もないので、どうしたものかと考へてゐるのです。」

h6 杜子春@芥川龍之介

 老人の尋ね方が急でしたから、杜子春はさすがに眼を伏せて、思はず正直な答をしました。
「さうか。それは可哀さうだな。」
 老人はしばらく何事か考へてゐるやうでしたが、やがて、往来にさしてゐる夕日の光をしながら、
「ではおれが好いことを一つ教へてやらう。今この夕日の中に立つて、お前の影が地に映つたら、その頭に当る所を夜中に掘つて見るが好い。きつと車に一ぱいの黄金が埋まつてゐる筈だから。」
「ほんたうですか。」
 杜子春は驚いて、伏せてゐた眼を挙げました。所が更に不思議なことには、あの老人はどこへ行つたか、もうあたりにはそれらしい、影も形も見当りません。その代り空の月の色は前よりもなほ白くなつて、休みない往来の人通りの上には、もう気の早い蝙蝠かうもりが二三匹ひらひら舞つてゐました。


style.cssに追加(小テーマ)

/*************************************************
hタグデザイン変更
*************************************************/
/*見出し初期化*/
.post_content h2,
.post_content h4
{
padding: 0;
/*margin: 0;*/
letter-spacing: 0.03em;
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;
}
/*** h2タグ ***/
.post_content h2 {
  padding: .45em 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){
.post_content h2 {
  padding: .40em 0.7em;
}
}
/*** h3タグ ***/
.post_content h3 {
  padding: .35em 0em;
}
/*media Queries 834px以下*/
@media screen and (max-width: 834px){
.post_content h3 {
  padding: .35em 0em;
}
}
/*** h4タグ ***/
.post_content h4 {
  position: relative;
  padding: 0 .5em .30em 2em;
  border-bottom: 1px solid #191919;
}
.post_content h4::before,
.post_content h4::after {
  position: absolute;
  content: '';
  border-radius: 100%
}
.post_content h4::before {
  top: .2em;
  left: .2em;
  z-index: 2;
  width: 18px;
  height: 18px;
  background: rgba(150, 150, 150, .7);
}
.post_content h4::after {
  top: .7em;
  left: .7em;
  width: 13px;
  height: 13px;
  background: rgba(210, 210, 210, .8);
}
/*media Queries 834px以下*/
@media screen and (max-width: 834px){
.post_content h4 {
  padding: 0em .5em .30em 2em;
}
}
/*** h5タグ ***/
.post_content h5 {
  font-size: 1.2em;
}
/*media Queries 834px以下*/
@media screen and (max-width: 834px){
.post_content h5 {
  font-size: 1.0em;
}
}
/*** h6タグ ***/
.post_content h6 {
  font-size: 1.1em;
}
/*media Queries 834px以下*/
@media screen and (max-width: 834px){
.post_content h6 {
  font-size: .9em;
}
}
目次