おしゃれな見出し用CSS

ハピタス登録で1,000円分になるURL

はてなブログで使える見出しCSS

前に作ったこの見出しCSSを手元のhtmlでも使いたい。

できた。こんな感じ。

ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="icon_favicon_aozora.ico">
<title>視聴履歴aozora</title>
</head>
<body>
<div class="entry-content">

<h1>青空文庫視聴履歴</h1>
</div>
<h3>
<ol>
<li>2024/2/9(金) <a href="http://192.168.3.11:8080/PT3/doLSglob.php?GREPWORD2=gD6&SORT_FLG=YES&MKSORT=goMKSORT#" target="_blank">杜子春 <font size="1pt">芥川龍之介</font></a></li>

<li>2024/2/10(土) <a href="http://192.168.3.11:8080/PT3/doLSglob.php?GREPWORD2=ignP&SORT_FLG=YES&MKSORT=goMKSORT#" target="_blank">走れメロス <font size="1pt">太宰治</font></a></li>

<li>2024/2/11(日) <a href="http://192.168.3.11:8080/PT3/doLSglob.php?GREPWORD2=%E8%9C%9C%E6%9F%91&SORT_FLG=YES&MKSORT=goMKSORT#" target="_blank"><mark>蜜柑</mark> <font size="1pt">芥川龍之介</font></a></li>

<li>2024/2/11(日) <a href="http://192.168.3.11:8080/PT3/doLSglob.php?GREPWORD2=tMQO&SORT_FLG=YES&MKSORT=goMKSORT#" target="_blank">セロ弾きのゴーシュ <font size="1pt">宮沢賢治</font></a></li>

<li>2024/2/11(日) <a href="http://192.168.3.11:8080/PT3/doLSglob.php?GREPWORD2=a2Mm&SORT_FLG=YES&MKSORT=goMKSORT#" target="_blank">アグニの神 <font size="1pt">芥川龍之介</font></a></li>

<li>2024/2/11(日) <a href="http://192.168.3.11:8080/PT3/doLSglob.php?GREPWORD2=NUwk&SORT_FLG=YES&MKSORT=goMKSORT#" target="_blank">蛙 <font size="1pt">芥川龍之介</font></a></li>

<li>2024/2/12(月) <a href="http://192.168.3.11:8080/PT3/doLSglob.php?GREPWORD2=suA9&SORT_FLG=YES&MKSORT=goMKSORT#" target="_blank">蜘蛛の糸 <font size="1pt">芥川龍之介</font></a></li>

<div class="entry-content">
<h3>
<a href="https://www.youtube.com/@hitoshi_kubota_official/videos" target="_blank">窪田等の世界</a>

</h3>

/* デニム記事風 h2 */
.entry-content h2 {
position: relative;
padding: 10px 10px;
color: #fff;
line-height: 1.5;
background-color: #293b6a;
border-radius: 4px;
}
.entry-content h2::before,
.entry-content h2::after {
position: absolute;
width: 100%;
height: 4px;
z-index: 2;
content: '';
}
.entry-content h2::before {
top: 0;
left: 0;
border-bottom: 1px dashed #fff;
}
.entry-content h2::after {
bottom: 0;
left: 0;
border-top: 1px dashed #fff;
}
/* 可愛い丸 h3*/
.entry-content h3 {
position: relative;
padding: 6px 0 6px 34px;
border-bottom: 2px solid #ce0d55;
color: #333;
line-height: 1.5;
}
.entry-content h3::before,
.entry-content h3::after {
content: '';
position: absolute;
background-color: #ce0d55;
}
.entry-content h3::before{
top: 0;
left: 14px;
width: 12px;
height: 12px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
.entry-content h3::after{
top: 18px;
left: 8px;
width: 8px;
height: 8px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}

.sample_h_14{
font-size: 1.5em;/* フォントサイズ */
font-weight: bold;/* フォント太さ */
padding: 0.5em 1em;
margin-bottom: 2em;
position: relative;
background-color: #f0d8e8;/* 背景色 */
box-shadow: 0px 0px 0px 5px #f0d8e8;
border: dashed 2px #ffffff;/* 破線 */
color:#000000;/* フォント色 */
}

.sample_h_14:after {
position: absolute;
content: '';
top: -7px;
left: -7px;
border-width: 0 0 20px 20px;
border-style: dashed;
border-color: #fff #fff #dec8d6;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

</style>

<a href="https://poppyou.com/heading-design.html">おしゃれな見出し</a>
<div class="entry-content">
<h1>
見出しテストh1
</h1>
<h2>
見出しテストh2
</h2>
<h3>
見出しテストh3
</h3>
<a href="https://saruwakakun.com/sango/entry-content">h3 見出し子孫セレクタ<img src="https://saruwakakun.com/wp-content/uploads/2017/01/bdrfiletype-and-content-06-min.png" width="100%"></a>
</div>
</body>
</html>