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

2020年1月16日

Photo by Reza Namdari

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

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

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

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

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 の部分を変更。

 

こちらのサイトでは現在この様な見出しにしてます。

H2

H3

H4

 

2020年1月16日IT, WordPressIT, web, WordPress

Posted by まーちん