見出しのデザインをアレンジしてみました!

By | 2016/05/04

ワードプレスでサイトを作る時、多くの方は自分の気に入ったテーマをダウンロードして利用していると思います。
ただ、全体のデザインが良くても、見出しなどの細かな修正を入れたくなることはありませんか?

今回は投稿ページで利用する<h2>,<h3>,<li>を少しアレンジしたので、自分のサイトもアレンジしてみたいなと、考えている方の参考になるよう、それぞれのタグのcssを紹介します。

まずは <h2>はこんな感じに

見出し見出し見出し

h2{
    position: relative;
    padding: 0px 10px 5px;
    border-left: 6px solid #00A1E0;
    font-size: 20px;
}
h2::after{
    position: absolute;
    left: 0;
    bottom: 0;
    content: '';
    width: 100%;
    height: 0;
    border-bottom: 1px solid #ccc;
}

次に <h3>

小見出し小見出し小見出し

h3{
    position: relative;
    padding-left: 30px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    line-height: 25px;
}
h3:after{
    position: absolute;
        top: .4em;
        left: .4em;
        z-index: 2;
        content: '';
        width: 12px;
        height: 12px;
        background-color: #ccc;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
}

<li>はこんな感じにしてみました

  • リスト1
  • リスト2
  • リスト3
li{
    list-style-type:none;
    list-style-image:none;
    margin: 5px 0px 5px 0px;
    position:relative;
    padding-left:20px;
}
li::before,
li::after{
    content:'';
    display:block;
    position:absolute;
    top:4px;
    left:8px;
    height:11px;
    width:4px;
    background:#aaa;
    border-radius:10px;
    transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}
li::before{
top:8px;
    left:3px;
    height:8px;
    transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
}

この記事を読んでくださった方の少しでも役に立てたなら幸いです!

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です