【WordPress】見出しデザイン

.article h1 {
	font-size: 20px; /*文字サイズ*/
	font-weight: bold; /*文字太さ*/
	color: #5C676D; /*文字色*/
    border: none;
    padding: 0px 0px 7px 0px; /*上下左右余白*/
    position: relative; /*要素相対配置*/
    display: block;
}
.article h1::after {
    background: repeating-linear-gradient(-45deg, transparent 0 2px, #197a80 3px 4px); /*ストライプ傾き・色・太さ*/
    content: '';
    left: 0;
    bottom: 0;
    height: 7px; /*ストライプ高さ*/
    position: absolute; /*要素絶対配置*/
    width: 100%;
}

.article h1 {
    position: relative; /*要素相対配置*/
    font-size: 20px; /*文字サイズ*/
    font-weight: bold; /*文字太さ*/
    color: #197a80; /*文字色*/
    margin: 47px 0;
    text-shadow: 0 0 2px white;
    text-align: center;
}
.article h1::before {
    content: "";
    position: absolute; /*要素絶対配置*/
    background: #aacbcd; /*円色*/
    width: 70px; /*円縦*/
    height: 70px; /*円横*/
    border-radius: 50%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: -1;
}

.article h1 {
    position: relative; /*要素相対配置*/
    font-size: 20px; /*文字サイズ*/
    font-weight: bold; /*文字太さ*/
    color: #197a80; /*文字色*/
    padding: 10px 0;
    text-align: center;
    margin: 1.5em 0;
}
.article h1::before {
    content: "";
    position: absolute; /*要素絶対配置*/
    top: -3px; /*半円縦位置*/
    left: 50%;
    width: 100px; /*半円幅*/
    height: 60px; /*半円高*/
    border-radius: 50%;
    border: 5px solid #aacbcd; /*半円色*/
    border-left-color: transparent;
    border-right-color: transparent;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.article h1 {
	position: relative; /*要素相対配置*/
    font-size: 20px; /*文字サイズ*/
	color: #197a80; /*文字色*/
	font-weight: bold; /*文字太さ*/
	padding: 10px 10px 10px 20px; /*文字回り余白*/
	display: block;
	border: 3px solid #197a80; /*枠線太さ・実線・色*/
}

.article h1::before {
	content: '';
	position: absolute; /*要素絶対配置*/
	background:#aacbcd; /*背景色*/
	width: calc(100% + 3px);
	height: calc(100% + 3px);
	top: 5px; /*背景の上下位置ずらし*/
	left: 5px; /*背景の左右位置ずらし*/
	z-index: -1;
}

.article h1 {
	 display: flex;
	 font-size: 20px; /*文字サイズ*/
	 color: #197a80; /*文字色*/
	 font-weight: bold; /*文字太さ*/
	 justify-content: center;
	 align-items: center;
	 text-align: center;
}

.article h1::before,
.article h1::after {
	 content: '';
	 width: 3px;
	 height: 40px;
	 background-color: #197a80; /*ライン色*/
}

.article h1::before {
	 margin-right: 30px;
	 transform: rotate(-35deg)
}
.article h1::after {
	 margin-left: 30px;
	 transform: rotate(35deg)
}

.article h1 {
	  font-size: 20px; /*文字サイズ*/
	  color: #197a80; /*文字色*/
	  font-weight: bold; /*文字太さ*/
	  align-items: center;
	  display: flex;
	  justify-content: center;
}
.article h1::before,
.article h1::after {
	  background-color: #197a80; /* 線の色 */
	  height: 2px; /* 横線太さ */
	  width: 50px; /* 横線長さ */
	  content: "";
}
.article h1::before {
	  margin-right: 15px; /* 文字右余白 */
}
.article h1::after {
	  margin-left: 15px; /* 文字左余白 */
}

.article h1 {
	  font-size: 22px; /*文字サイズ*/
	  color: #197a80; /*文字色*/
	  font-weight: bold; /*文字太さ*/
	  position: relative;
	  padding: 5px 0px;
	  margin-bottom: 10px;
	  border-bottom: 3px solid #197a80; /* 線の太さ・線種・色 */
}
.article h1::after,
.article h1::before {
	  position: absolute;
	  top: 100%;
	  left: 50%;
	  content: "";
	  height: 0;
	  width: 0;
}
.article h1::after {
	  border: 13px solid;
	  border-color: transparent;
	  border-top-color: white; /* 真ん中三角の色 */
	  margin-left: -12px;
}
.article h1:before {
	  border: 18px solid;
	  border-color: transparent;
	  border-top-color: #197a80; /* 真ん中三角の色 */
	  margin-left: -17px;
}