【H1/H2/H3/H4】見出しのデザインの変更【Simplicity2】【Luxeritas】

2017年1月22日2020年1月16日

こんにちは、マーチンです。

色んな方のブログを拝見すると見出しもそれぞれ違いますよね。

見出しの変更すればサイトの感じもガラリと変わったりするものです。

今回は参考までに見出しの変更方法を紹介。

Simplicity2とLuxeritasを使ったので一応両方記載しておきます。

見出しのデザインの変更

子テーマのスタイルシート(style.css)に追加するだけです。

↓の見出しのコードを記載してます。

子テーマのスタイルシートには下記の様に記載してます。

Simplicity2の場合

/*記事タイトル*/

.article h1 {
  font-size:20px;
}

.article h2 {
  font-size:18px;
  background: #4682b4;
  color: #fff;
  padding: 12px 0px 12px 14px ;
  border-left: none;
  box-shadow: 0 2px 5px #999;
}

.article h3 {
  font-size:17px;
  border-bottom: none;
  border-left: 7px solid #bc0019;
  padding: 8px 0px 8px 12px;
  box-shadow: 0 2px 5px #999;
}

 .article h4 {
 border-bottom:3px solid #4682b4;
 position: relative;
 color: #111;
 font-size: 1.143em;
 font-weight: bold;
 margin: 0 0 1.5em;
 padding: 0.5em 0.5em 0.5em 1.7em;
}

h4:before{
 content: "";
 position: absolute;
 background: #4682b4;
 top: 0;
 left: 0.4em;
 height: 12px;
 width: 12px;
 transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}

 h4:after{
 content: "";
 position: absolute;
 background:#4682b4;
 top: 1.0em;
 left: 0;
 height: 8px;
 width: 8px;
 transform: rotate(15deg);
 -moz-transform: rotate(15deg);
 -webkit-transform: rotate(15deg);
 -o-transform: rotate(15deg);
 -ms-transform: rotate(15deg);
}

Luxeritasの場合

*/記事タイトル*/

.post h1 {
  font-size:20px;
}
 
.post h2 {
  font-size:18px;
  background: #4682b4;
  color: #fff;
  padding: 12px 0px 12px 14px ;
  border-left: none;
  box-shadow: 0 2px 5px #999;
}
 
.post h3 {
  font-size:17px;
  border-bottom: none;
  border-left: 7px solid #bc0019;
  padding: 8px 0px 8px 12px;
  box-shadow: 0 2px 5px #999;
}

  .post h4 {
 border-bottom:3px solid #4682b4;
 border-left: 0 none;
 position: relative;
 color: #111;
 font-size: 1.143em;
 font-weight: bold;
 margin: 0 0 1.5em;
 padding: 0.5em 0.5em 0.5em 1.7em;
}
 
h4:before{
 content: "";
 position: absolute;
 background: #4682b4;
 top: 0;
 left: 0.4em;
 height: 12px;
 width: 12px;
 transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}
 
 h4:after{
 content: "";
 position: absolute;
 background:#4682b4;
 top: 1.0em;
 left: 0;
 height: 8px;
 width: 8px;
 transform: rotate(15deg);
 -moz-transform: rotate(15deg);
 -webkit-transform: rotate(15deg);
 -o-transform: rotate(15deg);
 -ms-transform: rotate(15deg);
}

色やサイズはお好みで変更しましょう。

色を変えたい時は　#4682b4　の部分を変更。