wordpressテーマMesocolumnの見出しをカスタマイズ

今回は見出し設定について

初期値の場合は見出しが文字の大小だけで少し寂しいので素人なので苦戦しながら変更しました。

初期値のcssでは以下のようになっています。

.post-content h1 {font-size: 1.8em; margin: 0 0 1em; }
.post-content h2 {font-size: 1.7em;margin: 0 0 1em;}
.post-content h3 {
	font-size: 1.35em;
	margin: 0 0 1em;
}
.post-content h4 {font-size: 1.5em;margin: 0 0 1em;}
.post-content h5 {font-size: 1.35em;margin: 0 0 1em;}
.post-content h6 {font-size: 1em;margin: 0 0 1em;}

スタイルシート (style.css)より検索してください。

キーボードのCtrl+Fで【.post-content h1】と検索してください。

h1～h6までありますのでこれを変更していきます。

cssの変更

コピー＆ペーストでも使えます。

見出しジェネレーターなどがありますのでお好きな設定に変更してください。

h1は

.post-content h1 {font-size: 1.8em; margin: 0 0 1em; }

これから以下へ差し替えました。

.post-content h1{
 color: #111;
 margin: 0 0 0.5em;
 border-bottom: 4px solid #EA3049;
 }
 
.post-content h1:first-letter{
padding:0.08em 0.1em 0.08em 0.1em;
margin-right:4px;
background:#F7E33E;
font-size:1.2em;
color:#111;
 
 }

次は見出しh2の変更

初期は以下になっています。

.post-content h2 {font-size: 1.7em;margin: 0 0 1em;}

変更後は以下をコピペしてください。

カラーコードなど自分好みに変更すればＯＫです。

.post-content h2 {font-size: 1.5em;margin: 0 0 1em;}
.post-content h2 {
    position: relative;
    color: #ffffff;
    background: #da0f38;
    font-size: 16pt ;
    border: 3px solid #360200;
    margin: 10px 10px 23px 10px;
    padding: 10px 5px 10px 10px;
    border-radius: 3px;
    box-shadow:1px 3px 7px 0px  #666666 ;
}
.post-content h2:after, .sample2:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}
.post-content h2:after {
    left: 40px;
    border: 10px solid transparent;
    border-top: 10px solid #da0f38;
}
.post-content h2:before {
    left: 37px; 
    border: 13px solid transparent;
    border-top: 13px solid #360200;
}

見出しh3の変更方法

初期は以下になっています。

.post-content h3 {
	font-size: 1.35em;
	margin: 0 0 1em;
}

これを変更します。

またコピペしてください。

.post-content h3 {
    position: relative;
    color: #ffffff ;
    background: #4ac6de;
    font-size: 12pt ;
    line-height: 1;
    margin: 20px -10px 20px -10px;
    padding: 10px 5px 10px 20px;
    box-shadow:1px 3px 7px 0px  #c1c1c1 ;
    border-top:3px solid #0f5660;
}
.post-content h3:after, sample2:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
}
.post-content h3:after {
    left: 0;
    border-right: 5px solid #333;
}
.post-content h3:before {
    right: 0;
    border-left: 5px solid #333;
}

見出しh4の変更

引き続き初期コード

.post-content h4 {font-size: 1.5em;margin: 0 0 1em;}

変更後。

ここもコピペで使えます。

.post-content h4 {
	position:relative;
	padding:10px;
	background:#5b72e9;
	box-shadow:
		0 -10px 0 0 #95daff,
		10px 0 0 0 #5b72e9,
		-10px 0 0 0 #5b72e9,
		0 3px 3px 0 rgba(0,0,0,0.1);
}

h5,h6は設定していないので初期のままになっていますので省略します。

h1～h4の初期コードは

.post-content h1 {font-size: 1.8em; margin: 0 0 1em; }
.post-content h2 {font-size: 1.7em;margin: 0 0 1em;}
.post-content h3 {
	font-size: 1.35em;
	margin: 0 0 1em;
}
.post-content h4 {font-size: 1.5em;margin: 0 0 1em;}
.post-content h5 {font-size: 1.35em;margin: 0 0 1em;}
.post-content h6 {font-size: 1em;margin: 0 0 1em;}

完成後のコードはこうなっています。

.post-content h1{
    color: #111;
    margin: 0 0 0.5em;
    border-bottom: 4px solid #EA3049;
   }
 
.post-content h1:first-letter{
padding:0.08em 0.1em 0.08em 0.1em;
margin-right:4px;
background:#F7E33E;
font-size:1.2em;
color:#111;
 
    }
 

.post-content h2 {
    position: relative;
    color: #ffffff;
    background: #da0f38;
    font-size: 16pt ;
    border: 3px solid #360200;
    margin: 10px 10px 23px 10px;
    padding: 10px 5px 10px 10px;
    border-radius: 3px;
    box-shadow:1px 3px 7px 0px  #666666 ;
}
.post-content h2:after, .sample2:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}
.post-content h2:after {
    left: 40px;
    border: 10px solid transparent;
    border-top: 10px solid #da0f38;
}
.post-content h2:before {
    left: 37px; 
    border: 13px solid transparent;
    border-top: 13px solid #360200;
}

.post-content h3 {
    position: relative;
    color: #ffffff ;
    background: #4ac6de;
    font-size: 12pt ;
    line-height: 1;
    margin: 20px -10px 20px -10px;
    padding: 10px 5px 10px 20px;
    box-shadow:1px 3px 7px 0px  #c1c1c1 ;
    border-top:3px solid #0f5660;
}
.post-content h3:after, sample2:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #333;
}
.post-content h3:after {
    left: 0;
    border-right: 5px solid #333;
}
.post-content h3:before {
    right: 0;
    border-left: 5px solid #333;
}
.post-content h4 {
	position:relative;
	padding:10px;
	background:#5b72e9;
	box-shadow:
		0 -10px 0 0 #95daff,
		10px 0 0 0 #5b72e9,
		-10px 0 0 0 #5b72e9,
		0 3px 3px 0 rgba(0,0,0,0.1);
}