WordPressテーマ「SANGO」のカスタマイズ~見出しの変更

WordPressテーマ「SANGO」は、デフォルトで何もしなくても良いほどデザインが洗練されていますが、記事本文によりメリハリをつける意味で、当ブログではh1~h3の見出しをカスタマイズしています。

ちなみに、フォント変更についての前回の記事です。

WordPressテーマ「SANGO」のカスタマイズ~フォントの変更

しばらくしたらまた変更するかもしれませんが、参考までにコードを載せておきますね。各コードとも【追加CSS】にコピペすればOKです。

h1見出しのカスタマイズ

/* h1見出しのカスタマイズ */
.entry-title, .page-preview .entry-title {
    font-size: 1.72rem; 
    position: relative;
    padding: 0.2em 0.5em;
    background: -moz-linear-gradient(to right, rgb(255, 124, 
    111), #ffc994);
    background: -webkit-linear-gradient(to right, rgb(255, 
    124, 111), #ffc994);
    background: linear-gradient(to right, rgb(255, 124, 111), 
    #ffc994);
    color: black;
    font-weight: bold;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.56);
}

h2見出しのカスタマイズ

/* h2見出しのカスタマイズ */
/* 見出し本体 */
.entry-content h2 {
    position: relative;
    color: #ffffff;
    background: #555555;
    font-size: 1.7em;
    margin: 35px 0px 35px 0px;
    padding: 10px 5px 10px 15px;
    border: 3px solid #150300;
    border-radius: 3px;
    box-shadow: 1px 3px 7px 0px #777777;
}

h3見出しのカスタマイズ

h3の見出しはこんな感じ

/* h3見出しのカスタマイズ */
/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
  background: none;
  border: none;
  border-radius: 0;
}
/* 見出し本体 */
.entry-content h3 {
position: relative;
font-size: 1.5em;
margin: 33px 0px 33px 0px;
background: #f1f8ff;
padding-top: 15px;
border-left: solid 2em #5c9ee7;
}
.entry-content h3:before {
font-family: FontAwesome;
content: "\f040";
position: absolute;
padding: 0em;
color: white;
font-weight: normal;
left: -1.35em;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}