WordPressで見出しを装飾した

WordPressで見出しを装飾してみました

「外観」→「テーマの編集」→style.cssの h4 の所を以下の様に書き換えたり、付け足したりしました。

   .entry-content h4,
    .entry-summary h4,
    .page-content h4,
    .comment-content h4 {
        font-size: 18px;
        font-size: 1.8rem;
        line-height: 1.3333;
        margin-top: 2.6667em;
        margin-bottom: 1.3333em;
    position:relative;
    padding:10px;
    padding-left:15px;
    font-weight: bold;
    font-size: 18px;
    background-color: #51A2C1;
    color: #fff;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    }

    .entry-content h4:before,
    .entry-summary h4:before,
    .page-content h4:before,
    .comment-content h4:before{
    content:''; 
    height:25px; 
    width:4px; 
    display:block; 
    position:absolute; 
    top:10px; 
    left:4px; 
    background-color:#fff;
    border-left: 4px solid #fff;
    border-radius:3px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
}

こんな感じ h1

こんな感じ h2

そのまんま h3

こんな感じ h4

そのまんま h5
そのまんま h6

装飾されましたd(^ー゜*)


投稿日

カテゴリー:

,

投稿者:

タグ: