(cache) ガーリーなデザインの見出しのCSS　はてなブログへコピペで使えます。

ガーリーなデザインの見出しのCSS　はてなブログへコピペで使えます。

f:id:syofuso:20170311032257p:plain
ガーリーデザインシリーズです。ガーリーなデザインのソーシャルシェアボタンのCSS はてなブログへコピペで使えます - Minimal Greenとあわせてお使いいただくと良いかと存じます。
以下ははてなブログの大見出し（h3）のclass指定にあわせていますが、セレクタを変更すれば他のブログなどでも使えます。

リセット用CSS

テーマのCSSと被ってうまく上書きできないときは、リセット用CSSを先に記述し、その後から各見出しのデザインのCSSを追記してください。

/* 見出しのデザインリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
   content: none;
   background: none;
   border: none;
   border-radius: 0;
}

リボン風見出し

ステッチ風でレースっぽく？dashedってガーリーデザインに向いてます。

大見出し

デザインCSS

.entry-content h3 {
    font-size: 140%;
    height:40px;
    line-height: 40px;
    position: relative;
    padding: 0.2em 0.5em;
    background-color: #d2e7e4;
    box-shadow: 0px 0px 0px 5px #d2e7e4;
    border: 1px dashed #fff;
}
.entry-content h3::before,
.entry-content h3::after {
    content: '';
    position: absolute;
    border-style: solid;
    border-color: transparent;
}
.entry-content h3::before {
    top: 54px;
    left: -7px;
    border-width: 0 15px 15px 0;
    border-right-color: #a8d4ff;
}

ストライプ背景+左ライン

ストライブ柄の色背景は文字が見やすいように薄い色にして下さい。

大見出し

デザインCSS

.entry-content h3 {
    font-size: 130%;
    border-left: 4px solid  #77B8DA;
    padding: .5em 0 .5em .75em;
    background: repeating-linear-gradient(90deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px); 
}

吹き出し

定番の吹き出し。

大見出し

デザインCSS

.entry-content h3 {
    position: relative;
    padding: .5em .75em;
    background-color: #fff;
    border: 1px solid #77B8DA;
    border-radius: 6px;
}
.entry-content h3::before,
.entry-content h3::after {
    position: absolute;
    top: 100%;
    left: 30px;
    content: '';
    height: 0;
    width: 0;
    border: 10px solid transparent;
}
.entry-content h3::before {
    border-top: 15px solid #77B8DA;
}
.entry-content h3::after {
    margin-top: -2px;
    border-top: 15px solid #fff;
}