にちじょうみだれがき

役立ち情報から雑記まで幅広いジャンルを展開するブログ。

CSSでデザインした見出しをはてなブログに追加してみた

f:id:ChihaYuu:20141004074819j:plain

f:id:ChihaYuu:20141004081140p:plain


最近ブログカスタマイズがマイブームの@chihayuu_です。
今回は、CSSでデザインした見出しを追加してみました。

デフォルトの見出しでも十分なのですが、弄ってる感を出したかったのでデザインして追加してみました。
今の所は、下記記載の2種類だけ追加しています。随時レパートリーを増やしていこうと思います。


見出しを使い分けて見やすい記事が書けるように頑張ります。
ありきたりなデザインですが、よければお使いください。


吹き出しタイプ

吹き出しタイプ見出しです。

/*吹き出しタイプ見出し*/
.fukidasi{
    position: relative;
    color: #fff;
    background: #0080FF;
    font-size: 18px;
    font-weight: bold;
    margin: 0 -28px 24px -28px;
    padding: 12px;
    box-shadow: 0 1px 3px #777;
    -moz-box-shadow: 0 1px 3px #777;
    -webkit-box-shadow: 0 1px 3px #777;
    -o-box-shadow: 0 1px 3px #777;
    -ms-box-shadow: 0 1px 3px #777;
    border-radius: 3px;
}
 
.fukidasi:after{
    content: "";
    position: absolute;
    bottom: -15px;
    left: 10%;
    z-index: 90;
    margin-left: -15px;
    border-top: 15px solid #0080FF;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 0;
}


リボンタイプ

リボンタイプの見出しです。

/*リボンタイプ見出し*/
.ribon{
    position: relative;
    color: #fff;
    background: #0080FF;
    font-size: 18px;
    font-weight: bold;
    margin: 0 -28px 24px -28px;
    padding: 12px;
    box-shadow: 0 1px 3px #777;
    -moz-box-shadow: 0 1px 3px #777;
    -webkit-box-shadow: 0 1px 3px #777;
    -o-box-shadow: 0 1px 3px #777;
    -ms-box-shadow: 0 1px 3px #777;
}
 
.ribon:after,.ribon:before{
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
}
 
.ribon:before{
    right: 0;
    border-left: 5px solid #333;
}
 
.ribon:after{
    left: 0;
    border-right: 5px solid #333;
}



CSS追加方法
デザイン→カスタマイズ→デザインCSSに上記コードを貼り付け。

追加した見出しの使い方

/*""に入るのは定義した見出し名です*/
<p class = "fukidasi">見出し</p>


参考サイト


H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -



CSS見出し-ジェネレーター | WEB道

スマホ側は対応していません。
PCでの表示のみのカスタマイズです。

この記事を気に入っていただけたら、はてなブックマークやツイッター等でシェアしていただけると、非常に嬉しく励みになります。

スポンサーリンク