見出しの装飾のコード４選。見出しをおしゃれにして記事を見やすくしよう！

こんにちは

しのさんです(´▽｀*)

今回は、見出しをお洒落に装飾するコードをご紹介していきます！

いろんなブログを見ていたら、見出しをお洒落にしている方もいらっしゃいますよね。

私も「どうやってやるんだろ？」「いいな～！！」って思っていました！

ついに見出しの装飾の仕方をマスターしたのでご紹介したいと思います！

おすすめ記事▶PV数をアップさせたいなら、過去記事をリライトしろ！

▼目次▼

見出しとはなんぞや？
見出しの装飾コード４選
プラグインのAddQuicktagをインストールしよう！
追加SCCにコードを追加しよう！
きちんと反映されているか試してみよう！

見出しとはなんぞや？

見出しとはまさに↑のこと！！

記事の中の内容を細かく、分かり易くタイトル付けしたものですね。

私は、ワードプレスで記事を書いているのですが、ワードプレスなら下記の画像のところで見出しを付けることができます！

ワードプレスに備わってる機能だけだと、大きな太文字として表現されます。

そのまま使ってもいいんですけど、記事をもっと華やかにしたいときにコードを追加して装飾することも可能なんです！

見出しの装飾コード４選

それでは、私のお気に入りの見出しの装飾コードをご紹介したいと思います！

１．見出しサンプル

↑のような見出しを作るコードは↓です！

h3#sample{
    position: relative;
    color: #ffffff;
    background: #0790cd;
    font-size: 16pt ;
    border: 3px solid #4aecfb;
    margin: 10px 10px 23px 10px;
    padding: 10px 5px 10px 10px;
    border-radius: 3px;
    box-shadow:1px 3px 7px 0px  #666666 ;
}
h3#sample:after, h3#danraku3:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}
h3#sample:after {
    left: 40px;
    border: 10px solid transparent;
    border-top: 10px solid #0790cd;
}
h3#sample:before {
    left: 37px; 
    border: 13px solid transparent;
    border-top: 13px solid #4aecfb;
}

h3#sample{

position: relative;

color: #ffffff;

background: #0790cd;

font-size: 16pt ;

border: 3px solid #4aecfb;

margin: 10px 10px 23px 10px;

padding: 10px 5px 10px 10px;

border-radius: 3px;

box-shadow:1px 3px 7px 0px #666666 ;

}

h3#sample:after, h3#danraku3:before {

content: "";

position: absolute;

top: 100%;

height: 0;

width: 0;

}

h3#sample:after {

left: 40px;

border: 10px solid transparent;

border-top: 10px solid #0790cd;

}

h3#sample:before {

left: 37px;

border: 13px solid transparent;

border-top: 13px solid #4aecfb;

}

２．見出しサンプル

h3#sample{
    margin: 0 0 1.5em;
    padding: 0.8em;
    border-left: 7px solid #B92A2C;
    border-bottom: 1px dashed #B92A2C;
    font-size: 1.143em;
    font-weight: bold;
}

h3#sample{

margin: 0 0 1.5em;

padding: 0.8em;

border-left: 7px solid #B92A2C;

border-bottom: 1px dashed #B92A2C;

font-size: 1.143em;

font-weight: bold;

}

３．見出しサンプル

h3#sample{
    position: relative;
    margin: 0 0 1.5em;
    padding: 0.8em 0 0.8em 1.5em;
    border: 2px solid #B92A2C;
    font-size: 1.143em;
    font-weight: bold;
}
 
h3#sample:before{
    content: "";
    position: absolute;
    background: #B92A2C;
    top: 50%;
    left: 0.5em;
    margin-top :-15px;
    height: 30px;
    width: 8px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

h3#sample{

position: relative;

margin: 0 0 1.5em;

padding: 0.8em 0 0.8em 1.5em;

border: 2px solid #B92A2C;

font-size: 1.143em;

font-weight: bold;

}

h3#sample:before{

content: "";

position: absolute;

background: #B92A2C;

top: 50%;

left: 0.5em;

margin-top :-15px;

height: 30px;

width: 8px;

border-radius: 2px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

}

４．見出しサンプル

h3#sample{
    color: #111;
    font-size: 1.143em;
    font-weight: bold;
    margin: 0 0 1.5em;
    border-bottom: 2px solid #B92A2C;
    box-shadow: 0 1px 0 #aaaaaa;
    -webkit-box-shadow: 0 1px 0 #aaaaaa;
    -moz-box-shadow: 0 1px 0 #aaaaaa;
    text-shadow: #999999 0px 1px 1px;
}
 
h3#sample{
    font-size:3.0em;
}