WordPressのH2等の見出しをかっこよくする！

見出しの装飾とかそういうのって

やりたいけどどうも後回しで結局やらないという。。

このサイトは今は

灰色うっすらで大きくなるだけです。

うむ、微妙。。

これを

こんな感じに変えたいと思います！

(何度かブログに来ていただいている方はキャッシュの関係で

反映されていないかもなので画像も貼っておきました！)

まずは外観→テーマの編集で

cssの編集画面を開きます。

後で色々書き換えやすいように

もう大胆に一番上に書いちゃいましょう！

/************************************
** カスタムCSS
************************************/
h2#midasi{
    position: relative;
    color: #fff;
    background: #2222ff;
    font-size: 1.143em;
    font-weight: bold;
    margin: 0 0em 1.5em 0em;
    padding: 0.8em;
    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;
}
h2#midasi:after,
h2#midasi:before{
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
}

h2#midasi:before{
    right: 0;
    border-left: 5px solid #333;
}

h2#midasi:after{
    left: 0;
    border-right: 5px solid #333;
}

/************************************

** カスタムCSS

************************************/

h2#midasi{

position: relative;

color: #fff;

background: #2222ff;

font-size: 1.143em;

font-weight: bold;

margin: 0 0em 1.5em 0em;

padding: 0.8em;

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;

}

h2#midasi:after,

h2#midasi:before{

content: "";

position: absolute;

top: 100%;

height: 0;

width: 0;

border: 5px solid transparent;

border-top: 5px solid #333;

}

h2#midasi:before{

right: 0;

border-left: 5px solid #333;

}

h2#midasi:after{

left: 0;

border-right: 5px solid #333;

}

これでOK！

後は

<H2 id="midasi">見出し</H2>

1	<H2 id="midasi">見出し</H2>

こうしてあげれば表示されるのですが、

いちいち手動でいれるのもあれなのでAddQuickTagを使いましょう！

開始タグに

終了タグに普通に

</H2>

これでOK！

うむ、これでちょっと見栄えよくなりましたね！

WordPressのH2等の見出しをかっこよくする！

こんな感じに変えたいと思います！

コメント

人気記事